[Javascript] ES6, let vs const, 호이스팅과 객체 리터럴, 디스트럭쳐링

 

기존 자바스크립트의 특징

1. 함수 레벨 스코프
   함수의 코드 블록만을 스코프로 인정하기 때문에 함수 외부에서 생성한 변수는 모두 전역 변수로 취급한다.
2. 변수 호이스팅
   변수를 선언하기 이전에 참조 가능하다.

위와 같은 특징은 변수의 유효 범위가 너무 커지기 때문에 에러의 발생 가능성을 높인다.

대부분의 프로그래밍 언어는 블록 레벨 스코프(if문, for문을 포함한 모든 코드 블록을 포함해 그 안에 작성된 모든 변수는 지역 변수로 생각된다. ) 인 반면 자바스크립트는 함수 레벨 스코프이기 때문에 함수 내에서 선언된 변수만 지역 변수에 해당한다.

var example = 123;

console.log(example);

{
  var example = 456;
}

console.log(example);

위 코드를 실행시키면 최 하단의 console.log(exapmle); 의 결과는 456이 나온다.

let & const

그러므로 var을 통해 생성한 모든 객체는 전역 객체이며 이는 앞서 말했듯 유효범위가 너무 크다. ES6에서 이를 해결하기 위해 나온 것이 let과 const이다.

• let : 변수의 재선언은 불가능하지만 재할당이 가능하다. (변수 선언)
• const : 변수의 재선언 및 재할당이 모두 불가능하다. (상수 선언)

let test = 'hello';
let test = 'world'; // 불가능
test = 'hello world'; // 가능

let test1;
test1 = 'can'; // 가능

const test = "hello";
const test = "world"; // 불가능
const = "hello world"; // 불가능

const test1 // 불가능, 무조건 값과 함께 선언해야 함

어디서 들었는지 let은 숫자 const는 문자 선언 가능하다고 잘못 알고 있어서 삽질했음.
const는 그러면 array도 불변인가? 하면 push(), pop() 기타 등등 다 됨 다만 array끼리 더해서 기존 array에 덮어쓰기는 불가능.

템플릿 리터럴

ES6에서 가장 편한 기능이라고 생각함. 문자열을 표현할 때 백틱( ` )을 사용하여 여러줄에 걸쳐서 문자열을 표현할 수 있음. 가독성이 굉장히 좋아진다.

특히 다음과 같은 용법으로 사용 가능하다.

const name = 'amber';
const age = '23';
// 기존 문법
console.log('My name is ' + name + ' and I am' + age + '.');
// ES6
console.log(`My name is ${name} and I am ${age}.`);

디스트럭쳐링

이것도 안 쓸 거 같긴 한데 일단 정리함

• 배열의 경우

// 기존 방법
var arr = [1, 2, 3];
var one   = arr[0];
var two   = arr[1];
var three = arr[2];

// ES6

const arr = [1, 2, 3];
const [one, two, three] = arr;

• ES6를 사용한 날짜 추출

const today = new Date();
const formattedDate = today.toISOString().substring(0, 10); const [year, month, day] = formattedDate.split(‘-‘);
console.log([year, month, day]); 

• 객체의 경우

// 기존 방법
var obj = { fruit: 'Banana', vege: 'Tomato' };

var fruit = obj.firstName;
var vege  = obj.lastName;

console.log(fruit, vege);

// ES6
const obj = { fruit: 'Banana', vege: 'Tomato' };
const { fruit, vege } = obj;
console.log(fruit, vege);