ES6 문법의 특징

간단하게 알아보는 ES6 문법의 특징들!

변수 선언

let과 const로 선언을 할 시 block으로 scope가 형성되며, 선언된 변수는 선언된 block을 벗어나면 접근하기 어렵다. 특히 const 같은 경우 변수의 재할당이 불가능하다.

 

화살표 함수

//화살표 함수 선언
const 화살표함수 = (인자) => { ~여기다 내용, 중괄호 없애면 return 도 생략가능}

//생략하면
const 화살표함수 = 인자 => 함수내용

 

This

ES5에서는 함수 실행시에는 전역(window) 객체를 가리키고, 메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다. 하지만 ES6에서는 자신을 둘러싼 환경을 가르키는 내용이 추가된다. 

const Test = {
     beef : '소고기',   
     chicken : '닭고기' ,
     info() {
          console.log(this)
          console.log(this.beef , this.chicken)
 
          innerInfo = () =>{
              console.log(this)
              return this.beef + ":" + this.chicken
          }
          return innerInfo()
     }
}

콘솔 결과

탬플릿 문자열

문자열을 더하는 코드 대신, 백틱과 ${}을 통해서 원하는 문자열을 만들 수 있다.

let name = "핫도비";
let power = 50;
let school = "호그와트";
let msg = `안녕하세요 저는 ${name}입니다 제 마법력은 ${power}이며 "${school}"을 졸업했습니다.`;

 

Class

class는 사실 특별한 함수입니다. (MDN 피셜) class를 통해서 프로토타입 기반 상속하는 관계를 표현할 수 있게 되었습니다.

class Dobby {
    constructor(cookie = "choco"){
        this.cookie = cookie;
    }

     magiFunc(){
        return cookie + cookie;
    }
}

class Hotdobby extends Dobby{
    constructor(cookie , candy = "apple"){
        super(cookie)
        this.candy = candy;
    }

    doubleMagic(){
        return cookie + candy;
    }
}

 

구조분해할당

한줄의 코드로 객체를 분해하여 각 변수에 담아주는 문법.

 

const test = ["kiwi", "apple", "pepper"];

const [one, two, three] = test;

console.log(one);
// kiwi
console.log(two);
// apple
console.log(three);
// pepper