JS function vs arrow function

JS function vs arrow function

function 키워드의 쓰임새

1. 실행문으로써의 일반함수

function normalFunc(...args) {
  console.log(this); // window(브라우저 환경) || global (Nodejs 환경)
  return args;
}
const ret = normalFunc(1, 2);
console.log(ret); // [ 1, 2 ]

2. 생성자함수로써의 함수

// 생성자 함수 정의
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 생성자 함수의 프로토타입에 메서드 추가
Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// 객체 인스턴스 생성
const person1 = new Person("John", 25);
const person2 = new Person("Jane", 30);

// 메서드 호출
person1.sayHello(); // 출력: Hello, my name is John and I am 25 years old.
person2.sayHello(); // 출력: Hello, my name is Jane and I am 30 years old.

3. 객체 내부의 메서드로써의 함수

const calculator = {
  operand1: 0,
  operand2: 0,
  add: function () {
    return this.operand1 + this.operand2;
  },
};

// 값을 설정
calculator.operand1 = 10;
calculator.operand2 = 5;

// 메서드 호출
console.log(calculator.add()); // 출력: 15

반응형

ES6 arrow function

• this 바인딩을 하지않고, 상위 문맥의 this를 유지합니다. 그렇기 때문에 메서드로 사용할 시 this를 바인딩 하지 않는 문제로 주의깊게 사용해야 합니다.
• 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
• 생성자(Constructor)로 사용할 수 없습니다. (new 키워드 붙일 수 없음) ⇒ 그렇기 때문에 prototype이라는 속성이 함수에 없습니다.
• yield를 화살표 함수 내부에서 사용할 수 없습니다. (제네레이터에서 사용불가능)

기본 사용법

const add = (a, b) => {
  return a + b;
};

console.log(add(2, 3)); // 출력: 5

return 생략

• 함수 body 내부에 return문만 있을경우 return문과 중괄호 생략하고 곧바로 적을 수 있습니다.

const multiply = (a, b) => a * b;

console.log(multiply(2, 3)); // 출력: 6

function 키워드에 대한 고찰

1. function 키워드는 1가지 키워드가 3가지 역할을 할 수 있습니다. 이는 협업이나 다른 사람이 짠 코드를 볼 때 혼동을 줄 수 있는 여지가 있습니다.
2. 만약 일반함수로 사용하려면 arrow function을 사용하여서 함수 그 자체의 기능만 수행하도록 제한하면 됩니다. 이렇게되면 이 함수가 생성자 함수로 쓰일 가능성이나 this가 바인딩되는 규칙을 생각하지 않아도 되기 때문에 편합니다.
3. 생성자 함수로 사용하려면, class 문법을 사용하는게 목적에 더 맞습니다. 생성자 함수로 의도하고 제작한 함수여도 new 키워드를 붙이지 않아도 사용할 수 있지만 class는 그 목적이 객체를 생성하는데에 있기 때문에 new 키워드를 붙여서 목적에 맞게 사용할 수 있기 때문입니다.
4. 객체 메서드로 사용하려면 ES6 부터 나온 메서드 축약형을 사용해볼 수 있습니다. 메소드 축약형으로 만든 메서드는 new 키워드를 붙일 수 없습니다. 따라서 생성자 함수로 사용할 수 있는 가능성을 배제할 수 있죠.

// ES6 메소드 축약형 예시
const person = {
  name: 'John',
  age: 30,
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  },
  getFullName() {
    return `${this.name} Doe`;
  }
};

person.sayHello(); // 출력: Hello, my name is John and I'm 30 years old.
console.log(person.getFullName()); // 출력: John Doe