[SeSACx코딩온] JS 변수 선언과 할당
JS 변수 선언과 할당
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS 기초 학습</title>
</head>
<body>
<h1>Javascript를 배워봅시다~!</h1>
<script src="./index3.js"></script>
</body>
</html>
JAVASCRIPT 코드
// Chap. 1)
// 변수 선언 : 변수 정의
// 변수 할당 : = (연산자)를 이용해 값을 넣는다.
// 초기화 : 변수에 처음 할당하는 순간.
// ### var
// - 선언 단계와 초기화 할당 단계가 동시에 진행이 되며, 초기화에는 undefined 값이 들어간다.
// - 중복 선언, 재선언이 가능하며, 예기치 못한 값을 반환 할 수 있음.
// - 선언 이전에 참조하면 언제나 undefined를 반환한다.
// ### let
// - let 키워드로는 변수 중복 선언이 불가능하지만, 재할당이 가능하다.
// ### const
// - 재선언이 불가능하고, 재할당이 불가능하다.
// - 초반에 선언을 할 때 반드시 ** 초기화 ** 를 동시에 진행해야 한다.
// Chap. 2)
// 변수 선언 키워드 #1 - var
var a; // 변수 선언
console.log(a); // undefined: 값을 할당하지 않았음.
a = 2; // 변수 할당
console.log(a); // 2 (변수값 출력)
var a2 = 4; // 변수 선언 & 변수 할당
console.log(a2); // 4 (변수값 출력)
var a2 = 5; // 변수 중복선언 가능 !
console.log(a2); // 5 (변수 출력값)
/////////////////////////////////////////////
// ** var 변수의 문제점
// 1. 중간의 같은 이름의 변수를 다시 선언해도 기존의 변수를 덮어 씌움.
// - 변수를 선언 했다는 것은 분명히 다른 데이터를 넣으려는 것인데,
// 그것을 기존의 데이터에 덮어 씌우면?! -> 문제 발생 !!
// 2. 변수가 {블록 단위} 에서 끝나는 것이 아니라, 자기 마음대로 전역으로 돌아다니면서 영향력을 행사한다.
// -> 의도치 않은 문제 발생 !!
// 3. 호이스팅 문제
// - 따라서 ES6 문법 부터는 var 대신 let 사용을 권장한다.
// ** 참고)
// Q) ES6가 뭔가요?
// A) JS의 표준 버전 중 하나. (JS 주요 업데이트)
/////////////////////////////////////////////
// 변수 선언 키워드 #2 - let
let b; // 변수 선언
console.log(b); // undefined: 값을 할당하지 않았음.
b = 7; // 변수 할당
console.log(b); // 7 (변수값 출력)
let b2 = 77; // 변수 선언 & 변수 할당
console.log(b2); // 77 (변수값 출력)
// let b2 = 78; // error: let 키워드는 중복 선언 불가능
b2 = 78; // 변수 재할당 가능 !
console.log(b2); // 78 (변수값 출력)
// 변수 선언 키워드 #3 - const
// -> 변수 선언과 할당ㅇ 동시에 !! (반드시)
// -> 변하지 않는 값을 변수에 저장할 때 사용 (상수)
// const c; // error: const 키워드는 선언과 할당을 반드시 동시에 해야한다 !!
const c = 3; // 변수 선언 & 변수 할당
console.log(c); // 3 (변수값 출력)
// c = 33; // error: const 변수는 재할당이 불가능 !
/////////////////////////////////////////////
//Chap. 4)
// ** 호이스팅
// JavaScript에서 변수 및 함수 선언이 코드의 최상단으로 올려지는 현상.
// -> 변수와 함수의 선언이 실제 코드의 실행 전에 처리
// -> 이는 코드를 이해하고 예측하는데 혼란을 줄 수 있음.
// Ex)
console.log(x); // undefined
var x = 10;
console.log(x); // 10
// 실제 JS 엔진 이렇게 해석함.
var x; // 변수 선언 (호이스팅) - 입력하지 않아도 알아서 선언할 걸로 인식.
console.log(x); // undefined
var x = 10;
console.log(x); // 10
// 변수 x가 선언되기 전에 사용 되었지만, JS엔진은 선언을 최상단으로 올려서 undefined를 출력한 후, 나중에 변수를 초기화하여 값을 할당.
// 변수 및 함수는 사용하기 전에 반드시 선언하는 것이 좋다.
//let, const 키워드는 호이스팅을 줄이고 블록스코프를 제공하여 변수의 유효 범위를 명확히 해야한다.
/////////////////////////////////////////////
JavaScript 변수 선언과 할당
1. 변수 선언: 정의를 뜻함.
2. 변수 할당: = 연산자를 이용해 값을 넣는 것
3. 초기화: 변수에 처음 할당하는 순간
var
- 선언 단계와 초기화 할당 단계가 동시에 진행되며, 초기화 시
undefined값이 들어갑니다. - 중복 선언과 재선언이 가능하여 예기치 못한 값을 반환할 수 있습니다.
- 선언 이전에 참조하면 언제나
undefined를 반환합니다.
var a; // 변수 선언
console.log(a); // undefined: 값을 할당하지 않았음.
a = 2; // 변수 할당
console.log(a); // 2 (변수값 출력)
var a2 = 4; // 변수 선언 & 변수 할당
console.log(a2); // 4 (변수값 출력)
var a2 = 5; // 변수 중복선언 가능!
console.log(a2); // 5 (변수 출력값)
문제점
- 중복 선언 가능: 동일한 이름의 변수를 다시 선언하면 기존 변수를 덮어씁니다.
- 함수 스코프: 변수가 함수 범위 내에서만 유효하며, 블록 스코프를 따르지 않습니다.
- 호이스팅 문제: 변수가 선언되기 전에 사용할 수 있습니다.
ES6부터 var 대신 let을 사용할 것을 권장합니다.
let
let키워드는 변수 중복 선언이 불가능하지만, 재할당은 가능합니다.- 블록 스코프를 가집니다. (블록 스코프는 하단 참고)
let b; // 변수 선언
console.log(b); // undefined: 값을 할당하지 않았음.
b = 7; // 변수 할당
console.log(b); // 7 (변수값 출력)
let b2 = 77; // 변수 선언 & 변수 할당
console.log(b2); // 77 (변수값 출력)
// let b2 = 78; // error: let 키워드는 중복 선언 불가능
b2 = 78; // 변수 재할당 가능!
console.log(b2); // 78 (변수값 출력)
const
const키워드는 재선언과 재할당이 불가능합니다.- 선언과 할당을 반드시 동시에 해야 합니다.
- 블록 스코프를 가집니다.
// const c; // error: const 키워드는 선언과 할당을 반드시 동시에 해야한다!
const c = 3; // 변수 선언 & 변수 할당
console.log(c); // 3 (변수값 출력)
// c = 33; // error: const 변수는 재할당이 불가능!
블록 스코프 란?
블록 스코프 는 {} 중괄호로 감싼 코드 블록 내에서만 변수가 유효함을 의미합니다. let과 const는 블록 스코프를 따르지만, var는 블록 스코프를 따르지 않고 함수 스코프를 따릅니다.
if (true) {
var x = 5;
}
console.log(x); // 5 (var는 블록 스코프를 따르지 않음)
if (true) {
let y = 10;
const z = 15;
}
console.log(y); // ReferenceError: y is not defined (let은 블록 스코프를 따름)
console.log(z); // ReferenceError: z is not defined (const도 블록 스코프를 따름)
위 예제에서 var로 선언된 변수 x는 블록 스코프를 따르지 않기 때문에 블록 외부에서도 접근이 가능합니다. 반면 let과 const로 선언된 변수 y와 z는 블록 스코프를 따르기 때문에 블록 외부에서는 접근할 수 없습니다.
호이스팅 이란?
호이스팅 은 JS 에서 변수 및 함수 선언이 코드의 최상단으로 올려지는 현상입니다. 이는 코드의 실행 전에 변수와 함수의 선언이 처리되기 때문에 발생합니다.
console.log(x); // undefined
var x = 10;
console.log(x); // 10
위 코드는 실제로 다음과 같이 해석됩니다:
var x; // 변수 선언 (호이스팅)
console.log(x); // undefined
x = 10; // 변수 할당
console.log(x); // 10
변수 x가 선언되기 전에 사용되었지만, JS 엔진은 선언을 최상단으로 올려서 undefined를 출력한 후, 나중에 변수를 초기화하여 값을 할당합니다.
let과 const 키워드는 호이스팅을 줄이고 블록 스코프를 제공하여 변수의 유효 범위를 명확히 합니다.
따라서 변수 및 함수는 사용하기 전에 반드시 선언하는 것이 좋습니다.
요약
var: 중복 선언 가능, 함수 스코프, 호이스팅 문제let: 중복 선언 불가, 블록 스코프, 재할당 가능const: 중복 선언 및 재할당 불가, 블록 스코프, 선언과 할당을 동시에 해야 함