[JS] 니네 var와 우리 let

웹을 조금이라도 경험해본 사람들은 아마 html, css, js를 들어봤을 것이다. 이 셋을 신체에 비유하면

html은 뼈, css는 살, js는 근육으로 비유할 수 있다. 문서의 틀을 잡아주는 html, 그 문서를 꾸며주는 css, 그 문서를 동적으로 더 다양하게 보여줄 수 있는 js이기 때문이다.

그리고 웹을 공부하는 과정 중 처음으로 딱 어려움을 겪게 될 부분이 아마 js일 것이다. 개인의 차이가 있겠지만, 적어도 나는 그랬다. 특히 js의 개념과 실전을 둘 다 잡기가 어려웠기 때문이다. 그래서 오늘은 배우고 공부해도 조금만 지나면 까먹는 js의 개념 중 가장 첫번째를 이야기해보려고 한다.

변수

다들 각자 공부하는 프로그래밍 언어가 있을 것이다. 그 모든 언어에선 변수라는 것이 존재한다. 자바스크립트 또한 마찬가지이다. 다른 언어와는 변수 선언 방법이 조금 다르다. 데이터 타입을 직접 서술하는 (ex) int a, string b) 처럼 다른 언어와는 달리 그냥 어떠한 변수 선언 키워드만 있으면 자바스크립트 엔진이 '='을 통해 알아서 변수의 자료형을 결정해준다.(ex) var a = 5(number))

그렇다. 자바스크립트에선 변수 선언 방법이 남들과는 좀 다르다.

그럼 이 유별난 자바스크립트의 변수 선언 방식에 대해 알아보자.

var

먼저 var. 일단 선전포고한다. var는 쓰지 않았으면 한다.

이해한다. 자바스크립트 변수 선언 방식이라면서, 쓰지말라니.

ㅎㅎ그런 방식이 있다는거지, 쓰라곤 안했다.😅

먼저 var는 ES6 이전의 변수 선언 키워드이다. 매우 유연한 방식으로 변수를 선언할 수 있다는 것이 장점이다. 하지만 그 장점이 아주 큰 문제점이 될 수 있다.

var는 fuction 단위의 범위를 가진다.

var rrr = 'rrr';
function sayRrr() {
    var rrr = 'rrr in function!';
    console.log(rrr);
}

sayRrr(); // rrr in function!
console.log(rrr); // rrr

위 코드를 보면 rrr이라는 변수의 유효범위가 function 내라는 것을 알 수 있다. 따라서 var는 {}단위의 scope(범위)가 아니라, function 단위의 scope를 가진다.

var zz = 'Hi!';
if(true)
{
	var zz = 'zz in if';
}

console.log(zz); // zz in if

위 코드를 보면, if절 내부에서 다시 선언하여도 var의 범위는 {}가 아닌 function이기 때문에 값이 변경된다.

var hi = 'first hi!';
var hi  = 'second hi!';
console.log(hi); // second hi

또한, 같은 변수를 두 번 선언하여도 오류가 나지 않고 잘 작동된다. 이렇게 유연한만큼 좋다고 볼 수도 있지만, 코드가 많아지면 그만큼 복잡한 문제점이 많이 생길 것이다. 이런 점이 var가 문제를 일으킬 수 있다는 것이다.

let

ES6에 들어온 변수 선언 방식이다. var와 let 중 var를 쓰지말라고 하는데, 그럼 둘이 아주 다른 특성을 가지고 있기 때문이지 않을까? 그럼 그 특성이 무엇일까? 먼저 다시 떠올려보자. 필자가 방금 위에서 말한 var의 특성은 무엇인가?

function 단위의 범위를 가진다와 재선언 가능이었다. 그럼 let의 특성은 뭐길래 var는 느그var이고 let은 우리 let이 된걸까? 지금부터 알아보자.

let은 {} 괄호 변수이다.

let rrr = 'first rrr';
rrr = 'second rrr';
let rrr = 'first rrr';
let rrr = 'second rrr';

첫 번째 코드같은 재정의는 된다. 하지만 두 번째 코드같은 재선언은 허용되지 않는다.

let rrr = 'first rrr';
{
	let rrr = 'inner rrr';
    console.log(rrr); // inner rrr
}
console.log(rrr); // first rrr

위 처럼 var와 달리, {}의 범위를 가진다.

const

마지막으로 const는 let과 거의 똑같다고 보면된다. 하지만 딱 하나.

값을 재정의 할 수 없다.

const rrr = 'rrr';
rrr = 'changed rrr'; // error

아래의 코드처럼 const는 let처럼 {}의 범위를 가진다.

let rrr = 'first rrr';
{
	let rrr = 'inner rrr';
    console.log(rrr); // inner rrr
}
console.log(rrr); // first rrr

총정리

1. var는 function범위, let과 const는 {}범위를 가진다.
2. var는 유연하지만 그만큼 문제가 많다. 그래서 var가 아닌 let과 const를 써야한다.
3. 변수 선언에는 기본적으로 const, 재정의가 필요한 경우 let을 쓰는 것을 지향하자.

이 글을 통해 var를 왜 쓰지말아야하는지, let을 왜 써야하는지, 걔네 둘이 대체 뭔지 잘 알아갔으면 좋겠다.