🔖 객체

const a = 'age';

const dongwook = {
  id: 'dddda321',
  name: '동욱',
  "full name": '강동욱',
  [a] : 26,
  getNameFunction : function () {
    console.log('펑션 동욱입니다.');
  },
  getName() {
    console.log('동욱입니다!!!');
    console.log('function this :', this);
    console.log(this.name);
  },
  getNameArrowFunction : () => {
    console.log('애로우 펑션 동욱입니당당당당~~');
    console.log('arrow function this :', this);
    console.log(this.name);
  }
}

console.log(dongwook); 
// {
  // id: 'dddda321',
  // name: '동욱',
  // 'full name': '강동욱',
  // age: 26,
  // getNameFunction: [Function: getNameFunction],
  // getName: [Function: getName],
  // getNameArrowFunction: [Function: getNameArrowFunction]
// }

dongwook.getNameFunction(); 
// 펑션 동욱입니다.

dongwook.getName(); 
// 동욱입니다!!!
// function this : {
//  id: 'dddda321',
//  name: '동욱',
//  'full name': '강동욱',
//  age: 26,
//  getNameFunction: [Function: getNameFunction],
//  getName: [Function: getName],
//  getNameArrowFunction: [Function: getNameArrowFunction]
// }
// 동욱

dongwook.getNameArrowFunction();
// 애로우 펑션 동욱입니당당당당~~
// arrow function this : {}
// undefined

객체 헷갈리는점 정리

1. 객체의 키에 띄워쓰기 한 문자열을 넣고싶다면 "" 으로 감싸면 된다.

const dongwook = {
 "full name": '강동욱',
}

2. 객체의 키에 변수를 넣고싶다면 [ ] 안에 변수를 넣으면 된다.

const a = 'age';

const dongwook = {
  [a] : 26,
};

 

3. 자바스크립트에서는 함수도 값으로 판단하므로 객체안에 넣어 줄 수 있다.

getNameFunction : function () {} 은 getName() {} 와 같이 축약 할 수 있다.

 

4. getNameArrowFunction : () => {} 도 써줄수있지만 this값이 달라진다.

위 코드블럭 출력값 참고 

function this는 자신이 속해있는 객체의 값들을 전부 가지고 있다.

 

arrow function this는 지금 속해있는 함수의 스코프의 상위 스코프를 갖게 된다. 

그래서 지금 이 함수의 상위스코프는 전역 범위기 때문에 this.name은 undefined가 나온다. 

 

참고: https://www.youtube.com/watch?v=fKjJIzvBJcg