[Javascript] 자바스크립트에서의 객체(프로퍼티, 객체 복사, 대괄호를 통한 동적 접근..)

자바스크립에는 여러 중요한 데이터 구조들이 존재하지만,

그 중 객체는 가장 중요한 데이터 구조이다.

 

이번 글에서 알아볼 내용 

• 객체란?
• 프로퍼티(추가, 수정, 삭제)
• 객체를 복사하는 두가지 방법
• 대괄호를 이용한 동적 접근

1. 객체란?

앞서 객체가 가장 중요한 데이터 구조라 하였는데, 왜일까?

현실에 존재하는 개체를 나타낼 때 사용되기 때문이다.

예를들어 아주 복잡한 코드가 존재한다할때..프로그래머가 아닌 다른 사람들이 볼때는 이게 도대체 뭘 의미하는지 모를것이다. 하지만, 아래 코드를 보자

const movieData = {
  title: "기생충",
  desc: "ㅁㄴㅇㄹ",
  rate: 5
}

-> 누가 보아도 영화와 관련되어있는 것을 알 수 있다.

이처럼 객체는 현실에 있는 개체를 설명하고, 인간에게 있어서 말이되는(이해되는) 코드를 작성할 수 있게해준다

 

2. 프로퍼티

만약 객체가 이미 존재하는 상황에서 어떠한 이유에 의해서 객체에 새로운 프로퍼티를 추가, 편집해야한다면 어떻게 해야할까?

const person = {
  name: "messi",
  num: 10,
  age: 36,
  dummy: () => {
    alert("messi");
  },
};
person.team = "PSG";
person.num = 30;

console.log(person);

-> 객체명.프로퍼티로 접근하여 값을 추가하거나 수정한다는 것은 알겠는데, 특이한점이 있다..원래 객체에는 team이라는 프로퍼티가 없었는데 어떻게된걸까?

  -> 객체는 정의되어있지 않는 프로퍼티라도 접근할 수 있으며, undefind이지만, 값을 할당할 수 있다

 

삭제하는 방법은 조금 다르다

delete person.team;

-> delete라는 키워드를 앞에 붙이고 삭제하고 싶은 프로퍼티에 접근하면된다

 

3. 객체 복사

• 스프레드 연산자 이용
  • 배열과 마찬가지로 객체 또한 스프레드 연산자를 사용할 수 있다
• Object.assign() 이용
  • Object.assign(새로운 객체, 복사할 객체)

 

4. 대괄호 동적 접근

객체를 정의할때, 객체의 프로퍼티가 동적인 값(ex, 사용자 입력값)이면 어떻게 처리해야할까?

[]를 이용하면된다

const userInput = prompt() 처럼 입력값을 변수에 저장하고,

const person = {
  name: "messi",
  num: 10,
  age: 36,
  dummy: () => {
    alert("messi");
  },
  [userInput]: 123,
};

위 코드처럼 받을 수 있다.