JAVASCRIPT 스터디 7주차 예습

Function
Closure
Call & Apply & Bind

함수 (function)

함수는 Function 생성자로 부터 생성되는 객체입니다.

// 복습
// JavaScript에서는 function 구문을 통해 함수를 정의할 때 함수의 prototype 속성에 객체가 자동으로 생성되어 저장됩니다.

function Person() {
  // ...
}
typeof Person.prototype; // 'object'

함수 객체는 두가지 속성을 가지고 있습니다.

length - 함수의 매개변수의 개수의 반환
name - 함수의 이름을 반환

(추가) 주인 없는 this

ES05 미만에 생성자를 호출시 new 빠트리면 this는 전역을 객체를 가리키게 됩니다. 이를 방지 하기 하기위해 엄격모드를 사용 합니다.

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

// `new`를 빠트린 채 생성자를 호출하면, `this`는 전역 객체를 가리키게 됩니다!
Person("ria");

// 의도치 않게 전역 객체의 속성이 변경되었습니다.
console.log(window.name); // ria

고차함수 ( (Higher-order Function)

함수를 인수로 받는 함수 또는 함수를 반환하는 함수를 고차함수라고 합니다.
Array의 매소드들이 고차함수입니다.

// 함수를 인수로 받는 함수
// 다른함수의 인수로 넘겨지는 함수를 콜백이라고합니다. 그럼 여기선 f
function func2(f) {
  f();
}

// 함수를 반환하는 함수
function func1() {
  return function() {};
}

클로저 (closure)

내부함수에서 외부함수의 변수를 사용했을때 외부함수 실행이 끝난뒤에도 변수를 사용할수 있습니다. 이과정에서 외부함수의 변수를 가져다가 사용하는 내부함수와 변수가 저장되는 저장소를 클로저라고 합니다.

클로저를 사용하는 이유?

클로저특성상 데이터를 숨기고 정해진 방법을 통해서만 데이터에 접근할 수 있도록 제한하여서 여러명의 개발자와 협업시 접근제어 및 데이터 보존, 메소드 보존으로 사용합니다.

function func1() {
  const eye = 2;
  return function ria() {
    return eye;
  };
}
func1(); // function ria()
func1()(); // 2

this 바꿔치기 (Call & Apply & Bind)

this는 때에 따라 다른값을 가리킵니다. 그래서 원하는 값을 가리키게 만들어 주기위해 함수 객체의 bind call apply를 사용합니다.

bind 메소드를 호출하면 메소드의 인수로 넘겨준 값이 this가 되는 새로운 함수를 반환합니다.

function print(grade) {
  return `${this.name}님의 점수는 ${grade}`;
}
const student = { name: "Ria" };
const printForRia = print.bind(student);

printForRia(100);

call혹은 apply 메소드를 사용하면 새로운 함수를 만들지 않고 임시적으로 this를 바꿔버립니다.
둘의 차이점은 인수를 넘겨주는 방식이 다릅니다.
call은 파라미터를 넘길때 콤마로 구문해서 넣어주고 apply는 파라미터를 배열로 넘겨주는 방식입니다.

function print(grade) {
  return `${this.name}님의 점수는 ${grade}`;
}
const student = { name: "Ria" };
printForRia.call(student, 100);
printForRia.apply(student, [100]);

RAI TIL