[우아한 테크러닝] React&TypeScript 2회차(3) - 자바스크립트 함수 관련 용어

함수 호출

함수를 호출하는 방법 중 (), call(), apply()에 대해 배워보았다.

let foo = function(a, b, c) {
  console.log(this);
  return a + b + c;
};

console.log(foo(1, 2, 3));
console.log(foo.call('call', 1, 2, 3));
console.log(foo.apply('apply', [1, 2, 3]));

call()과 apply()의 첫 번째 매개변수는 this가 가리킬 요소를 삽입한다.

this는 기본적으로 window 객체를 가리키기 때문에 이를 변경하기 위해 사용된다. 위의 예제에서 call()로 호출했을 때의 this는 'call'을 apply()로 호출했을 때의 this는 'apply'를 가리킨다.

call()은 파라미터 각각을 apply()는 배열의 형태로 매개변수를 전달한다.

유사 배열

유사배열은 ES6 문법이 도입되면서 spread 연산자를 사용한다.

ES6 문법 도입 '전'의 유사 배열

function foo() {
  console.log(arguments);   // [1, 2, 3]
  console.log(arguments.join());   // 에러
}

foo(1, 2, 3);

ES6 문법 도입 '후'의 유사 배열

function foo(...args) {
  console.log(args);   // [1, 2, 3]
  console.log(args.join());   // 1, 2, 3
}

foo(1, 2, 3);

ES6 문법 도입 전에는 유사 배열을 각자 배열로 취급하여 배열 내장함수를 사용할 수 없었다.
하지만 spread 연산자를 사용하면서 사용 가능하게 되었다.

커링(Currying) 테크닉 / 실행 컨텍스트

커링(Currying) 테크닉?
여러 개의 인수를 가진 함수를 단일 인수로 바꾸는 테크닉

function foo(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    }
  }
}

실행 컨텍스트?
자바스크립트 코드가 실행되고 연산되는 범위를 나타내는 추상적인 개념

함수는 계산 가능하다!

값 자체는 계산할 수 없지만, 함수는 계산이 가능하다.

const x = 10;   // primitive type (immutable)
const y = num => num + 10;

console.log(x, y(2))   // 10 12