[ES6]자바스크립트 ES6 1편

ES6 자바스크립트

---

자바스크립트도 시대가 변하면서 새로운 버전을 소개하고 있는데 이번에는 2009년에 5.0이 발표되고 2015년까지 EcmaScript6라고 공식 표준이된 Es6에 대해 공부해보려고 한다. 

let, const

자바 스크립트에서는 원래 var라는 변수 선언 문이 있었다. 하지만 es6에서 부터는 let을 사용하고 있고 대부분의 기능은 같지만 조금 다른점이 있는데 이것을 소개시켜 보겠다. 그리고 원래는 컴파일 타임 상수를 선언하는 문이 없었는데 es6부터는 지원하기 시작했다. 

var x = 21;
function f(){
         console.log(x)//21
         x = 31;
        if(true){
             x= 71;
            console.log(x);//71
        }
    console.log(x); //71
}

function f2(){
    let x = 31;
    if(true){
        let x= 71;
        console.log(x);//71
    }
    console.log(x);//31
}
function f3(){
const xx = "don't change";
xx = "hahaha i changed this value"; //error 
}
f()
f2()

f3()

var는 심지어 함수 밖 블록에 있는 변수까지도 하나로 일치할 수 있다. 전역 변수 같이 사용할 수 있다.  let은 현재의 블록과 내부 블록까지 인식한다. 위의 예제를 보면  위의 말이 정확히 무슨말인지 이해가 갈 것이다. 

Arrows

에로우 함수는 function대신 사용할 수 있다는 장점이 있지만 상위 변수? 스코프를 가리키기도 하고 현재 상태를 나타내기도 합니다. 

var arr1 = [1,2,3,4,5];
//es6버전
arr1.map(v=>v*2);//2,4,6,8,10
arr1.map((v,i) => v+i);//i는 0부터 v개수까지 2,5,8,11,14

//예전 버전
arr1.map(funtion(v){ v*2})// 이런식으로 사용했는데 arrow를 사용함 으로써 더 간단하게 표현할 수 있음을 알 수 있다.

let array = ["abc", "bcd", "cde"];
array.forEach(v = >
console.log(v)) // abc bcd cde가 차례대로 출력한다. 

let jsonValue = { firstPerson :"Jason",
secondPerson:"plas, team",
knowPeople(){
    this.secondPerson.forEach(v=>
console.log(this.firstPerson+" knows "+secondPerson);
)//Jason knows plas, team v는 this.second.Person을 가리키고 있다. 
    }
}

class

원래의 자바스크립트에서는 클래스와 같은 기능을 프로토타입을 활용해서 표현하곤 했다. 하지만 es6부터는 class를 지원하기 시작했다. 다른 언어의 클래스와 비슷하게 사용할 수 있으면  class가 생겨서 더 좋아진 것 같다. 

class bigBrother{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    myAge(){
        return [this.name, this.age];
    }
}

class youngerBrother extends bigBrother{

    constructor(name, age){
         super("이승훈", 27);
        this.brName = "", this.brAge = 0;
         [this.brName, this.brAge] =  super.myAge();
         this.name = name;
         this.age = age;
     }
     myAge(){
         console.log('형의 이름은' +this.brName+ "이구 저의 이름은 "+this.name+"입니다.\n" +
             '형의 나이는'+ this.brAge+"이구요. 저의 나이는 " +this.age+" 입니다."+
             '저희 둘의 나이 차이는 ' + (this.brAge - this.age).toString() +'입니다.')
     }
}

let myInfo = new youngerBrother("이상훈", 22);
myInfo.myAge();

결과

Template Strings 

es6부터는 스트링을 조금 더 편하게 표현할 수 있게 만들어 놓았다. 

var name = "Bob", time = "today";
console.log(`Hello my name is ${name}, how are you  ${time}?`);

default, rest, spread 

default 

함수나 클래스의 생성자 같은데 값을 받을 때 디폴트 값으로 미리 정의해놓는 것을 의미한다. 

function f(name, age=22) {
    console.log(name + "   "+ age);
}

f("이상훈"); // 이상훈 22가 자동으로 출력된다. 함수를 호출할 때 따로 넣어주지 않아도 알아서 호출해준다. 

rest 

입력하는 값에 비해 받는 변수 수가 부족하면 ...을 통해 다 받을 수 있다.

function f2(name, ...age){
    console.log(name+ " "+ age);
}

f2("hi", "22"," sanghoon"); //hi 22 sanghoon 받는 변수가 2 입력한 데이터는 세개이지만 다표현 할 수 있다. 

spread

한개의 변수를 입력하지만 받는 변수들의 수만 큼 퍼트려서 입력시키는 방법이다. ㅇ

function f3(name, age, height) {
    console.log(name, age, height);
}
let Info = ["이상훈", "22", 180];
f3(...Info);