[JavaScript #3] ES6 변수 선언

■ ES6 변수 선언

---

기존 ES6 이전에서는 var를 통해 변수를 선언하여 사용했습니다.

하지만 최신 자바스크립트라 불리는 ES6부터는 다양한 방법이 추가되었는데요.

그 추가된 방법에 대해서 간단하게 정리해보겠습니다.

● const

const는 값을 변경할 수 없는 변수입니다.

ES6에서는 const를 도입하여 값을 재설정하는 것이 불가능하도록 하였습니다.

만약 이를 아래와 같이 시도한다면 콘솔오류가 발생합니다.

const isChecked = true; isChecked = false;

● let

let을 통해 함수 레벨과 블록 레벨의 렉시컬 스코프 규칙을 지원합니다.

즉 if문과 같은 {} 블록 안에서 let은 변수 영역을 그 블록 안으로 한정시킵니다.

즉 블록 밖의 값에 영향을 끼치지 않아 글로벌 변수를 보호할 수 있습니다.

기존 var과 비교하여 간단한 예시를 확인해보겠습니다.

var number = 1; if (number) {   var number = 2;   console.log(number); } console.log(number);

var number = 1; if (number) {   let number = 2;   console.log(number); } console.log(number);

왼쪽 코드가 기존 var를 사용한 예시코드이며, 오른쪽 코드는 let을 사용했습니다.

결과는 var만 사용한 왼쪽코드는 모두 2, 2가 console에 출력이 됩니다.

반면에 let을 사용한 오른쪽 코드는 2, 1이 console에 출력됩니다.

즉 if문 내부의 let number변수는 그 영역이 블록 안에 한정되었기 때문에 블록 밖의

변수까지 영향을 끼치지 않는 것입니다.

● 템플릿 문자열

템플릿 문자열은 문자열 연결 대신 사용이 가능하며, 문자열 중간에 다른 변수의 삽입 

또한 가능하게 합니다. 기존에는 '+' 연산자를 아래와 같이 사용했습니다.

var address = mainAddress +", 상세 : "+ subAddress +" : "+ postCode;

위와 같이 '+'를 통해 변수와 문자열을 이어붙여주었죠.

템플릿 문자열은 '${}'을 사용하여 어떤 자바스크립트의 식이라도 넣을 수 있습니다.

'${}' 여기에 변수 또한 넣을 수 있으므로 아래와 같이 사용이 가능합니다.

var address = `${mainAddress}, 상세 : ${subAddress} : ${postCode}`;

하나의 문자열만 사용하면 되니 사용하기에 더욱 편리합니다.

● Default Parameter

함수 명세에서 디폴트 파라미터를 추가할 수 있습니다.

기존의 C나 JAVA와 같은 인자 형태와 비슷합니다. 예제 코드보면 바로 이해가 되실거에요

function setAddress(mainAddress="서울시", subAddress="강남구") {     console.log('주소: ${mainAddress} ${subAddress}'); }

setAddress함수를 호출할 때 mainAddress와 subAddress의 인자를 지정하지 않아도

위에서 선언한 디폴트 값을 사용해 setAddress함수가 정상적으로 실행됩니다.

---

ES6에 추가된 몇 개의 변수 선언 방법을 정리했습니다.

기존과 비교하여 매우 유용한 기능이 더욱 추가된 것 같아요.

어려운 내용도 크게 없는 것 같아 잘 배워 사용하면 좋을 것 같습니다.

그럼 이 포스팅은 마치겠습니다. 감사합니다.