TIL : JavaScript { this, arrowFunction, spread syntax }

알고 있다고 생각하지만 항상 모르겠는 3가지 이 기회에 정리하고자 작성합니다.

this

this를 통해서 특정 스코프를 지정할 수 있는데,

1. 일반 함수의 경우 this 를 사용하면 상위 스코프로 window 객체가 선택될 위험이 상존한다.

2. this를 수동으로 설정하고 싶을 경우 bind()를 사용한다.

3. 화살표 함수를 사용할 경우, this는 상위 스코프에서 상속된다.

box.addEventListener('click', function() {
    this.classList.toggle('opening')
    setTimeout(function() {
        this.classList.toggle('opening')
        // 여기서 this는 window 객체!
      }, 500)
})

const box = document.querySelector('.box')
        box.addEventListener('click', function (){
            this.classList.toggle('opening')
            setTimeout(() => {
                 this.classList.toggle('opening')
                // 여기서 this 는 box 객체!
            }, 500)
        })

화살표 함수는 블럭 바깥의 부모를 상속하는데 이 때 객체리터럴 내부에서는 불가하고, arguments 는 사용이 불가하다

(일 좀 잘 해라 에크마 인터네셔널 제발)

Spread syntax

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는
요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

 

MDN 의 설명은 그런데...

내가 느끼기에는 [] 을 풀어준다는 느낌...

[a, b, c] 를 a, b, c 로 만들어 어딘가에 넣어줄 수 있다는 느낌이다.

 

주의해야할 사항으로

얕은 복사, 정확히는 단순 객체 복사에 유의해야 한다.

 

방법으로는 lodash의 라이브러리를 이용할 수도 있겠지만,

newArr = [].concat(arr)
// 또는
newArr = [...arr]

과 같은 모양으로도 가능하다!