JS ES6 정리 : 펼침연산자, 화살표함수, const/let 그리고 호이스팅

1. const, let

const와 let은 왜 나왔을까? 

바로 이전에 쓰던 var의 한계를 보완하기 위해.

 

그렇다면 var는 어떤 한계가 있었을까? 

 

 1) 아래에서 선언한 것을 위에서 받아들여버림! :hoisting 때문! 

console.log(a); //undefined
var a= 1;
console.log(a); //1

코드를 실행하기 전, 선언한 변수/함수를 먼저 실행(인식)하는 것을 hoisting이라고 한다. (hoist : 끌어올리다) 이 hoisting 때문에 위와 같은 현상이 발생한다. 이는 JavaScript의 특징이다. java나 C는 첫 번째 console.log(a); 에서 에러가 났어야 하는데, 호이스팅하면서 변수 선언 및 초기화를 진행해 undefined가 된 것.

 

  2) 전역변수와 지역변수의 경계가 모호

var는 함수 안에서 선언된 변수만 지역변수고, 나머지 변수는 전부 전역변수로 호이스팅해버린다는 문제가 있다. 

for(var i= 0; i <5; i++){
   console.log(i);
}

console.log(i); //5

 

3) 변수 중복 선언

var a = 1;
console.log(a); //1
var a = 2;
console.log(a); //2

이러한 문제 때문에 let이 등장했다. 

 

let을 활용할 경우

1번 문제 : 초기화 전에 a에 접근할 수 없는 ReferenceError를 뱉어냄

2번 문제 : i is not defined

3번 문제 : a has already declared 

이렇게 에러메시지를 내뱉음으로써 위의 문제가 해결된다. 

 

let과 const도 호이스팅이 되지만 Temporal Death Zone을 만들었다. a 호이스팅이 됐지만, a 선언문이 나오기 전까지 접근할 수 있다. 일시적으로 사각지대를 만드는 셈이다. 

 

var, const, let의 특징을 정리하면 다음과 같다. 

	범위	변수 중복 선언	재할당	선언과 초기화
var	함수 내 선언된 변수만 블록, 그외는 전역	가능	가능	따로 가능
const	블록(중괄호)	불가능	불가능	무조건 함께
let	블록(중괄호)	불가능	가능	따로 가능

2. 화살표함수

기존 표현방법
 1) 함수선언식

  function add(a,b){};

  함수선언식으로 선언할 경우, 호이스팅 시 함수 전체가 따라올라간다. 
  함수가 선언되기 전에 함수를 실행해버리면 함수가 호이스팅될거고, 함수 내용이 
  모두 호이스팅되어 return 까지 스무스하게 나옴

  ex. add(a,b); function add(a,b){};
 2) 함수표현식

 const minus = function(a,b){};

  함수표현식으로 선언할 경우, 선언은 됐는데 함수가 아니라는 에러가 발생. 함수 전체가 아니라 변수만 호이스팅됨.
  ex. minus(a,b); const minus = function(a,b){};

화살표함수

  const minus2 =(a, b) => {
    return a-b;
  }

 

3. 비구조할당

변수 선언을 쉽게 하는 문법.
객체, 배열에서 활용 가능. 

const person1 = {
  name: "amy",
  age: 19,
  major: "computer",
};

const { name, age, major } = person1;

console.log(name); // amy

4. default parameter

  선언해놓은 함수에 인자가 들어오지 않을 경우 , 디폴트 파라미터 지정 가능

const minus2 = (a, b = 5) => {
  //b가 들어오지 않았을 때 5를 디폴트로
  return a - b;
};

5. 펼침연산자...

객체, 배열 안의 값을 가져오는 연산자. 실무에서도 너무 잘 사용하고 이씀. 

const person1 = {
  name: "amy",
  age: 19,
  major: "computer",
};

const locationInfo = {
  country: "Korea",
  city: "Seoul",
};
const person2 = { ...person1, age: 24, ...locationInfo}; 
console.log();
/*age: 24
city: "Seoul"
country: "Korea"
major: "computer"
name: "amy"*/