일안하고블로그

[ ES6 ] 변수선언(const/let)사용과 스코프(scope) 본문

JavaScript/ES6

[ ES6 ] 변수선언(const/let)사용과 스코프(scope)

대한93 2018. 7. 22. 18:24



평소 개발을 할때 ES6를 사용 할 수 있는 환경이 되어서 ES6 문법을 더 효율적으로 사용을 하려고 하지만, 습관이 되어 버린 문법 습관과 제이쿼리를 사용하는 환경으로 많이 사용 하지 않게 됩니다. 그래서 조금더 왜 더 ES6가 효율적이고 편한지 알기 위해서 정리를 해보려고 합니다. 


가장먼저, 변수선언에 대해서 정리를 해보겠습니다.  기존 자바스크립트와 다른 ES6의 Keyword는

var

const

let

scope

Hoisting

첫번째 var은 자바스크립트에서 쓰는 변수 선언 방법입니다. 그리고 constlet은 ES6에서 사용하는 변수 선언 입니다. 각각의 변수선언은 차이가 있는데 차이점과 예시를 통해서 설명을 하겠습니다.


var예제



예제에서 확인하셔야할 것은 3가지입니다. 


1. 같은 이름의 변수 선언이 여러번 됨.

2. 호출한 시점에서 변수가 선언 되어 있지 않다고 하더라도 오류가 아닌 undefined를 뱉어 냅니다. 

3.유효범위에서 같은이름의 변수선언을 해도 유효 범위 이후에는 기존 값을 가지고 있어야하지만 블록 범위에서 선언한 값을 가지고 있습니다.(scope)


다음과 같은 단점을 가지고 있는 자바스크립트 var을 위해 let과 const가 등장했습니다. 

let 예제 부터 살표보도록 하겠습니다. 


let예제



let예제도 var과 같은 조건으로 구성해 보았습니다. 


1. 같은 이름의 변수를 여러번 선언 하면 에러가 발생합니다. 

2. 호출한 시점에서 변수가 선언 되어 있지않으면 에러가 발생합니다. 

3. 블록 범위 안에서 let으로 호출하면 블록 범위에서만 적용 됩니다. 


let과 const 의 차이점



const는 상수 선언입니다. const는 원시형 데이터에서 상수로 동작합니다. 

따라서, const로 선언된 값을 재선언 하면 에러가 발생합니다. 

또한 초기값을 설정하지 않아도 에러가 발생합니다. 


원시형 : string , number , boolean , null , undefinded 


따라서 단순 데이터 값을 가지고 있는경우 let으로 변수선언을 하고 , 상수 선언시에 const로 선언합니다. 

참조형 선언의 경우 const로 선언 하는 것이 더 적합합니다.  const로 선언 하더라도 조작가능합니다. 


참조형 : array , object, function


'JavaScript > ES6' 카테고리의 다른 글

[ ES6 ] 스프레드 연산자spread / ...연산자  (1) 2018.07.24
Comments