[3주차] this와 Rest, Spread 연산자

1월 28일 자 학습 내용 정리입니다.

 

✅ this가 가리키는 것

✔️ Dynamic binding

자바스크립트에서 함수가 호출되는 상황은 4가지로 나눌 수 있다.

1. 함수 호출 : 함수를 직접 호출.
2. 메서드 호출 : 객체의 메서드를 호출.
3. 생성자 호출 : 생성자 함수를 호출.
4. 간접 호출 : call, apply 등의 function 객체의 메서드로 함수를 간접 호출.

이 외에도 콜백함수의 호출이 있다.

 

콜백함수는 특정 동작 이후 불려지는 함수인데 보통 다른 함수의 인자로 보내지는 함수를 의미한다.

(callback 참조=> https://cansweep.tistory.com/260?category=995363 )

 

함수의 호출 환경에 따라 this는 동적으로 세팅된다.

이렇게 this가 환경에 따라 바뀌는 것을 동적 바인딩(Dynamic Binding)이라고 한다.

이때 bind, apply, call 등의 간접 호출로 this가 가리키는 것을 조작할 수 있다.

 

✔️ 화살표 함수와 일반 함수의 this

화살표 함수(Arrow Function)의 this는 호출된 함수를 둘러싼 실행 컨텍스트를 가리킨다.

반면 일반 함수의 this는 새롭게 생성된 실행 컨텍스트를 가리킨다.

 

 

위와 같이 obj 내부에 Funcs 메서드가 있고 그 안에 f1과 f2를 각각 일반 함수와 화살표 함수 형태로 생성한 뒤 this를 출력하도록 했다.

obj.Funcs()가 실행되었을 때 Funcs 내부에서의 this는 해당 객체인 obj를 가리키고 있는 것을 확인할 수 있다. 

 

 

f1의 내부에서 this의 값을 확인해보면 this는 window 객체를 가리키고 있다.

이는 f1()이 실행될 때 새로운 컨텍스트를 생성하고 이때 f1에 바인딩된 컨텍스트가 없으므로 this가 global을 가리키게 된 것이다.

 

 

f2의 this를 확인해보면 obj를 가리키고 있다.

f2가 함수 컨텍스트를 생성했을 때 this는 부모 컨텍스트를 가리키고 있기 때문이다.

 

화살표 함수의 this는 정해지면 바꿀 수 없다.

이는 call, bind, apply를 사용해도 동일하다.
이러한 특징 덕에 setTimeout 등 this가 바뀌는 상황에 유용하게 쓰일 수 있다.

 

 

✅ Rest Operator

나머지 매개변수를 가리키는 Rest Operator(...)를 사용하면 함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용할 수 있다.

함수의 인자에서 사용할 때는 인자 중 정해지지 않은 나머지를 가리키고 배열에서 사용하면 배열의 나머지 인자를, 객체에서 사용하면 객체의 나머지 필드를 가리킨다.

배열에 아무 것도 없을 경우 사용하면 빈 배열을 반환한다.

 

function f(a, b, ...theArgs) {
  // ...
}

 

function f1(a, ...arr){
    console.log(arr);
}

f1(1, 2, 3);

// output
// [2, 3]

 

위의 예시처럼 함수의 인자로 rest operator를 사용했을 경우 제일 처음의 인자를 뺀 나머지의 인자가 arr에 들어가게 되고 배열의 형태로 출력된 것을 확인할 수 있다.

 

 

✅ Spread Operator

Spread Operator(...)는 묶인 배열 혹은 객체를 각각의 요소, 필드로 변환한다.

객체는 또 다른 객체로의 spread를 지원하며 배열은 또 다른 배열의 인자, 함수의 인자로의 spread를 지원한다.

Spread Operator는 사용 시 주의해야할 점이 있는데 Spread Operator의 등장 순서에 따라 객체의 필드가 덮어씌워질 수 있다는 점이다.

 

Spread Operator의 구문은 다음과 같다.

• 함수 호출

myFunction(...iterableObj);

• 배열 리터럴과 문자열

[...iterableObj, '4', 'five', 6];

 

 

• 객체 리터럴

let objClone = { ...obj };

 

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));

// output
// 6

 

위의 예시에서 sum의 인자로 numbers 배열을 넘겨주는데 전개연산자를 사용하고 있다.

따라서 sum의 매개변수인 x, y, z에 각각 numbers의 1, 2, 3이 들어가게 되어 결괏값으로 6이 출력된다.

 

 

🔍 참조

Rest Operator https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters

Spread Operator https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax