ECMAScript6

web/jQuery 2016.06.06 23:26

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를 사용하시면 하위 버전으로 컨버팅 됩니다!!


WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret