이번 포스트는 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

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이든 한가지를 골라서 쓰는게 가장 효율적이라고 한다. 

1. 자바스크립트 전역객체의 개념

 -전역 객체(Global Object)

 -node.js 에서는 global

 -web에서는 window

2. 전역 객체의 하위 객체 종류

 ... 등 확인법은 크롬디버거를 통해 확인 하면 편하다. 

디버거 실행후 콘솔창에서 window입력

3. 전역 객체의 하위 메소드 종류

4. 예시

function func() {
alert(" Hello World !");
}

현제 내가 이포스팅에 func함수를 심어 놓았다.

확인하는법은 간단하다. 

크롬에서 F12를 누르고 크롬디버거창이 켜지면

- console 창을 클릭한다.

- func()를 입력해본다.

- window.func()를 입력해본다.

두 명령 모두 같은 함수를 실행하는걸 볼수있다. 

5. 결론

 전역객체는 간단하게 생각해서 자바스크립트 최상단에 위치하는 놈이며

 그보다 위는 없고 내가 무슨코딩을 하던 자기 아래 두려하는 지배적인 놈이다. 

 내가 어떤 스코프안에 들어가있던 window를 호출하면 최상위에 있는것들을 가져다 쓸수있는 장점도 있는것 같다.

 <이 결론은 오로지 1년차 개발자인 저의 개인적인 의견이며 사실과 다를수있습니다!!>

자바스크립트에서 현재 시간을 가져와서 매초마다 변경되는 

실시간 시계를 만들어 보겠습니다. 

아주 간단합니다 Date Object를 가져와서 시간 분 초를 뽑고 

값을 넣어주면 간단하게 완성입니다. 

일단 간단하게 크롬 개발자도구를 이용해서 보여드리겠습니다.  

var date = new Date();

데이트 객체를 받아와서 출력해보면 시간정보가 정확하게 나옵니다. 

date.getMonth();

현재 1월달입니다 getMonth()는 0~11월까지를 표시해줍니다. 

즉 +1을 해주면 현재 몇월인지 알수있습니다. 

date.getDate();

현재 24일로 getDate()는 현재 몇일인지 나옵니다.

Month는 0월부터 시작하는데 Date는 1일부터 시작하네요 

date.getDay();

현재 무슨요일인지를 출력해줍니다. 

4가 출력되고 오늘이 목요일인걸 봐선 

0은 일요일 6은 토요일 입니다. 

date.getHours();

getHours는 현재 시간을 보여줍니다.

14인걸로 봐서는 24시간제로 2시를 뜻합니다. 

date.getMinutes();

getMinutes는 현재 분을 보여줍니다. 

date.getSeconds();

getSeconds는 현재 초를 보여줍니다.

그럼 이것들을 종합해서 현재시간을 보여주는 시계를 만들어 보겠습니다.

00:00

<h1 id="clock" style="color:gray;">00:00</h1>

<script>

var clockTarget = document.getElementById("clock");

function clock() {
    var date = new Date();
    // date Object를 받아오고 
    var month = date.getMonth();
    // 달을 받아옵니다 
    var clockDate = date.getDate();
    // 몇일인지 받아옵니다 
    var day = date.getDay();
    // 요일을 받아옵니다. 
    var week = ['일', '월', '화', '수', '목', '금', '토'];
    // 요일은 숫자형태로 리턴되기때문에 미리 배열을 만듭니다. 
    var hours = date.getHours();
    // 시간을 받아오고 
    var minutes = date.getMinutes();
    // 분도 받아옵니다.
    var seconds = date.getSeconds();
    // 초까지 받아온후 
    clockTarget .innerText = `${month+1}월 ${clockDate}일 ${week[day]}요일` +
    `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes }`  : minutes }:${seconds < 10 ? `0${seconds }`  : seconds }`;
    // 월은 0부터 1월이기때문에 +1일을 해주고 
    // 시간 분 초는 한자리수이면 시계가 어색해보일까봐 10보다 작으면 앞에0을 붙혀주는 작업을 3항연산으로 했습니다. 
}

function init() {
clock();
// 최초에 함수를 한번 실행시켜주고 
setInterval(clock, 1000);
// setInterval이라는 함수로 매초마다 실행을 해줍니다.
// setInterval은 첫번째 파라메터는 함수이고 두번째는 시간인데 밀리초단위로 받습니다. 1000 = 1초 
}

init();

</script>

"VanillaJs"란 ? 

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

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

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

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

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

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

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

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

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

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

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