23.05.23 자바스크립트 일급객체 함수 연습하기

🔍발생한 이슈(오류)

일급객체로서의 함수 특징 중 this에 대해서 공부하다가 템플릿 리터럴과 화살표 함수로

변형해서 예시문제를 해결할 때 계속 오류가 났다.

const person = {
  name: "john",
  age: 31,
  isMarried: true,
  sayhello: function () {
     console.log("hello, my name is " + this.name);
  },
};

person.sayhello();

 

기존 예제문제는 실행하면 hello my name is john가 잘 출력이 된다.

 

📌해결과정

👉템플릿 리터럴을 이용

1번

console.log("hello, my name is " + `${name}`); //실패

 2번

console.log("hello, my name is " + `${'name'}`); //실패

엇 중괄호 안에 따옴표를 안넣어서 그런가? 생각하고 넣었는데 당연히 실패,,ㅋㅋ

 

3번

console.log(`hello my name is ${this.name}`)// 성공

템플릿 리터럴 공부했던 내용을 다시 훑어보고 오니까 처음부터 백틱을 넣어서 썼어야 했다..

그새 까먹다니.. 무튼 ()안에 백틱 먼저 써주고 원하는 자리에 $() 백틱에 쓰는 함수를 넣어서

this를 써주니까 성공했다.  엄청 별거 아닌것 같은데 어제 처음 자바스크립트를 접한 나에게는

어려웠다,,ㅋㅋㅋ

 

👉화살표 함수를 이용

1번

const person = {
  name: "john",
  age: 31,
  isMarried: true,
  sayhello: function () {
  },
};

person.sayhello = () => console.log("hello, my name is " + this.name); //실패

//실패 (스코프 바깥에 있어서 값이 안나오는 것 같다..)

 

2번

const person = {
  name: "john",
  age: 31,
  isMarried: true,
  sayhello: function () {

		() => console.log("hello, my name is " + this.name);
  },
};

person.sayhello(); //실패

혹시나 하고 스코프 안에 넣어봤는데도 ㅅ실패,,,

 

3번

const person = {
  name: "john",
  age: 31,
  isMarried: true,
  sayhello: () => {
    console.log("hello, my name is " + this.name);
  },
};

person.sayhello();

function위치에 화살표 함수를 넣었는데 드디어 성공함..

실행시 hello, my name is undefined 출력으로 성공했는데  undefined인 이유는

화살표 함수는 디스를 바인딩하지 않기 때문이다.