012. class 사용하기 (함수, 객체)

PART 1(입문) React.js 시작하기

012. class 사용하기

• 자바스크립트에서는 함수를 객체로 사용할 수 있다
• 기존 ES5에서는 객체를 구현하기 위해 prototype 사용
• 객체는 상속을 통해 코드를 재사용할 수 있게 해줌
• ES6에서의 class는 prototype과 같은 개념

함수(Function) : 실행 가능한 코드 블록

호출하면 특정 동작을 수행하는 코드 묶음

function add(a, b) {
  return a + b;
}

add(2, 3); // 5

객체(Object) : 여러 데이터와 동작을 하나로 묶은 것

키-값 쌍으로 데이터를 저장하고, 관련 동작(메서드)도 담을 수 있는 컨테이너

function add(a, b) {
  return a + b;
}

add(2, 3); // 5

 

 

"함수를 객체로 사용한다"는 무슨 뜻?

① 함수에 속성을 추가할 수 있다

function sayHi() {
  console.log("Hi!");
}

sayHi.language = "Korean"; // 함수에 속성 추가
console.log(sayHi.language); // "Korean"

② 변수에 담을 수 있다

const greet = function() {
  console.log("Hello!");
};

greet(); // "Hello!"

③ 다른 함수의 인자로 전달할 수 있다

function runTwice(fn) {
  fn();
  fn();
}

runTwice(function() { console.log("실행!"); });
// "실행!"
// "실행!"

④ 함수를 반환값으로 사용할 수 있다

function makeAdder(x) {
  return function(y) {  // 함수를 반환!
    return x + y;
  };
}

const add5 = makeAdder(5);
add5(3); // 8

함수는 "호출 가능한 객체"

	일반  객체	함수
속성 추가	✅	✅
변수에 할당	✅	✅
인자로 전달	✅	✅
호출 가능	❌	✅