[JS] this와 arrow function

🎉 들어가기

본 포스팅은 코어 자바스크립트 라는 책을 주제로 27기 SOPT 자금성 스터디의 정재현님의 발표자료를 재구성하여 작성하였습니다!

JavaScript에서는 선언할 때 결정되는 부분과 호출할 때 결정되는 부분이 있다.

this는 호출할 때 결정되는 것인데, this라는 값은 함수를 어떻게 실행시키느냐에 따라서 달라진다.

이 주제를 배우는 이유는 this의 값을 판별할 때 어려움을 겪는 경우가 많은데, this의 값이 결정되는 4가지 경우를 잘 연습한다면, this의 값을 판별할 때 도움이 된다.

this

1. 할머니: 나는 허리가 아프다 ( 나 === 할머니 )
2. 아버지: 나는 다리가 아프다 ( 나 === 아버지 )
3. 어머니: 나는 머리가 아프다 ( 나 === 어머니 )

JS에서 this란 위의 문장 속 '나'와 비슷하다. 어떤 문맥이냐에 따라 그 의미(값)가 변한다.

따라서 '나'는 this와 비슷한 문맥이다.

즉 this는 어떻게 실행하냐에 따라서 this의 값이 바뀌게 된다!

실행하는 방법에는 4가지가 있다.

1. 일반함수 실행방식
2. Dot Notation 실행방식
3. 메소드(call() apply() bind())를 이용한 실행방식
4. new를 이용한 실행방식

즉, 이 4가지 중 어떤 방식으로 실행하느냐에 따라 this의 값은 바뀐다.

1. 일반함수 실행방식

전역공간에서 this는 전역객체를 가리킨다. 브라우저 환경에서 전역객체는 window이다.

function foo(){
	console.log(this); // 'this' === global object (브라우저 상에서는 window 객체)
}
foo();

아무 특이점 없이 그냥 함수를 실행 시키는 경우이다. 이렇게 일반적으로 바로 함수를 실행시키는 일반함수 실행방식에서 this 는 global object가 된다. ( 브라우저 상에서는 window 객체 )

예외) strict mode

// 엄격한 mode 

'use strict';

let name = 'ken';
function foo(){
	console.log(this.name); // 'this' === undefined
}
foo();

사실상 개발자들이 this를 사용할 때 window 객체를 가리키려고 this를 사용하는 경우는 거의 없다. 따라서 일반함수 실행방식에서 'use strict' 모드에서 this는 window객체를 가리키지 않고, undefined가 된다.

여기서 undefined 라는 것은 객체가 아니기 때문에 undefined 의 name 속성을 가져오는 것은 불가능하다.

핵심은 함수가 실행되는 부분을 찾는 것이다.

// example 1

let age = 100;

function foo(){
	let age = 99;
	bar();
}

function bar() {
	console.log(this.age);
}

foo();

여기서 foo()를 실행시키면 bar()가 실행될 때 일반함수 실행 방식으로 실행했기 때문에 this.age의 this는 window 객체가 된다!

간단하게 생각하자, this라는 값을 쓰는 함수가 어떤 방식으로 실행 되는지를 봤을 때, 그 부분이 일반함수 실행 방식이기 때문에, 즉 this가 window이기 때문에 global 단계의 값인 100이 나오게 된다.

핵심은 함수가 실행되는 부분을 찾는 것!

// example 2

let baseBall = 4;

function foo(){
	let baseBall = 3;
	bar();
}

function bar() {
	console.log(this.baseBall);
}

foo(); // ?

첫번째 방식 일반함수 실행방식 정리

• 일반함수 실행방식 → this는 전역객체를 가리킨다.
• strict mode 에서는 this 버그를 막기위해 undefined로 처리된다.
• 2가지 예제에서 본 것처럼 함수가 실행되는 부분을 찾으면 this의 값을 판별 가능하다!

2. Dot Notation 실행방식

Dot Notation은 가장 간편하게 this의 값을 판별이 가능하다. . 앞에 있는 객체가 this로 설정이 되는데, 주의할점은 다른 실행방식과 혼합되어있을때 혼동이 올 수 있으니 그 부분을 유의해야한다.

//example 1

let age = 100;

let ken = {
	age: 35,
	foo: function foo() {
		console.log(this.age)
	}
}

ken.foo();

.앞에 있는 객체가 this로 설정이 된다. 따라서 ken이라는 객체가 this의 값으로 설정이 된다.

//example 2

function foo(){
	console.log(this.age);
}

let age = 100;

let ken = {
	age: 35,
	foo: foo
};

let wan = {
	age: 31,
	foo: foo
}

ken.foo();
wan.foo();

마찬가지로 .앞에있는 ken과 wan 객체의 age가 출력된다.

// example 3

let age = 100;

let ken = {
	age: 35,
	foo: function bar() {
		console.log(this.age);
	}
};

let wan = {
	age: 31,
	foo: ken.foo
}

var foo = ken.foo;  // bar() 라는 함수 자체를 foo에 넣어둔 것

ken.foo(); // 35
wan.foo(); // 31
foo(); //     100 -> 일반함수 실행방식

ken의 경우 .으로 접근한 객체의 35

wan의 경우 foo가 ken.foo 함수를 사용하기에 31

var foo 의 경우 ken.foo 함수를 뜻하기에 일반함수 실행방식 이므로 전역의 100

// example 4

let score = 4;

let SSG = {
	score: 5,
	foo: function bar() {
		console.log(this.score);
	}
};

let Doosan = {
	score: 3,
	foo: SSG.foo
}

var foo = SSG.foo;

SSG.foo(); // 5
Doosan.foo(); // 3
foo(); // 4 

Dot Notaion 정리

• .앞에 있는 객체가 this로 설정이 된다.

3. 명시적으로 this를 바인딩 하는 방법 (call/apply/bind)

this의 값을 판별하는것은 함수가 어떻게 실행되느냐에 따라 구분되는데, 그 세번째 방식으로 메소드를 통해 명시적으로 this가 무엇을 나타내는지 바인딩 해주는 방법을 알아보자.

( function.prototype.call / function.prototype.bind / function.prototype.apply )

이것들은 함수가 갖고 있는 메소드들인데, 이 메소드들을 사용했을 때도 this의 값이 변하게 된다.

1. call()

// call() example 1

let age = 100;

function foo(){
	console.log(this.age);
}

let wan = {
	age: 31;
};

foo();  // 일반함수 실행방식

foo.call(wan);  // 31 

마지막줄에 보면 foo 라는 함수가 실행 되는데, call(wan) 에서 wan객체가 foo라는 함수의 this로 설정되어 들어가게 된다.

2. apply()

// apply() example 1

let age = 100;

function foo(){
	console.log(this.age);
}

let ken = {
	age: 35;
};

foo();

foo.apply(ken); // 35

마지막줄에 보면 foo 라는 함수가 실행 되는데, apply(ken) 에서 ken객체가 foo라는 함수의 this로 설정되어 들어가게 된다.

정리하면, call과 apply 의 경우 일반함수 실행방식이나, dot notation을 사용했을 때와는 다르게, 우리가 직접적으로 객체를 지정해서 this에 할당할 수 있다.

하지만 차이점이 있다.

//example 3

let age = 100;

function foo (a,b,c,d,e) {
	console.log(this.age);
	console.log(arguments);
}

let ken = {
	age: 35;
}

foo.call(ken,1,2,3,4,5);   // 35 1 2 3 4 5
foo.apply(ken,[1,2,3,4,5]); // 35 1 2 3 4 5

앞에서는 인자를 하나만 받았었는데, 인자를 여러개 받는경우 활용 방식이 바뀌게 된다.

foo.call() 의 경우 첫번째 인자가 객체로 인정이 되고, 두번째부터 나머지 인자들을 foo라는 함수의 인자들로 들어가게 된다. a = 1 b = 2 c = 3 d = 4 e = 5 가 된다.

foo.apply 의 경우 첫번째 인자가 객체로 인정이 되고, 두번째 인자가 배열형태로 결정해서 배열의 원소들이 각각의 argument로 들어가게 된다.

정리하면, call은 메소드를 사용할 때 인자의 수가 정해져 있지 않다. 그런데, apply는 인자를 2개만 받는다. 첫번째 인자가 this값으로 설정하고 싶은 객체를 넣어주고, 두번째 인자는 배열을 넣어주고, 배열의 원소들이 아규먼트로 들어간다.

3. bind()

apply와 call 메서드들은 객체와 원소를 설정한 뒤 함수를 실행 시켰다.

바인드는 call/apply 와 다르게 바로 해당함수를 실행시키지 않는다. 대신 객체를 bind한 함수를 반환해준다. 핵심은 객체를 설정하고, 설정된 함수를 반환하는 것

// example 4
let age = 100;

function foo(){
	console.log(this.age);
}

let ken = {
	age: 34
}

let bar = foo.bind(ken); // bar에 반환한다.

bar();

foo.bind(ken) 을 보면, ken을 this값으로 설정을 하는것은 맞지만, 실행시키지는 않고 반환을 한다.

// example 5
let age = 100;

function foo() {
	console.log(this.age);
	console.log(arguments);
}

let ken = {
	age:34
};

let bar = foo.bind(ken);

bar(1,2,3,4,5); // 이제서야 실행이 된다.

마찬가지로 ken객체를 this값으로 설정 해 준 뒤, bar에 원소를 삽입해주면 된다.

메소드call() apply() bind() 를 이용한 실행방식 정리

• 하나의 아규먼트를 받을 때 call( object ) 메소드의 경우, object가 this값이 되어 실행된다. 그리고 여러개의 아규먼트를 받을 수 있으며, 그 경우 첫번째 아규먼트는 객체가 this로 설정이 되며, 나머지 값은 함수의 아규먼트로 들어가게 되어 실행된다.
• 하나의 아규먼트를 받을 때 apply( object ) 메소드의 경우, object가 this값이 되어 실행된다. 그리고 단 2개의 아규먼트를 받을 수 있으며, 첫번째 아규먼트는 객체가 this로 설정이 되며, 나머지 값은 배열로 결정이 되는데, 배열의 원소들이 함수의 아규먼트로 들어가게 되어 실행된다.
• 마지막으로 bind()의 경우 object가 this의 값이 되는 것은 동일 하나, 실행은 되지 않고 반환을 한다.

4. new를 이용한 실행방식

this라는 값은 함수를 어떻게 실행시키느냐에 따라서 달라진다.

function foo(){
	console.log(this);
}

new foo();  // 이럴때 this의 값은 빈 객체가 들어간다.

이때 new를 하면 빈 객체가 새로 생성되면서 빈 객체가 this속에 할당 된다.

[new → 새거] this에 빈 객체가 새로이 할당되어 실행된다.

function foo(){
	this.name = '자금성';
}

var jagum = new foo();

console.log(jagum);

function foo(){
	// this = {};
	
	this.name = '자금성';

	//{
	//	name: '자금성'
	//}

	// return this;
}

var jagum = new foo();

console.log(jagum);  // 

즉,

foo()에는 리턴값이 전혀 없는데, new를 사용하면 return this가 된다. (예외가 있지만)

new를 사용하면 빈 객체가 생성이 되고, 우리가 return을 명시하지 않더라도 return this가 자동으로 설정이 된다.

new를 사용하여 함수를 실행시키면, this={} 빈 객체가 생성이 되고 마지막에는 this가 리턴이 된다.

// 인자를 넘겨주는 경우

function foo(name){
	this.name = name;
}

let jagum = new foo('자금성');

console.log(jagum);

기본적으로 new를 하면서 인자를 넣어줘도 상관없다.

// 생성자 함수

function Person(name, age){
	this.name = name;
	this.age = age;
}

// 인스턴스

let Hong = new Person('HGD', 20);  // 새로운 빈 객체가 생성되어 각각 다른 객체가 만들어진다.
let Kim = new Person('KKK', 24);

console.log(Hong);
console.log(Kim);

new를 사용해서 생성하는 함수를 생성자 함수라고 한다. 일반적으로 생성자 함수는 첫글자를 대문자로 표기해준다.

new를 이용한 실행방식 정리

• new를 하면 빈 객체가 새로 생성되면서 빈 객체가 this속에 할당 된다.
• 사용자가 따로 return 선언을 하지 않아도 this가 반환된다.
• new를 사용해서 생성하는 함수를 생성자 함수라고 한다.

사실 각각의 상황만 보면 간단해 보이지만, 코드가 커지면 커질 수록 this를 판별하는 것은 어렵기 때문에, 이 4가지 상황을 완벽하게 숙지한다면 this를 판별하는 것이 어렵지 않다.

🎯 ES6 Arrow function

일반함수 에서의 this는 호출될 때 즉, 동적으로 현재 실행되는 컨텍스트에 따라서 어떤 객체가 될지 결정된다. 선언되는 시점이 아니라, 함수가 실행되는 시점의 바인딩 방법에 따라 결정되는 것이다!

하지만 화살표 함수(arrow function)는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다!

const person = () =>{
    this.age = 0;
    console.log('age: ', age);
    console.log(this)

    setTimeout(()=>{
        this.age += 1;
        console.log('arrow age: ',this.age); // 상위 스코프의 this를 가리킨다.(정적으로 결정됨)
    },1000);
}

person();