[HTML+CSS+자바스크립트] 11장 자바스크립트 객체 다루기 (~432p)

안녕하세요!

<코딩 자율학습 HTML+CSS+자바스크립트> 멘토를 당담하게 된 박브레드입니다.

오늘은 열다섯 번째 날로, 자바스크립트 공부 여섯 번째 날입니다!

조금 어려워져도 힘을 내서 같이 공부를 시작해볼까요?

 

오늘 공부할 내용은 다음과 같습니다.

 

🏃 공부할 내용(420~432p)

1. 객체란

2. 객체 속성 다루기

 

1. 객체란

---

객체란 키와 값으로 구성된 속성의 집합을 의미해요.

객체는 {}를 이용해 생성할 수 있는데, 이러한 방법을 리터럴 방식으로 객체를 생성했다하죠.

 

보통 객체를 생성할 땐 다음과 같이 빈 객체로 생성하지 않고 속성을 지정한 상태로 생성해요.

객체의 속성을 추가할 때, 줄 바꿈하지 않아도 되지만 가독성을 위해 줄 바꿈하는 것을 추천드려요! 

const person = { 
	name: "Hone Gildong"
};

 

객체는 모든 자료형의 데이터를 값으로 가져요.

배열, 숫자, 논리 데이터를 다음과 같이 한 객체의 속성으로 추가할 수 있죠!

const person = {
  name: ["Hong", "Gildong"],
  age: 20,
  isAdult: true,
};

 

물론 객체 안에 또 다른 객체나 함수가 들어갈 수도 있어요!

보통 객체의 키는 문자열로 작성한답니다.

const person = {
  name: {
    firstName: "Gildong",
    lastName: "Hong",
  },
  age: 20,
  isAdult: true,
  printInfo: function () {
    console.log("printInfo");
  },
};

 

2. 객체 속성 다루기

---

2.1 객체 속성에 접근하기

앞서 배웠던 배열에서는 인덱스로 속성에 접근할 수 있었는데 객체에서는 어떻게 접근할까요?

대괄호 연산자로 접근하는 방법과, 마침표 연산자를 사용해 접근할 수 있는 방법이 있습니다.

 

먼저, 대괄호 연산자로 접근하는 방법을 살펴볼까요?

 

✅ 대괄호 연산자로 접근하는 방법

대괄호 연산자는 []를 사용해 객체의 속성에 접근하는 방법이에요! (배열에서도 물론 사용할 수 있답니다.)

대괄호 안에 키를 넣어야 하는데 반드시 따옴표로 감싼 문자열 형태로 작성해야 합니다.

const person = {
  name: "Hong Gildong",
  age: 20,
};
console.log(person["name"]);
console.log(person["age"]);

 

아까 객체에 배열과 함수도 들어갈 수 있다고 했었죠?

그럴 경우에는 어떻게 접근할까요?

const person = {
  name: {
    firstName: "Gildong",
    lastName: "Hong",
  },
  likes: ["apple", "samsung"],
  printHello: function () {
    return "hello";
  },
};

 

다음 코드를 해석해보면 키가 name인 속성에 접근하는데, 이 속성의 값은 객체 리터럴입니다.

console.log(person["name"]);

 

그래서 다시 대괄호 연산자를 연속적으로 사용해보면 객체안에 있는 속성에도 접근할 수 있습니다.

console.log(person["name"]["firstName"]);

 

속성값이 배열일 때와 함수일 때도 동일하게 적용됩니다~!!

 

✅ 마침표 연산자로 접근하는 방법

마침표 연산자는 .를 이용해 객체 속성에 접근할 수 있어요!

const person = {
  name: {
    firstName: "Gildong",
    lastName: "Hong",
  },
  likes: ["apple", "samsung"],
  printHello: function () {
    return "hello";
  },
};

console.log(person.name.firstName); // Gildong
console.log(person.likes[0]); // apple
console.log(person.printHello()); // hello

 

2.2 객체 속성값 변경하기

속성값에 접근해봤으니 다음으로 속성값을 변경해볼까요?

아까 썼던 마침표 연산자를 사용해서 변경을 할 수 있는데요.

 

다음과 같이 손쉽게 바꿀 수 있는 것을 볼 수 있어요~

const person = {
  name: "Hong Gildong",
};

person.name = "홍길동";
console.log(person.name); // 홍길동

 

2.3 객체 속성 동적으로 추가하기

이미 만들어진 객체에 나중에 속성을 추가하는 것을 속성을 동적으로 추가한다고 합니다.

 

객체 속성에 값을 할당해 접근하면 해당 속성이 존재하는지 확인하고,

없는 속성이면 해당 키와 값으로 구성된 새로운 속성을 객체에 추가해요!

const person = {};
console.log(person);
person.name = "Hong Gildong";
console.log(person); // { name: 'Hong Gildong' }

정리해보면, 객체 식별자와 키에 마침표 연산자를 사용하면 객체의 속성에 접근할 수 있고,

속성에 접근해서 할당 연산자로 값을 할당하면 값이 변경되거나 새로운 속성이 추가돼요!

 

 

2.4 객체 속성 독적으로 삭제하기

동적으로 추가하는 걸 배웠으니 삭제하는 것도 알아봐야겠죠?

간단히 객체 속성에 접근할 때 앞에 delete 키워드를 명시하면 속성이 삭제돼요. 매우 간단합니다.

const person = {
  name: "Hong Gildong",
};
delete person.name;
console.log(person); // {}

 

2.5 객체의 데이터 관리 방법 이해하기

💡 멘토 TIP

책에 자세히 나와있으나, 다음 블로그를 더 참고하셔도 좋을 것 같아요!

얕은 복사와 깊은 복사에 대해서 더 자세히 공부해볼 수 있습니다.

[JS] 참조 타입의 얕은 복사와 깊은 복사(Shallow Copy & Deep copy)

 

제가 공부한 내용을 보고 궁금한 점이 있으면 댓글을 남겨 주세요.
확인하고 답변해 드리겠습니다. 
그럼 내일 다시 만나요!

 

✅ 정리

1. 객체란
2. 객체 속성 다루기

2.1 객체 속성에 접근하기 -> 대괄호 연산자, 마침표 연산자

2.2 객체 속성값 변경하기

2.3 객체 속성 동적으로 추가하기

2.3 객체 속성 동적으로 삭제하기 delete