[Tech] 메서드 체이닝 & 함수

메서드 체이닝이란?!

const input = require("fs")
  .readFileSync(0)
  .toString()
  .trim()
  .split("\n")
  .map(Number);

console.log(input);

위의 예시와 같이, 하나의 메서드가 반환한 값을
다음 메서드에게 넘겨주며 연결하여 호출하는 형태를 메서드 체이닝이라고 한다.

• 코드가 간략해진다는 장점이 있다.
• 지나치게 사용하면 가독성이 떨어지는 단점이 있다.
• 에러 발생 시, 어느 부분에서 발생했는지 알기 힘들다는 단점도 존재한다.

---

일반 함수와 화살표 함수의 차이란?!

function func() {
    return '일반 함수'
};

const func = () => '화살표 함수';

위의 예시와 같이, 함수의 형태부터 일반 함수와 화살표 함수는 차이를 보인다.
다른 어떤 차이점이 있을까?

---

arguments 암묵적 인자

• 일반 함수는 실행할 때, 암묵적으로 arguments이라는 인자를 전달한다.

  function func() {
    console.log(arguments)
  };
  
  func(11, 12, 13);
  

• 이 때, arguments는 여러 개의 인자를 포함하는 배열 형태의 객체를 반환한다.

• 따라서, 우리는 매개변수를 따로 정의하지 않아도 전달 받을 수 있다.

• 이와 달리, 화살표 함수는 실행할 때,
  해당 변수를 전달 받지 못하므로 ... 문법을 활용하여 전달 받도록 한다.

  const func = (...args) => console.log(ars);  
  
  func(11, 12, 13); 
  

---

this 바인딩

• 일반 함수의 this

    let 객체 = {
        함수: function () {
            console.log(this);
        },
    };
  
    객체.함수();
  

  해당 함수를 가지고 있는 객체가 출력됨 (동적으로 결정됨)

• 화살표 함수의 this

    let 객체 = {
        함수: () => {
            console.log(this);
        },
    };
  
    객체.함수();
  

  외부에 있던 this인 window를 출력. (= Lexical this)

=> 객체의 메서드로 화살표 함수가 아닌 일반 함수를 사용해야,
생성한 객체에 접근할 수 있으므로 권장한다.

---

✨ 출처

프론트엔드 기술 면접 질문
Blog, [JS] 일반함수 vs 화살표 함수 (feat. this)

---