이 글은 인프런의 '모던 자바스크립트 개발을 위한 ES6 강좌'의 수강 내용을 바탕으로 정리한 내용입니다.
let
var name = "global var";
function home() {
var homevar = "homevar";
for(var i=0; i<100;i++){
}
console.log(i);
}
home();밖에 있는 name 은 전역변수고, homevar는 지역변수이다. es6 이전에는 함수 단위의 scope만 존재했다. 따라서 function 안에 있는 지역변수를 먼저 찾고 그게 없다면 전역변수로 scope change 를 하게 된다. 왜? ES6 이전 문법은 함수단위의 스코프만 지원하기 때문이다. 따라서 위 코드의 결과는 100이 나온다.
하지만 let에서는 블록단위의 scope가 지원된다.
var name = "global var";
function home() {
var homevar = "homevar";
for(let i=0; i<100;i++){
// console.log(i);
}
if(true) {
let myif = "myif";
}
console.log(myif);
}
home();console.log(myif); 는 출력되지 않는다. if 문에 존재하는 블록 안에서 출력을 처리하지 않았기 때문이다.
결론: let을 사용할 때는 블록 단위 처리가 가능하기 때문에 용이하다. 위의 예시처럼 for문 단위의 블록, if문 단위의 블록 형식으로 말이다.
let & closure
우선 클로저가 무엇인가?
클로저는 내부함수가 외부함수의 맥락에 접근할 수 있는 것을 가르킨다. 내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있다. 이러한 메커니즘을 클로저라고 한다. 즉 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다. (출처: 생활코딩)
블록 스코프 존재, 지역변수화 시킨 것과 비슷하다. let을 사용하면 쉽게 이런 문제를 해결할 수 있다.
const
변경이 필요 없는 값이 있을 수도 있다. 의도하지 않게 값이 변경될 수 있는데..보통 대문자 표기법을 이용하여 상수야, 건들지마! 라고 표기했다. 하지만 지금은 const가 생겼다. 변경을 금지시키는 것! array 도 마찬가지로 적용가능하다.
function home() {
var homename = "my house";
const homename = "my house";
// var HOME_NAME
homename = "your house";
console.log(homename);
}
home();- 최악은 var, let, const 를 동시에 쓰는 것이다.
- const를 기본으로 사용하고, 변경이 될 수 있는 변수는 let을 사용한다.
- var는 사용하지 않는다.
const + immutable array
const 는 한번 선언된 값을 재할당 할 수 없다고 했다.
function home() {
const list = ["apple", "orange", "watermelon"];
list.push("banana");
console.log(list);
}
home();이 결과는?.. 바나나가 잘 추가되었다.
[ 'apple', 'orange', 'watermelon', 'banana' ]const 를 쓴다고 해서 수정할 수 없음을 의미하는 것은 아니다. const를 사용하더라도 배열과 오브젝트의 값을 변경하는 것은 가능하다.
immutable array를 어떻게 만들지?
immutable이란?
- 변경불가 객체
- 상태를 바꿀 수 없는 객체
- 최초 생성(인스턴스화) 이후로는 값 변경 불가
카피본? 에디터에서 글을 쓸 때 계속 임시저장을 하게 되는데..뒤로가기, 앞으로 가기 를 눌러서 어떤 값을 되돌리고 싶을 때 그때그때마다 데이터에 저장된 값을 보여줘야 할 때가 있다. array와 같은 경우에는 참조가 계속 바뀌니까 하나의 값이 계속 바뀌게 되는 것이다. 그렇다 보니 전의 값이 어떤 것이였는지 기억할 수 없다. 그래서 immutable array가 있으면 꽤 유용하게 사용할 수 있다.
const list = ["apple", "orange", "watermelon"];
list2 = [].concat(list, "banana")
console.log(list,list2)
console.log(list === list2)결과
[ 'apple', 'orange', 'watermelon' ]
[ 'apple', 'orange', 'watermelon', 'banana' ]
false두개의 배열은 전혀 다른 값이다. 불변의 배열를 만드는 것인데, 리스트를 그대로 보관하고 있는 셈이다. 새로운 배열을 계속 만드는..
리액트를 사용할때 state 값이 바뀔 때가 있다. 리덕스 리듀서에서 새로운 객체를 계속 만들어서 state값을 바꿔서 반환하게 되는데 이때 immutable array를 많이 사용한다.
- immutable.js : 원본은 그대로 두고 복사본을 여러개 만들어주는 것 제공
- spread operator es6
