[javascript] this 키워드, arrow function

 

함수 안에서 쓰면 새로 생성되는 오브젝트를 뜻함

function userName() {
        this.name = 'park'
    }

let createName = new userName();

 

이벤트리스너 안에서는 e.currentTarget (지금 이벤트 동작한 곳)

document.getElementById('btn').addEventListener('click',
    function(e) {
        console.log(this);
        console.log(e.currentTarget);
})

 

일반 함수에서는 window 

document.getElementById('btn').addEventListener('click',
    function(e) {
        var array = [1,2,3];
        array.forEach(function(a) {
            console.log(this);
        })
    })

object 안에서 callback 함수를 쓴 this 

let object = {
        names : ['park', 'kim', 'lee'],
        getName : function() {
            console.log("1", this);
            object.names.forEach(function() {
                console.log("2", this);
            })
        }
    }

    let object = {
        names : ['park', 'kim', 'lee'],
        getName : function() {
            console.log("1", this);
            object.names.forEach(() => {
                console.log("2", this);
            })
        }
    }

arrow function 특징 : 내부의 this값을 변화시키지 않음, 외부 this 값 그대로 재사용 가능

 

let count = a => a + 10 ;
count(값);

function arrow 장점

1. 직관적

2. 파라미터 1개면 소괄호 생략가능

3. 코드 한줄이면 중괄호도 생략가능