[2019.03.05] ECMA Script6 기초문법

우리가 평소 사용하던 자바스크립트 방식은 ECMA5의 방식이라고 한다.

Jquery라는 훌륭한 라이브러리가 나오면서, 오직 자바스크립트만으로는 처리하기 힘든 일들을(큰 예로는 DOM 접근 및 처리) 쉽게 처리할 수 있도록 해주었다.

그러나 Jquery는 자바스크립트의 표준이 아니다.

우리가 지금껏 사용한 표준인 ECMA5만이 오직 표준이였고, 그 이후에 나온 표준이 ECMAScript6 (ES6)이다.

앞으로 자바스크립트를 다루면서 더욱 표준화된 방식으로 코딩을 하고자 하여,  ECMA6 방식에 대한 정리를 어느정도 해봤다.

# var를 대신하는 키워드 let과 const

기존은 함수 스코프 변수인 var는, 전역 범위로 스크립트 내 어디서나 참조가 가능하다.

var runFunction = function(){
    if(true){
        var i = 5;
    }
    console.log(i); // <- 5 
}

위 코드와 같이 보다시피, if문 안에서 선언한 변수 i가 if문 밖에서 사용이 가능하다. 해당 함수 내에서 변수를 선언한다면, 어떤 스코프에서 선언해도 그 함수 내애서라면 어디든 사용이 가능하다.

반면에, let은 이러한 전역 스코프 방식이 아니고, 선언한 스코프 내에서만 사용이 가능하다.

var runFunction = function(){
    if(true){
        let i = 5;
    }
    console.log(i); // <- error
}

i라는 변수가 if문 내에서 선언되었기 때문에, if문이 빠져나가는 순간, 해당 i변수는 사용할 수 없다.

사실, 코딩하는데 let처럼 되야 정상적인 방식이다..ㅇ_ㅇ;;

다른 언어들을 코딩을 많이 해본 사람들은 바로 느낄 것이다.. 자바스크립트 외 다른 언어에서는 var처럼 저렇게 선언 후 스코프 범위를 벗어났는데 사용할 수 있다는 것은 상상도 할 수 없는 일이다..ㅋㅋㅋ 저건 자바스크립트가 너무 관대한 것이다.

하지만, 드디어 이번 ES6 표준에서는 let이라는 변수를 사용하면서 자기 스코프를 벗어나면 사용할 수 없는, 즉 원래 정상적인 방식의 변수를 사용할 수 있다.!

그리고 두번째로는 const!

var runFunction = function(){
    const i = 5;
 
    i = 10; // error
}

const는 보기와 같이 상수다. var에서는 상수라는 개념이 없어서, 상수 변수가 필요하면 var로 선언하되 변수명을 'ADD_MAX' 처럼 대문자를 사용하는 방식으로 했다. 그러나 이번 ECMA6에서는 상수 개념이 표준으로 생겨서 사용하면 된다.

# 새로운 함수 선언 방식 'arrow function'

함수를 선언하는 방식이 하나 생겼다.

기존 함수 선언방식

var addFunction = function(a, b){
    return a + b;
}

ECMA script6의 새로운 함수 선언 방식

var addFunction = (a, b) => { // 이렇게 
    return a + b;
}
 
let addFunction = (a, b) => a + b; // 이렇게도 사용 가능

저렇게 function 이라는 키워드를 없애고 매개변수 선언괄호와 스코프 사이에 => 화살표를 추가했다.

그리고 함수 내 처리가 한줄밖에 없으면, for, if처럼 중괄호를 생략해도 된다.

[1, 2, 3, 4, 5].forEach((element)=>{
    console.log(element);
});
 
[1, 2, 3, 4, 5].reduce((acc, ele, index, array) => {
    return acc + ele
}, 10);

arrow function 사용 예제..ㅎㅎ

# ECMA Script 6에서의 arguments

ECMA Script6에서는 arguments의 개념이 없다!! (난 사실 arguments라는 개념도 코드스테이츠에서 알게 되었다..ㅋㅋㅋ)

그렇다고 매개변수를 배열 형식으로 받는 방법이 사라진 것은 아니니.. 바로 '...' (점 3개)를 이용해서 사용하면, 매개변수들을 배열 형태로 받아올 수 있다.

const array = (...elements) => {
    return elements; // <- [1, 2, 3]
};
 
array(1, 2, 3);

매개변수 elements 앞에 ...를 붙히면 저렇게 배열 형식으로 받아올 수 있다. ...가 배열로 사용하겠다는 키워드가 된다.

# 매개변수에 기본인자 설정이 가능

오호? 함수 호출 시 매개변수에 값이 없을 때 초기화가 가능한건 c#에서 잠깐 봤었던 것 같은데, 이번 자바스크립트 표준에서 매개변수 초기화가 가능하게 되었다.

const personAge = (name, age = 10) => {
    return name + ',' + age;
};
 
personAge('inyong', 20) // <- 'inyong,20'
 
personAge('inyong') // <- 'inyong,10'

매개변수에 값이 undefined이면 초기화를 정해준 값으로 들어가게 된다.

# 여러개의 object 병합

Object.assign(
    {},
    {name: 'inyong'},
    {age: 20, address: null}
);
 
// {name: 'inyong', age: 20, address: null}

각 각의 object를 하나의 object로 병합시킬 수 있다.

# ECMA Script6의 붕어빵 틀, Class

클래스...!! 내게 친숙한 클래스가 이번 표준에서 나오게 되었다아..!! 

오오.. 다른 객체지향 언어와 같이 클래스 사용을 자바스크립트에서 사용하려면, 약간 다른 방식이 필요 했었다.

function Person(){
    this.name;
    this.age;
}
Person.prototype.getName = function(){
    return this.name;
}
 
var inyong = new Person();

위와 같이 해당 클래스로 사용하려는 함수를 하나 생성하고, 거기에 prototype이라는 키워드를 이용하여 하나하나 기능을 이용할 수 있도록 추가를 해줘야했다.

이번 표준에서는 그럴필요 없다!

 
class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    getName(){
        return this.name;
    }
}
 
var inyong = new Person('inyong', 20);
 
console.log(inyong.getName()); // <- 'inyong'

바로 이렇게 class키워드로 스코프로 생성하면 된다.  constructor라는 키워드는 생성자이다. 이것만 지켜주면 된다.

코드 상 class 안의 getName은 class내에 사용할 메소드를 생성해 준 것이다!