[JavaScript] 화살표 함수, this, 비구조화 할당

* 화살표 함수(arrow function)

화살표 함수는 function 선언 대신 => 기호로 함수를 선언한다.

 

function으로 함수 선언

// 화살표 함수가 아닌 function으로 함수 선언

function add(x, y) {

    return x + y;

}

 

function으로 함수를 선언한 이 코드는 화살표함수 3가지 형태로 나타낼 수 있다.

 

화살표 함수로 함수 선언 1

// function 대신 화살표로 함수 선언, 재사용하기 위해 변수에 대입

const add = (x, y) => {

    return x + y;

};

 

function 대신 => 기호로 함수를 선언하였고, 재사용을 위해 const로 변수에 대입하였다.

 

화살표 함수로 함수 선언 2

// 중괄호 대신 return할 식 바로 적기

const add = (x, y) => x + y;

 

중괄호를 없애서 return 할 식을 바로 적어주었다.

 

화살표 함수로 함수 선언 3

// 소괄호로 감싸기 가능

const add = (x, y) => (x + y);

 

return 할 식을 소괄호로 감싸도 된다.

 

* this

this는 자신이 속한 객체를 가리키는 자기 참조 변수로, 자신이 속한 객체의 메서드나 프로퍼티를 참조할 수 있다.

this는 호출 방식에 따라 동적으로 값이 결정된다.

 

1. function(일반 함수)에서의 this

일반 함수 내에서 this는 어디에서 선언되냐에 따라 가리키는 값이 다르다.

객체의 메서드로 호출되면 해당 객체를 가리키고, 전역에서 호출되면 전역 객체를 가리킨다.

 

하지만 콜백함수 내부에서 this를 사용하면 원하는 대상을 가리키지 않을 수 있다.

콜백함수는 다른 함수의 인자로 전달되어 호출된다. 이때 콜백함수와 쓰인 this는 해당 콜백함수를 호출한 콘텍스트를 가리킨다. 따라서 객체의 메서드로 전달된 콜백함수 내부에서의 this는 해당객체를 가리키지 않을 수 있다.

 

쉽게 말해, 콜백함수와 쓰인 this는 자신이 속한 객체를 가리키지 않을 수도 있다는 것이다.

아래 코드에서는 tthat이라는 중간변수를 이용하여 this가 가리키는 값이 변경되는 것을 방지하였다.

 

var relationship1 = {  // 객체 생성

    name: 'zero',  // 객체속성1: 이름을 나타내는 문자열

    friends: ['nero', 'hero', 'xero'],  // 객체속성2: 친구 목록을 나타내는 배열

    logFriends: function(){  // 객체속성3: logFriends 메소드

        var that = this;  // 자신이 속한 relationship1을 가리키는 this를 that에 저장

        this.friends.forEach(function(friend){  // this가 가리키는 relationship1 객체의 friends 배열 실행

            console.log(that.name, friend);  // 객체의 이름과 배열 요소 출력

        });

    },

};

relationship1.logFriends();  // logFriends 메소드 호출하여 결과 출력

// 출력

zero nero

zero hero

zero xero

 

var that = this;
여기서 this는 자신이 속한 객체인 relationship1을 가리킨다.
이 값이 변경되는 것을 막기 위해 that이라는 중간변수에 저장하였다.

 

this.friends.forEach(function(friend)
this.friends에서 this는 자신이 속한 객체인 relationship1을 가리킨다.

 

this가 forEach의 콜백함수(forEach 메서드에 전달되는 함수) 내부에서 쓰였지만,
위에서 that이라는 중간변수를 이용하여 원하는 객체를 가리키도록 조치되었기 때문에 원본 객체인 relationship1을 가리킬 수 있는 것이다.

( forEach(): 배열에서 사용되는 메서드로, 배열의 각 요소에 대해 한 번씩 실행 )

정리하면, this.friends로 this가 가리키는 객체 relationship1의 friends 속성에 접근하여,
forEach(function(friend)로 배열의 각 요소를 가리킨다.

쉽게, this.friends는 객체의 friends 배열, forEach(function(friend)는 배열을 실행한다고 생각하면 된다.

 

 

2. 화살표 함수에서의 this

일반적으로 this는 함수가 호출될 때마다 동적으로 값이 결정되지만, 화살표함수에서는 외부 스코프에서 this를 상속받는다.

따라서 화살표 함수를 사용하면 콜백함수 내에서 this의 값을 유지하기 쉽고, 코드가 간결해지는 장점이 있다.

 

const relationship2 = {  //  relationship2 객체 정의

    name: 'zero',

    friends: ['nero', 'hero', 'xero'],

    logFriends(){  // logFriends 메소드 정의

        this.friends.forEach(friend =>{  // 화살표함수로 외부스코프에서 this 상속받음(객체 relationship2 가리킴)

            console.log(this.name, friend);  // 객체의 이름과 배열 요소 출력

        });

    },

};

relationship2.logFriends();  // logFriends 메소드 호출하여 결과 출력

// 출력

zero nero

zero hero

zero xero

 

* 비구조화 할당(구조분해 할당)

배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 담을 수 있게 하는 방식이다.

비구조화 할당을 사용하면 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있다.

 

candyMachine 객체의 getCandy 메서드를 getCandy 라는 변수에 할당하는 코드

var candyMachine = {  // candyMachine 객체 정의

    status: {  // 객체의 속성

        name: 'node',   // 속성의 속성

        count: 5,

    },

    getCandy: function(){

        this.status.count--;

        return this.status.count;

    }

};

// 객체의 속성을 같은 이름의 변수에 할당

var getCandy = candyMachine.getCandy;

var count = candyMachine.status.count;

 

위 코드를 비구조화 할당으로 바꾼 코드

const candyMachine = {  // candyMachine 객체 정의

    status: {  // 객체의 속성

        name: 'node',  // 속성의 속성

        count: 5,

    },

    getCandy(){

        this.status.count--;

        return this.status.count;

    }

};

// 비구조화 할당

const { getCandy, status: {count}} = candyMachine;

 

getCandy

candyMachine 객체의 getCandy 메소드를 가져와서 getCandy 변수에 할당

 

status: { count }

candyMachine 객체의 status 속성의 count 속성값을 count 변수에 할당

 

결론: 비구조화 할당을 사용하면 객체 안의 속성과 속성 안의 속성을 변수명으로 사용 가능하다.

 

* 배열에 대한 비구조화 할당

array 배열의 1번째, 2번째, 4번째 요소를 변수에 대입하는 코드

var array = ['nodejs', {}, 10, true];   // array 배열 선언

var node = array[0];   // 변수에 배열 요소 대입

var obj = array[1];   // 변수에 배열 요소 대입

var bool = array[3];   // 변수에 배열 요소 대입

 

위 코드를 비구조화 할당으로 바꾼 코드

const array = ['nodejs', {}, 10, true];  // array 배열 선언

const [node, obj, , bool] = array;  // const[변수명] = 배열명;

 

'const[변수명] = 배열명;' 형식으로 각 변수에 배열의 인덱스를 대응시켜 배열 요소를 대입할 수 있다.

 

 

성결대학교 정보통신공학과 웹서버프로그래밍 강의(2024)   

본 게시물은 위 강의 및 교재를 기반으로 정리한 글입니다.