[Javascript/기초] 변수 선언(const/var/let)

기본적으로 Javascript에서 변수를 선언하는 방법에는 const / var / let 3가지가 있다.

오늘은 이 3가지 변수 선언 방법에 대해 알아보고자 한다.

 

1. const

　　const는 상수를 의미한다.

　　const 변수는 한 번 선언을 하면 재할당 할 수 없으며, 재선언 역시 불가하다.

// EXAMPLE_1

const number = 42;

try {
    number = 99;
} catch (err) {
    console.log(err);
    // expected output: ERROR
}

console.log(number);
// expected output: 42

// EXAMPLE_1 const number = 42; try { number = 99; } catch (err) { console.log(err); // expected output: TypeError: invalid assignment to const `number' // Note - error messages will vary depending on browser } console.log(number); // expected output: 42

 

　　그러므로, const 변수를 선언할 때는 값이 동적인지 정적인지를 잘 생각해서 선언할 필요가 있다.

---

2. var

　　var는 가장 일반적으로 쓰이는 변수 선언 방법이다.

　　var는 변수를 선언하고, 선택적으로 초기화할 수 있다.

// EXAMPLE_2

var x = 1;

if (x === 1) {
    var x = 2;

	console.log(x);
    // expected output: 2
}

console.log(x);
// expected output: 2

 

---

3. let

　　let 역시 var와 비슷하게 Javascript에서 많이 쓰이는 변수 선언 방법중 하나이다.

　　쓰임은 var와 비슷하나 차이가 있다면, var는 전역변수의 성질을 띄고 let은 지역변수의 성질을 띈다는 것이다.

//  EXAMPLE_3

let x = 1;

if (x === 1) {
    let x = 2;

    console.log(x);
    // expected output: 2
}

console.log(x);
// expected output: 1

　　

　　var의 예시와 같은 코드이며, 변수 선언 방식만 달리하였다.
　　하지만, 결과는 완전히 다른 것을 확인 할 수 있다.

---

! 부록

 

이 var와 let의 극명한 차이는 부모 화면에서 자식 popup을 열었을 때 알 수 있다.

아래의 예시를 통해 차이점에 대한 이해를 도울 수 있다.

// 부모 화면
var A = 9;
let B = 9;


// 자식 화면
console.log(window.opener.A);
// expected output: 9

console.log(window.opener.B);
// expected output: ERROR

 

자식 화면에서 부모 화면의 변수에 접근을 하기 위해 *window.opener라는 것을 사용한다.

이 때 var는 전역변수의 성질을 갖고있어 자식 화면에서 부모 화면의 변수 참조가 가능하지만,

let은 지역변수의 성질을 갖고있으므로 자식 화면에서 부모 화면의 변수 참조가 불가능하다.

 

 

* 항목은 추후에 업로드 예정인 글에서 다룰 내용.