ES6 JavaScript 1 - 변수

변수 정의하기 :  const, let

기존 자바스크립트는 변수를 정의하는 방법이 var로 유일했습니다.

하지만 여러 문제점이 있어서 const와 let이 생겼는데요, 어떤 문제점 때문에 생겼는지 알아본다면

const와 let의 특성을 더 쉽게 이해할 수 있을 거라 생각합니다!

var의 문제점 1. function scope

var는 유효범위가 함수 단위입니다. 따라서 함수 내에서 선언된 변수는 함수 내에서 사용할 수 있습니다.

프로그램은 하나의 큰 함수로 이루어져 있기 때문에 전역 변수는 프로그램 어디에서도 사용할 수 있습니다.

함수 스코프가 어떤 문제점을 갖느냐하면..!

for(var i=0; i<10; i++){
	console.log(i);
}
console.log(i); //10

for문을 사용할 때 만든 변수는 전역 변수가 되어 반복문이 끝난 이후에도 변수가 남아있어 버린 다는 것입니당.

for문은 함수가 아니기 때문이지요.

for,while,if 등 모두 같은 문제를 갖고 있습니다.

var의 문제점 2. Hoisting

var로 정의된 변수는 해당 영역의 최상단에 올려지는데, 이걸 호이스팅이라고 합니다.

console.log(i); 
var i = 0;

해당 코드를 실행해도 undefined가 콘솔창에 찍힐 뿐 오류가 나지 않습니다.

i가 호이스팅되면서 변수 정의는 최상단에 위치한다고 보시면 됩니다.

var i;
console.log(i);
i = 0;

(위 코드가 호이스팅돼서 일케 변형된다고 보시면 돼요)

 

 

기타 등등 여러 문제로 인해 ES6에서는 변수를 정의하는 방법으로 const와 let이 생겼습니다.

 

해결책 1. 블록 영역

const와 let로 선언된 변수는 함수 영역이 아닌 블록 영역 내에서 유효합니다.

따라서 if,for,switch 등등의 함수 내부에서 선언된 변수는 해당 조건/반복문이 끝나며 함께 사라집니다.

var의 1번 문제 해결~~~

 

해결책2. 호이스팅

const와 let로 정의된 변수 역시 호이스팅됩니다. 하지만!! 변수 정의 전 변수를 사용하려고 하면 참조 에러가 발생합니다.

console.log(i); //참조 에러
const i = 0;

 

엥? 호이스팅 안되는 거 아닌가요? 생각할 수도 있지만, 다음과 같이 변수가 정의된 위치와 호이스팅된 위치 사이에서 변수를 사용하려고 할 때 에러가 발생하는 걸 볼 수 있습니다. 

const foo = 1;
{
	console.log(foo); // 참조에러
	const foo = 2;
}

만약 호이스팅이 되지 않는다면 콘솔창에 1이 출력돼야하는데,

호이스팅 때문에 블록 내부의 foo를 참조하려고 하여 참조 에러가 발생한 것입니다.

 

const와 let으로 선언된 변수는 호이스팅은 되지만

한 블록 내에서 선언되기 전엔 참조할 수 없기 때문에 var의 2번 문제를 해결했다고 볼 수 있습니다. 헤헤

 

+) 재할당 불가능한 const 변수

const로 정의된 변수는 재할당이 불가능합니다.

하지만 'const로 정의된 객체'의 '속성값'은 변경할 수 있습니다.

const bar = { prop1 : 'a'};
bar.prop1 = 'b';

const arr = [1,2,3]
arr[0] = 4;

console.log(bar, arr) // {prop1: 'b'}, [4,1,2]

const로 정의한 객체를 참조하는 변수 자체를 변경하는 것은 안됩니다!

const bar = {prop1 : 'a'};
bar = {prop2: 'b'}; // 에러

 

정리 :

1. const로 선언된 객체의 내부 속성값 변경은 OK

2. const로 선언된 변수 자체 변경(재할당)은 NO

 

 

 

 

실전 리액트 프로그래밍(이재승)을 공부한 후 작성한 글입니다.