이번 포스트는 ES6에서 추가된 파라미터 기본값, Rest 파라미터, Spread 연산, Rest/Spread 프로퍼티에 대해

차례대로 알아보는 시간을 갖도록 하겠습니다. 

1. 파라미터 기본값 ( Default Parameter Value )

첫번째 파라미터 기본값은 코드로 보는게 편할것 같습니다. 

// ES5

function plus(x, y) {
    x = x || 0;   // 매개변수 x에 인수를 할당하지 않으면 기본값으로 0을 할당한다
    y = y || 0;   // 매개변수 x에 인수를 할당하지 않으면 기본값으로 0을 할당한다

    return x + y;
}

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


// ES6

function plus(x = 0, y = 0) {    // 파라미터 x, y에 인수를 할당하지 않으면 기본값으로 0을 할당한다
    return x + y 
}
console.log(plus());        // 0
console.log(plus(1, 2));    // 3

ES6 부터는 함수 내에서 파라미터 기본값을 할당할수 있게 되었습니다.

2. Rest 파리미터

Rest 파라미터(Rest Parameter)는 Spread연산자(...)를 사용하여 파라미터를 정의한 것을 말한다.

Rest 파라미터를 사용하면 인수의 리스트를 함수 내부 에서 배열로 전달 받는다.

// ES6

function prt(...rest) {                     // 인자가 몇개가 오던 배열로 받는다.
    for(let i = 0; i <= rest.length; i++) { // rest를 for문으로 출력해본다
        console.log(rest[i])                // 다음 포스트에서는 ES6에 추가된 for of문을 배우면 좀더 간결하고 쉽게 
    }                                       // 배열 데이터를 확인할수 있다.

    console.log(Array.isArray(rest))        // rest가 배열로 선언이 되어 true를 반환한다.
}

- Rest 파라미터 앞으로 다른 인자가 들어올수 있으며 값은 차례대로 할당된다. 

- Rest 파라미터는 가장 마지막에 선언되어야 한다. (그렇지 않으면 오류를 뱉는다.)

3. Spread 연산자

// ES6

function plus(...arr) {
    return arr
}

let a = plus(1,2,3,4,5)

console.log(a)             // [1, 2, 3, 4, 5]
console.log(...a)          // 1 2 3 4 5

화살표 함수

화살표 함수는 익명함수로만 사용할수 있다. 따라서 화살표 함수를 호출하기 위해선 함수 표현식을 사용한다.

5가 매개변수로 들어가서 5 * 5가 되어 반환되어서 출력된다.

콜백함수로 사용할수도 있다. 이경우 es5보다 함수표현식이 간결 해진다.

this

이것을 해결하기위해 that이나 bind()를 이용해서 문제점을 해결했습니다. 

하지만 화살표 함수는 자신의 this객체를 생성하지 않기 때문에 that이나 bind()를 사용하지 않아도

this를 사용할수 있습니다. 

function 키워드를 사용한 함수에서는 window객체를 반환하는 반면

화살표 함수를 이용한 곳은 foo객체를 반환하는것을 볼수 있다. 

화살표 함수를 사용하면 안되는 경우

1. 메소드 

this는 window객체를 가르키고 있기 때문에 undefined가 출력된다.

기존에 function 키워드를 사용했다면 this는 person객체를 가르키기 때문에 name이 정상적으로 출력된다.

또는 ES6의 축약 메소드 표현을 사용하는 방법도 있다.

2. 생성자 함수

3. addEventListener

따라서 addEventListener 함수의 콜백 함수 내에서 this를 사용하는 경우,

function 키워드로 정의한 일반 함수를 사용하여야 한다.

일반 함수로 정의된 addEventListener 함수의 콜백 함수 내부의 this는 이벤트 리스너에 바인딩된 요소를 가리킨다.

참조 사이트 :  https://poiemaweb.com/es6-arrow-function

ES6 기초 문법 세가지

1. const

const NUM = 100;
console.log(NUM); /* 100 */
NUM = 1;  /* Assignment to constant variable. ( 상수 변수라 값을 할당할 수 없다.) */
console.log(NUM); /* 100 */

2. let

console.log(num); /* undefined */

var num;

console.log(num); /* num is not defined */

let num;

3. Template literals ``(백틱) 

세번째로 백틱 ``입니다.

기존에 자바스크립트에서는 문자열을 표시할때  ' 혹은 ''을 사용했습니다.

ES6에서는 ``이 추가되어 아주 편리해 젔습니다. 

var content = '';
content = '<tr>';
content += '<td>' + realdate + '</td>';
content += '<td>' + price + '</td>';
content += '<td>' + pri_ch + '</td>';
content += '<td>' + pri_chp + '</td>';

기존에 이런식으로 여러줄로 표현되거나 한줄에 우겨넣으면 아주 복잡했던 코드를 간단하게 

let content = '';
content = `<tr>
<td> ${realdate} </td>
<td> ${price}    </td>
<td> ${pri_ch}   </td>
<td> ${pri_chp}  </td>`;

`` 하나로 표현할수 있다. 변수는 ${}안에 넣어주면 됩니다. 

이상으로 ES6문법 세가지를 알아봤습니다. 

추가적으로 어느 블로그를 보니 var와 let 을 브라우저 종류별로 테스트 한 글을 읽었는데

얼마전까지는 var가 let보다 압도적으로 빨랐지만 현재는 비슷한 수준까지 올라왔다고 한다.

하지만 섞어쓰는것은 제일느리고 var든 let이든 한가지를 골라서 쓰는게 가장 효율적이라고 한다. 

"VanillaJs"란 ? 

 자바스크립트의 수 많은 프레임웍, 라이브러리를 사용하지 않고 순수하게 javascript만 사용하는것을 일컫는다.

요즘 수많은 개발자들이 javascript의 무거운 라이브러리등을 버리고 작고 가볍고 빠른 VanillaJs를 선택하고 있다. 

바닐라JS 는 공식사이트를 통해 다운 받을수 있다. 

실제로 사이트를 통해 VanillaJs를 다운 받으면 파일 사이즈가 0kb이다. 

바닐라JS는 실제로 사용하기 위해선 별도의 파일이 필요 없다는 의미이다. 

그 이유는 이미 우리가 사용하는 크롬, 사파리, 익스플로 등 브라우저에는 이미 바닐라JS가 자체적으로 내장이 되어 있기 때문이다.

바닐라JS 공식 사이트에서는 바닐라JS가 마치 프레임워크, 라이브러리처럼 가벼운것은 물론이고 빠르고 호환성이 좋다라는 문구들이 써있는데

이말이 바닐라JS가 프레임워크나 라이브러리로 오해 할 수 있지만 JQuery같은 라이브러리가 전혀 포함되있지 않아서 

훨씬더 빠르다는 말로 받아들이면 될 것 같다. 

국내에서는 아직도 많은 개발자들이 JQuery 없이는 개발하기 힘들어 하는 경향이 있는데 

앞으로 다음 포스팅부터는 과연 JQuery없이 어떻게 개발하며 JQuery없이도 각종 기능들을 구현할수 있게끔 하는데 노력해볼것이다.