var, let, const에 대해서

let, const는 ES6에 나온 문법이다. var와 비슷한 성질을 가지고 있지만 다르다!

예제를 통해 이후부터 var는 쓰지 말도록 하자!

'use strict';

age = 4;
console.log(age);
var age;

name = goo;
console.log(name);
let name;

• var은 선언되기전에 사용이 가능하다. (이를 var hoisting이라고 한다)
• let은 아직 선언이 안되었기 때문에 쓸 수 없다고 경고창이 뜬다.

호이 스팅이란?

어디에 선언했냐 상관없이 항상 젤 위로 선언을 끌어올려주는 것을 말한다.

 

또 다른 var를 쓰면 안 되는 이유는 block scope이 없기 때문이다.

{
  age = 4;
  var age;
}

console.log(age);

• 블록 스코프로 변수를 선언해도 아무 곳에서나 사용이 가능해서 위험 부담이 있어서 let을 사용한다!

 

그렇다면? let을 사용하면서 얼마나 편한지 한번 보자

먼저 아래와 같이 정의한다면 결괏값이 어떻게 나올까?

var funcs = []
for (var i = 0; i < 10; i++) {
  funcs.push(function () {
    console.log(i)
  })
}
funcs.forEach(function (f) {
  f()
})

닶은 값 10이 10번 찍히게 된다. 왜냐하면 funcs.forEach로 함수를 실행하게 되면 console.log(i)에서 i의 변수를 전역에서 찾기 된다. 따라서 for문을 다 실행하고 나서 var i로 인해 i 값은 10이 되어 버리고 그 값을 접근하게 되어서 10이 찍히게 되는 것이다.

그러면 ES6 이전에는 어떻게 해결했을까?

var funcs = []
for (var i = 0; i < 10; i++) {
  funcs.push((function (v) {
    return function () {
      console.log(v)
    }
  })(i))
}
funcs.forEach(function (f) {
  f()
})

다음과 같이 클로저를 이용해서 해결하였다. 즉시 실행 함수로 i의 값을 매개변수로 넘겨서 v가 i의 값을 가지고 있다. 따라서 return으로 실행이 된 함수 결괏값을 넘겨주게 되고 그 함수는 클로저로 인해 v를 접근하게 된다. 

이제 let을 이용해서 다음과 같은 이슈를 해결해보자

let funcs = []
for (let i = 0; i < 10; i++) {
  funcs.push(function () {
	  console.log(i)
  })
}
funcs.forEach(function (f) {
  f()
})

ES6에서 추가된 블록 스코프로 for문안에서 let i를 선언하게 각각의 i마다 블록 스코프가 생성이 되고 독립적인 값을 가지게 된다. 따라서 정상적으로 0~9까지 나오게 된다.

Const

• 한 번 값을 할당하게 된다면 절대! 값을 변경할 수 없다.
• 웬만하면 한 번 값을 할당하고 변경이 안 되는 곳에 사용하면 좋다
  • 보안상에 좋다
  • 다양한 스레드가 동시에 접근해서 값을 변경하는 것을 막아준다.
  • 나중에 코드를 변경하거나 다른 개발자가 코드를 변경할 때 실수를 막아준다.

이제 예제로 한 번 알아보자

const OBJ = {
  prop1 : 1,
  prop2 : 2
}
OBJ.prop1 = 3
console.log(OBJ.prop1)

위에서 설명했듯이 한 번 값을 할당하고 나면 변경이 안된다고 하는데 위의 결괏값은 얼마가 나올까?

답은 3이 나온다 왜냐하면 OBJ는 prop1과 prop2라는 객체를 참조를 하고 있기 때문이다. 따라서 OBJ가 가리키고 있는 prop1의 값을 바꾸라는 뜻이기에 값이 바뀌게 된다. 그러면 const OBJ는? 머지라고 생각할 것이다. prop1과 prop2라는 객체의 주소 값이 20이라고 가정해보자 그러면 OBJ는 20이라는 주소 값을 가지고 있다. 따라서 const는 값을 변경할 수 없는 특성으로 인해 20번이 아닌 다른 주소를 할당할 수 없게 되었다.

 

 

출처

드림코딩 by 엘리