🖋️ this & arguments 란?

@ this

모든 실행 컨텍스트(모든 함수)에 대해 생성되는 특수 변수
현재 작업중인 개체에 대한 참조

• Context-Based Value

  • 함수 호출되는 방식에 따라 달라짐
  • 객체의 메서드에서 객체 참조
  • 일반 함수에서 전역 객체를 참조
  • 화살표 함수에서는 Lexical Scope 지정
  • 주변 코드의 context 에서 사용됨을 의미
    
    

• Constructor & Class Method

  • 생성자 함수 또는 클래스 메서드에서 생성자가 만든 인스턴스 나타냄

function showName() {
    console.log(this.name);
}

const user = {
    name: 'Alice',
    showName: showName
};

user.showName(); // 'Alice' - 'this' refers to 'user'
showName(); // undefined or global object name - 'this' refers to global object

@ arguments

객체는 함수 내에서 액세스할 수 있는 배열과 유사한 객체
해당 함수에 전달된 인수의 값을 포함

• 특징

  • 배열처럼 보이지만 실제 배열은 아님, 배열 메서드가 없음
    • 실제 배열로 변환 가능
      
      
  • 함수 본문 내에서만 사용 가능
    
    
  • 화살표가 아닌 함수에서 사용 (화살표 기능에서는 불가능)
    • 명명된 매개 변수 또는 나머지 매개 변수를 사용하여 함수 인수에 액세스

function sum() {
    let total = 0;
    for(let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

console.log(sum(1, 2, 3)); // 6

@ this

---

생성자에서 호출하는 개체에 대한 참조가 필요
또는 컨텍스트를 조작할 때 사용

@ arguments

---

전달된 모든 인수의 배열과 같은 표현이 필요한 함수
특히 인수의 수를 알 수 없거나 가변적인 경우에 사용

But

spread/rest parameters 및 화살표 함수와 같은
ES6 기능을 사용하면 'arguments' 직접 사용이 줄어듬