TIL(2020.12.16)

1. this

• this에 대해 얘기하기 전 메소드에 대한 선 이해가 필요함

method

• 객체의 프로퍼티(key, value)에 할당된 함수
• 즉 프로퍼티 값이 함수인 경우. 일반 함수와 구분하기 위해 메소드라부름

let user = {
  name : "John",
  age : 30
};
 
 user.sayHi = function() {
   alert("Hi");
 }; // 객체 user에 할당된 sayHi가 메소드.

다시 this로 돌아가서,

• this키워드는 메소드와 연관지어 생각해야 하는데, 메소드는 객체에 저장된 정보에 접근할 수 있어야 함(모든 메소드가 그런건 아니지만 대부분의 메소드가 객체 프로퍼티값을 이용함)
• 메소드 내부에서 this 키워드 이용시 객체에 접근 가능

let user = {
  name : 'John',
  age : 30,
  sayHi() {
    alert(this.name); // this가 현재 객체를 지정함
    } //여기까지 메소드
  };
  user.sayHi();

• 위 코드에서 user.sayHi(); 메소드가 실행되는 동안 this = user.
• this 사용하지 않고 외부변수 참조해서 객체에 접근하는 것도 가능하긴 하다

let user = {
  name : 'John',
  age : 30,
  sayHi() {
    alert(user.name); // this대신 user 사용
    }
  };

• 위의 코드처럼 user를 this대신 사용해도 되긴함.

1-2. 왜 this를 사용하느냐?

• 외부 변수를 사용해 객체를 참조할 경우 예상치 못한 에러가 발생할 수 있음.
• 위의 코드처럼 user를 복사해 다른 벼수에 할당(admin = user)하고, user와는 전혀 다른 값으로 덮어쓸 경우 sayHi()는 객체 user의 name값이 아닌 다른 값을 참조하게 됨.

let user = {
  name : 'John',
  age : 30,
  sayHi() {
    alert(user.name); // Error: cannot read property 'name' of null.
    }
  };
let admin = user;
user null; // user를 null로 덮어씀
admin.sayHi(); // sayHi()가 다른 값을 참조해서 에러 발생.

• 위에서 만약 alert이 user.name 대신 this.name을 인수로 받았다면 에러 발생 안했을것

1-3. 자유로운 this

• this가 참조하는 값은 this를 호출하는 객체에 따라 달라짐.

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

user.f = sayHi;
admin.f = sayHi; // 각 객체에서 동일 함수 사용

user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin 점과 대괄호는 동일하게 동작함

• 예시 코드처럼 this는 호출 시에 객체가(.앞의) 무엇인가에 따라 자유롭게 결정됨.

1-4. this가 없는 화살표함수

• 화살표 함수는 일반 함수와 다르게 고유한 this가 없다.
• 화살표 함수에서 this 참조시 화살표 함수가 아닌 평범한 외부함수에서 this 참조

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName); //user.sayHi()의 this가 됨.
    arrow();
  }
};

user.sayHi(); // 보라

1-5. 계산기 만들기 연습

calculator 객체에 계산기 메소드 구현하기
조건 1) read() 에선 프롬프트창 띄우고 더할 값 두 개 받기. 입력받은 값은 객체 프로퍼티에 저장
조건 2) sum()은 저장된 두 값의 합 반환
조건 3) mul()은 저장된 두 값의 곱 반환

let calculator = {
  sum() {
    return this.a + this.b;
  },

  mul() {
    return this.a * this.b;
  },

  read() {
    this.a = +prompt('첫 번째 값:', 0);
    this.b = +prompt('두 번째 값:', 0);
  }
};

calculator.read();
alert( calculator.sum() );
alert( calculator.mul() );