ECMAScript6

1. let / const (호이스팅 때문에 탄생)

호이스팅 : js의 경우 변수 선언일때 해당 함수의 가장 첫번째에 자동으로 var 변수; 로 선언된후 해당 라인에서 초기화가 된다. 하지만 만일 스코프가 다른 변수가 있을시엔?! 함수이름과 변수 이름이 같을시엔?! 과 같이 문제점이 발생한다. 

이를 위해 ecma6에서 블록안에서만 / 상수 등이 탄생 하여 스코프에 대한 영향력을 줄였음.

아래와 같이 소스가 된다면 

var snack = 'Meow Mix';

function getFood(food) {
    if (food) {
        var snack = 'Friskies';

        return snack;
    }
    return snack;
}

console.log(getFood(false)); // undefined

아래 소스처럼 자동으로 변환됨 (가장 위로 변수 선언이 바뀌게됨)

var snack = 'Meow Mix';

function getFood(food) {
    var snack;
    if (food) {
        snack = 'Friskies';

        return snack;
    }
    return snack;
}

console.log(getFood(false)); // undefined

이를 위해 let키워드 사용

let snack = 'Meow Mix';

function getFood(food) {
    if (food) {
        let snack = 'Friskies';
        return snack;
    }
    return snack;
}

getFood(false); // 'Meow Mix'

---

2. IIFE (즉시함수 호출 표현식)

기존엔 자바스크립트엔 스코프가 함수스코프와 글로벌 스코프 두가지 밖에 없었습니다. 

다른 스코프가 있는 언어와 달리 아래의 소스에선 10이 출력됩니다. (블록 스코프가 존재하지 않습니다.)

{
    var a = 10;
    
}

console.log(a);

그래서 스코프를 위해서 따로 함수를 쓰기도 했었습니다.  아래와 같이 임의로 스코프를 주기위해 함수를 사용할수 있습니다.

function test(){
    var a = 10;

}

console.log(a);

그래서 기존엔 함수 선언시에도 ()안에 function()이 있어야 했습니다. ()는 IIFE죠.

(function () {

    }
)()

ecma6에선 left을 통해서 블록 스코프를 지정하게 됩니다. 

{
    let a = 10;

}

console.log(a);

3. Arrow Functions

 - map은 기존의 each와 같지만 function을 안에서 돌린다고 생각하면 됨

기존엔 안에 간단한 함수에도 function(){}를 선언해 줘야 했지만 => 로 끝.

var m = [1, 2, 3, 4, 5].map(function(elem){
    return elem*2;
});

console.log(m);

애로우 함수 적용 예

var m = [1, 2, 3, 4, 5].map(elem => elem*2 );

console.log(m);

4. Template Literals

var name = 'Tiger';
var age = 13;

console.log('My cat is named ' + name + ' and is ' + age + ' years old.');

string에 ``으로 구분으로 ${}가 변수로 치환!! (이건 너무 좋음)

const name = 'Tiger';
const age = 13;

console.log(`My cat is named ${name} and is ${age} years old.`);

5. Destructuring

let [a, b, c, d] = [1, 2, 3, 4];

console.log(a); // 1
console.log(b); // 2

리스트의 리턴값을 각각 지정해서 넣을수 있음 (만일 리턴 갯수가 같지 않으면 해당 리턴값은 무시됨)

6. Default Parameters

function addTwoNumbers(x=0, y=0) {
    return x + y;
}

console.log(addTwoNumbers()); //0
console.log(addTwoNumbers(1, 2)); //3

7. Rest Parameters

리스트를 ...으로 해당 원소들의 리스트로 반환

var list1 = [1, 2, 3, 4];
var list2 = [5, 6, 7];
var list3 = [list1, list2];
var list4 = [...list1, ...list2];

console.log(list3); //[[1, 2, 3, 4], [5, 6, 7]]
console.log(list4); //[1, 2, 3, 4, 5, 6, 7]

8. Classes

드디어 상속 표현인 extends 등장! 

기존까진 prototype으로 함수들을 선언해서 연결하고 상속시엔 prototype.constructor 로 다시 상위 클래스를 연결해서 사용하는 뻘짓을..

가독성이 심히 많이 정말 떨어졌었지만 

문법이 상당히 깔끔해 졌습니다. 

extends로 상위 클래스를 지정해주고 클래스 안의 함수들은 따로 function을 선언 하지 않아도 됩니다. 

class Person {
    constructor(name, age, gender) {
        this.name   = name;
        this.age    = age;
        this.gender = gender;
    }

    incrementAge() {
        this.age += 1;
    }
}

class Personal extends Person {
    constructor(name, age, gender, occupation, hobby) {
        super(name, age, gender);
        this.occupation = occupation;
        this.hobby = hobby;
    }

    incrementAge() {
        super.incrementAge();
        this.age += 20;
        console.log(this.age);
    }
}



var p1 = new Personal("uiandwe", 20, "woman", "!", "@");

p.incrementAge();

ECMAScript6를 사용하기 위해선 babel를 사용하시면 하위 버전으로 컨버팅 됩니다!!