[48일차] const, let, var

저요·2022년 11월 9일

2022 100th day challenge

목록 보기

48/97

서론

const, let, var은 javascript에서 많이 사용하는 변수 선언 방식이다. 대충 나는 피상적으로 저 셋을 이해하고 있는데, 오늘은 좀 더 깊이 알고 싶은 마음에 글 주제로 선정했다. 내가 알고있는 것들은 다음과 같다.

const와 let은 Declaring Block-Scoped이고 var은 Declaring non-blocking이다.
hoisting 문제와 (hoisting이 무엇인지는 내일 이어서 공부하도록 할 예정이다.) 성능문제로 const와 let이 도입된 ES6이후부터는 var보다는 let을 권장하고 있다.

const와 let의 특징으로 위에서 언급한 Declaring non-blocking에 대해서는 한 번 글로 적은 적이 있다. 참고로 여기에 먼저 링크를 걸어놓도록 하겠다.

[javascript] Declaring Block-Scoped

https://velog.io/@eprnfmfmfm/javascript-Declaring-Block-Scoped

본론

본론으로 들어와서 각 변수선언 방식의 특징과 장점, 단점 ES6 이후의 변화에 대해서 이야기하고자 한다.

var

syntax

	var varName = value; //var valName; 초기화값이 없어도 가능

함수단위로 실행된다.

	var c = 3;
    
    function test(){
    	var a = 1;
        if(true){
        	var b = 0;
        }
        
        console.log(a)	// 1
        console.log(b)	// 0 if를 벗어나도 변수가 살아있다.
        console.log(c)  // 3
    }
    	console.log(a)	// ReferenceError
        console.log(b)	// ReferenceError
        console.log(c)  // 3

var은 함수가 실행되기 전에 프로세스 안에 이미 변수가 선언되고 초기화 된다. (hoisting)
그렇게 때문에 다음과 같이 함수를 선언하기도 전에 변수의 값을 변경하는게 가능하다.

	tmp = 2;
	var tmp; 
    
    //가독성을 위해 아래와 같이 var로 변수를 선언할 때는 가장 위에 선언하도록 권장하고 있다. 
    var tmp;
	tmp = 2;

재할당, 변수 중복 선언이 가능하다.

ES6이후 var의 단점을 보완하기 위해 const와 let이 도입되었다.

const

syntax

	//꼭 초기화 값이 필요하다 const tmp; 
    //Uncaught SyntaxError: Missing initializer in const declaration
    
    const tmp = value;

상수의 성격을 지닌다. 할당 연산자를 이용한 재할당, 재선언이 금지되어있다.
값을 재할당하는건 불가능하다고 했으나, 그게 값을 변경할 수 없다는 의미와는 다르다. object와 array에서는 update가 가능하다.
블록단위 실행

	const c = 3;
    
    function test(){
    	const a = 1;
        if(true){
        	const b = 0;
        }
        
        console.log(a)	// 1
        console.log(b)	// ReferenceError
        console.log(c)  // 3
    }
    	console.log(a)	// ReferenceError
        console.log(b)	// ReferenceError
        console.log(c)  // 3

hoisting이 일어나지 않는 것처럼 사용됨.

let

syntax

	let tmp = value; //let tmp; 같이 초기화값이 없어도 가능

블록단위 실행

	let c = 3;
    
    function test(){
    	let a = 1;
        if(true){
        	let b = 0;
        }
        
        console.log(a)	// 1
        console.log(b)	// ReferenceError
        console.log(c)  // 3
    }
    	console.log(a)	// ReferenceError
        console.log(b)	// ReferenceError
        console.log(c)  // 3

재선언 금지 (동일이름으로 변수선언 방지)
hoisting이 일어나지 않는 것처럼 사용됨.

장점과 단점

var을 사용해서도 앱 개발은 무난하게 가능하다. 하지만 코드가 방대해지거나, 같은 workspace에서 여러 개발자가 동시에 작업을 할 때 변수명을 미리 정해두지 않고 임의로 사용하거나 했을때 서로 모르고 중복으로 변수를 선언하면 원치 않은 결과값을 얻을 수 있다.
또한, 가독성과 유지보수문제로 인해 ES6으로 const와 let이 도입된 이후부터는 이것들을 사용하도록 권장하고 있는 편이다.