객체 리터럴

객체 리터럴

관련된 여러 데이터를 하나로 안묶고 따로 관리하는 것은 비효율적이다.

예를 들어 person 이라는 객체에서 이름, 나이, 주소 등을 나타낼 수 있는 것을 객체에 담지 않고 다 따로따로 관리하는 것은 비효율적인 방법이다.

this

객체 내에 선언된 함수에서 객체에 선언된 다른 멤버를 사용하는 경우에 this로 프로퍼티를 지칭한다.

➡️ this 는 어떤 객체 내에서 객체 자신을 지칭하는 예약어이다.

let user = {	
  	name: '홍길동',
    age: 20,
  	isMember: true,
    sayHello: function() {
    	console.log(${this.name},${this.age})
    },
  	sayHellog: () => {
     console.log(${this.name}, ${this.age} )
    }
    
    user.sayHello() // 홍길동, 20
	user.sayHello2() // undefined
}

❗️ function으로 등록한 함수에서는 this 는 객체를 지칭하지만 화살표 함수로 등록한 함수는 등록된 객체를 지칭하지 못한다!

➡️ 객체 내의 화살표 함수는 사용해도 상관없지만 this 가 객체 자신을 지칭하지 못한다는 문제가 있다.

화살표 함수는 간단하게 함수를 선언해서 이용하는 경우에 사용하며 this를 사용하지 않는 경우 사용하는 것을 권장한다.

👀 왜 꼭 this를 사용해야할까?

그냥 변수를 그대로 사용하면 되는데 왜 메서드 안에서 꼭 this 를 사용하는 것일까?

this를 사용하는 이유는 객체 내부의 자신의 속성에 접근하기 위해서이다.

자바스크립트는 현재 스코프에서 변수를 찾으려고 하겠지만 현재 스코프에서는 변수를 찾을 수가 없다.
(현재 스코프: 객체 내의 메서드o, 객체x --> 객체에서 선언된 변수 찾을 수 없음)

따라서 this를 이용하여 현재 객체에 접근하여 변수를 가져오는 것이다.

✔️ this를 사용하는 예시

const img = 'globalImage.jpg'; // 전역 변수
const user = {
  img: 'userImage.jpg',
  name: 'John',
  message: 'Hello',

  userMsg: function () {
    console.log(`${img}, ${this.img}, ${this.name}, ${this.message}`);
  },
};

user.userMsg(); // 출력: globalImage.jpg, userImage.jpg, John, Hello

이 예시를 보면 userMsg라는 함수는 객체에 접근하지 못하였기 때문에 this를 사용하지 않고 그냥 변수를 사용하면 객체 내의 변수를 출력하지 않고, 전역 변수를 출력한다.
(스코프 개념으로 이해하자!)

축약형 프로퍼티

프로퍼티 명과 대입되는 변수명이 동일한 경우 축약형으로 등록이 가능하다.

let user = {
	name,
  	age,
  	sayHello: function() {
     	console.log() 
    }
}