자바스크립트 객체, 구조분해할당

자바스크립트 객체

객체를 가지고 뭘 할 수 있는지 처음 자바 스크립트를 시작한지 얼마 안된사람들이 객체 사용법에 대해서 정리가 안 되어 있으면 다른사람이 작성했던 코드를 읽을때 무슨 문법인지 모르는경우가 있습니다.

그럴때는 이글을 읽으면 좋을것입니다.

 

처음에는 객체를 어떻게 쓰는지 알아봅시다.

const a = "age";
const obj1 = {
  id: 1,
  name: "김동욱",
  [a]: 3,
};
console.log(obj1);

 

 

const a = "age";
const obj1 = {
  id: 1,
  name: "김동욱",
  [a]: 3,
  getNameFunction: function () {
    console.log("김동욱입니다");
  },
};
console.log(obj1);
obj1.getNameFunction();

 

const a = "age";
const obj1 = {
  id: 1,
  name: "김동욱",
  [a]: 3,
  getName1Function: function () {
    console.log("김동욱입니다1");
  },
  getName2Function() { // function 생략가능
    console.log("김동욱입니다2");
  },
};
console.log(obj1);
obj1.getName1Function();
obj1.getName2Function();

 

 

const a = "age";
const obj1 = {
  id: 1,
  name: "김동욱",
  [a]: 3,
  getName1Function: function () {
    console.log("김동욱입니다1");
  },
  getName2Function() {
    console.log(this.name);
  },
};
console.log(obj1);
obj1.getName1Function();
obj1.getName2Function();

 

 

 

const a = "age";
const obj1 = {
  id: 1,
  name: "김동욱",
  [a]: 3,
  getName1Function: function () {
    console.log("김동욱입니다1");
  },
  getName2Function() {
    console.log("function this", this);
    console.log(this.name);
  },

  getName3Function: () => {
    console.log("function this", this);
    console.log(this.name);
  },
};
console.log(obj1);
obj1.getName1Function();
obj1.getName2Function();
obj1.getName3Function();

 

 

function this는 여기있는 이 객체에 값들을 전부 가지고 있지만

arrow function 의 this는 아무것도 안가지고 있습니다

arrow function의 this가 갖고 있는것은 이함수의 상위 스코프를 가지고 있어서 아무것도 안나오는 것이다.

 

구조분해할당

 

const obj1 = {
  id: 1,
  name: "김동욱",
  age: 3,
  habit: "coding",
};

// const id = obj1.id;
// const name = obj1.name;
// const age = obj1.age;
// const habit = obj1.habit;

const {id,name,age,habit}=obj1