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


앞서 본 ...는 Spread 연산자이다.

Spread 연산자는 Rest 파라미터로 사용하면 인자들을 합쳐서 배열로 만들어주지만 

반대로 배열을 넣어주면 배열을 분리 해준다.

// 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




ES5 에서는 apply 메소드를 이용해서 배열을 분해 했지만 


ES6 에서는 간단하게 Spread 연산자를 이용해서 배열 분해가 가능하다.









화살표 함수

화살표 함수란 function 키워드 대신에 =>를 사용해서 보다 쉽게 함수를 선언할수 있다. 

모든 경우에서 화살표 함수를 사용할수 있는것은 아니다.

1
2
3
4
5
    () => { }; //매개변수가 없을경우
 
     x => { }; //매개변수가 하나일경우 ( 괄호를 생략 가능 )
 
(x, y) => { }; //매개변수가 두개 이상일 경우 ( 괄호 생략 불가능 )
cs

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


1
2
const calc = x => x * x;
console.log(calc(5)); // 25
cs


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


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


1
2
3
4
5
6
7
8
9
10
11
12
13
// ES5
var arr = [123];
var pow = arr.map(function (x) { // x는 요소값
  return x * x;
});
 
console.log(pow); // [ 1, 4, 9 ]
 
// ES6
const arr = [123];
const pow = arr.map(x => x * x);
 
console.log(pow); // [ 1, 4, 9 ]
cs

this

화살표 함수와 function 키워드로 생성한 일반 함수의 가장 큰 차이는 this

일반 함수의 this는 매번 함수를 정의할때마다 각각의 this가 존재 했습니다.


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


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


this를 사용할수 있습니다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// ES5
 
function foo() {
    console.log(this);        // foo{}
 
    setTimeout(function foo2() {
        console.log(this);    // window{}
    }, 1000);
}
 
var f = new foo();
 
 
// ES6
 
function foo() {
    console.log(this);        // foo{}
 
    setTimeout(() => { console.log(this) }, 1000);    // foo{}
}
 
var f = new foo();
cs



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


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



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


화살표 함수는 Lexical this를 지원하므로 콜백 함수로 사용하기 편리하다. 

하지만 화살표 함수를 사용하는 것이 오히려 혼란을 불러오는경우도 있다


1. 메소드 

화살표 함수로 메소드를 정의하는 것은 피해야 한다. 


1
2
3
4
5
6
const person = {
  name'Ko',
  sayHi: () => console.log(`Hi ${this.name}`)
};
 
person.sayHi(); // Hi undefined
cs


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


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


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


1
2
3
4
5
6
7
8
const person = {
  name'Ko',
  sayHi() { // seyHi() { === sayHi: function() {
    console.log(`Hi ${this.name}`);
  }
};
 
person.sayHi(); // Hi Ko
cs


2. 생성자 함수

화살표 함수는 생성자 함수로 사용할 수 없다. 생성자 함수는 prototype 프로퍼티를 가지며 

protorype 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용한. 

하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않다.

1
2
3
4
5
6
const Foo = () => {};
 
// 화살표 함수는 prototype 프로퍼티가 없다
console.log(Foo.hasOwnProperty('prototype')); // false
 
const foo = new Foo(); // TypeError: Foo is not a constructor
cs


3. addEventListener

addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역객체 window를 가리킨다.


1
2
3
4
5
6
var button = document.getElementById('myButton');
 
button.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});
cs


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


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


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



1
2
3
4
5
6
var button = document.getElementById('myButton');
 
button.addEventListener('click'function() {
  console.log(this === button); // => true
  this.innerHTML = 'Clicked button';
});
cs






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


ES6 기초 문법 세가지


1. const

ES6에 들어가며 새롭게 추가된 변수 선언법이다.

기존에 var와 달리 상수형으로 코딩이 가능하며

값을 재할당 할수 없다. 

const NUM = 100;

console.log(NUM); /* 100 */

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

console.log(NUM); /* 100 */

하지만 참조형으로 사용한다면 값변경이 가능합니다.


원시형 변수에서만 상수형으로 동작하고 array, object등에선 값변경이 가능해집니다.




2. let

ES6에서 var를 대체하는 새로운 키워드

기존에 var는 호이스팅 현상이 있어서 어디서든 호출해도 여기저기 잘불려 다니는 말랑말랑한 변수선언이였다면 

반면 let, const는 엄청 딱딱한 친구들입니다. 호출한 시점에 변수 선언이 이루어지지 않았다면 에러가 출력됩니다.

기존에 var와 달리 직관적이고 자연스러운 표현이 됬습니다. 

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


var num;

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


let num;


하지만 저는 swift언어를 배운입장에선 의아했습니다. 

swift에서는 let을 상수 선언으로 사용하지만 ES6에서는 let을 자유롭게 변경하는 변수로 사용합니다.

let은 기존 var와 같이 자유롭게 사용할수 있지만

기존 var보다는 좀더 직관적이고 자연스럽게 사용 할수있습니다.




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. 전역 객체의 하위 객체 종류

 document
 
 navigator

 history

 location


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


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




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

 주로 자바스크립트에서 미리 선언된 메소드들이 전역 객체의 하위 메소드 이다.

 alert()
 
 confirm()
 
 setInterval()

 setTimeout()

 ...등이 있다 확인법은 하위 객체 종류와 같으며 수많은 함수들이 있다

 그리고 예시로 우리가 함수를 만들어도 전역 객체의 하위 메소드가 된다. 



4. 예시

function func() {

alert(" Hello World !");

}

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


확인하는법은 간단하다. 


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


- console 창을 클릭한다.




- func()를 입력해본다.



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



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




5. 결론

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


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


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


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



이번 포스트는 querySelector(), querySelectorAll() 에 대해 알아보겠습니다 .


일단 크게 동작하는 방식은 같습니다. 


특정 name, id, class등을 이용해서 요소를 타겟으로 잡고 수정하거나 접근해서 정보를 가져올수 있습니다. 


하지만 querySelector()는 타겟의 자식요소 한가지만 가져오고 


querySelectorAll()은 모두 가져오게 됩니다. 


예제를 보며 설명드리겠습니다. 





  • 섹션

  • 섹션



  • 섹션

  • 섹션
  • <li class="section">섹션</li>

    <li class="section">섹션</li>


    const sections = document.querySelector(".section");

    const sections2 = document.querySelectorAll(".section");


    같은 html 태그이고 같은 클래스를 타겟을 잡았지만 



    querySelector()를 사용하면 첫번째 li태그만 수정이 되고 



    querySelectorAll()를 사용하면 모든 li태그가 수정이 됩니다. 



    jQuery에서 .클래스명 으로 타겟을 잡는것과 흡사하지만 



    querySelector()를 사용하면 첫번쨰 자식만 타겟으로잡고 



    querySelectorAll()를 사용하면 타겟을 배열형식으로 받습니다. 



    그럼으로 두번째 버튼에서 css를 수정할때는 for문을 이용해서 css수정을 하였습니다. 



    차이점을 잘 이용해서 다양한 방법으로 타겟을 잡을수 있게 연습하면 될것 같습니다. 



    끝으로 querySelector(), querySelectorAll()는 jQuery와 큰 속도차이가 없다고 합니다. 



    저사양에서는 querySelector(), querySelectorAll()가 약간 우수하다고 합니다. 



    그러나 지난 포스팅에서 다뤘던 getElementById()는 무려 10배이상 빠르다고 합니다. 



    2019/01/23 - [IT/JAVASCRIPT] - 바닐라스크립트에서 이벤트리스너 (addEventListener)



    각자 사양과 상황에 맞춰서 최적의 효율과 최고의 효과를 얻으시길 바랍니다. 





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


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


    아주 간단합니다 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>







    애초에 자바스크립트는 html css를 조작목적 보다는 


    이벤트를 받으려고 만들어졌다. 


    실제로 많은 사람들이 


    이벤트를 받으려면 JQuery를 사용해야하고 


    이벤트리스너 자체를 JQuery와 함께 배우다 보니 


    순수 자바스크립트로는 기능구현을 못한다는 생각들을 많이한다. 


    하지만 바닐라스크립트 즉 아무런 라이브러리를 사용하지 


    않고도 이벤트리스너를 만들수 있다.


    이벤트 종류는 

    (click, resize, submit, inputchange, load)등이 있다


    자바스크립트에선 이런것들을 JQuery를 사용하지 않아도 


    이벤트리스너를 만들수 있다. 




    ex) 버튼1 JQuery를 사용한 이벤트 리스너


    <script src="//code.jquery.com/jquery.min.js"></script>  

    <input type="button" id="button1" value="버튼1">


    <script>

    $("#button1").click(function() {

    alert("버튼1을 누르셨습니다.");

    });

    </script>




    ex) 버튼2 순수 자바스크립트를 이용한 이벤트 리스너(addEventListener)


    <input type="button" id="button2" value="버튼2">


    <script>

    function clickEvent() {

    alert("버튼2을 누르셨습니다.");

    }


    const button = document.getElementById("button2");

    button.addEventListener("click", clickEvent);

    </script>




    코드가 실제로 JQuery를 사용하는것보다 조금더 길어지긴 했으나 


    실제 성능차이는 많이 난다고 한다. 


    물론 이런 작은규모 수준에서는 아니지만 


    추후 각종 이벤트들로 스크립트파일 하나가 몇천줄이되는 순간 


    많은 성능차이가 발생하게 될것이다. 




    추가로 document.get~를하면 JQuery와 같이 다양한 방법으로 타겟을


    잡을수 있다. 








    앞으로 바닐라JS를 배워보기 앞서 간편하게 웹상에서 웹개발을 할수있는 사이트를 소개 한다. 


    사이트 이름은 repl 이라는 사이트다. 



        <이미지 클릭시 해당 사이트로 이동됩니다.>



    간단 하게 구글, 깃허브, 페이스북을 통해 로그인 할수 있으며 별도로 회원가입도 가능하다. 






    가입후 간단하게 프로젝트를 생성하면 


    웹상에서 HTML, CSS, JS 등 여러가지를 코딩할수있으며 


    장점으로는 바로바로 직접 결과값을 확인하거나 console창을 확인할수있다. 






    또한 버전관리까지 해주는 혜자 사이트다 그리고 각종 여러가지 혜택을 더얻으려면 


    한달에 7불정도를 지불해야한다. 


    사실 지불하지 않고도 이미 충분한 기능을 제공하기에 일단 각종 텍스트에디터를 설치하기 이전인 


    입문자들을 위해 간단히 겪어보기 좋다. 











    "VanillaJs"란 ? 



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


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


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


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


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


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


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


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


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


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


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







    + Recent posts