[JavaScript] 객체와 property

😊 최근 JavaScript로 알고리즘 문제를 풀며, 객체에 대한 이해가 부족하다고 느꼈다. 이중배열까지는 익숙하게 사용가능하지만, 객체에 정보를 저장하고 접근하는데에 미숙하다는 생각이 들어 이에 대해 학습하고 기록을 남긴다 📝💛

객체란?

---

• 중괄호 {...} 안에 키(key) : 값(value)의 쌍으로 구성된 property를 넣어 만듦
• 키(key)엔 문자형, 값(value)엔 자료형이 허용됨
• 책에 책갈피를 꽂아놓는 것과 같다. 키(key)는 책갈피의 이름에 해당되고, 값(value)는 책의 페이지에 해당된다. 따라서, 책갈피로 해당 페이지를 쉽게 찾아볼 수 있듯이 키(key)로 값(value)을 쉽게 찾을 수 있다.

객체 만드는 방법

---

1. 객체 생성자

let user = new Object();

2. 객체 리터럴

object literal이라고 부르며, 주로 이 방법을 사용한다.

let user = {};

const로 선언된 객체의 수정

---

• const로 선언된 객체는 수정 가능하다.
• const는 객체의 값을 고정하지만, 그 내용은 고정하지 않는다.
  ◾ 아래에서 hyerin=... 자체를 설정하려고 하면 오류 발생하지만, age나 hometown과 같은 내용을 바꾸는 것은 가능하다.

const hyerin = {
	age : 25, 
  	hometown : seoul, 
}

hyerin.age = 30;

alert(hyerin.age); // 30

property란?

---

프로퍼티(property)는 중괄호{...} 안의 키:값의 쌍

• 아래의 객체 hyerin에는 2개의 property가 있다는 것을 알 수 있다.

let hyerin = {
	age : 25,  // 키: "age", 값: "25"
  	hometown : seoul, // 키: "hometown", 값: "seoul"
}

property 접근 방법

---

객체의 프로퍼티는 점.표기법과 대괄호[]표기법을 사용하여 접근한다.

(1) 기본

let appleProperties = "color";

let apple = {
	color : "red",  
}

// 점 표기법
console.log(apple.color);

// 대괄호 표기법 1. 문자열로 접근
console.log(apple["color"]);
            
// 대괄호 표기법 2. 변수로 접근
console.log(apple[appleProperties]);

(2) 배열 요소가 객체

배열 요소가 객체일 때, 배열의 0번째 index인 요소의 name 프로퍼티에 접근해보자.

let fruitsName = "name";

let fruits = [
    {
		name: "apple",
      	color : "red",  
	},
    {
		name: "banana",
      	color : "yellow",  
	},
]

// 점 표기법
console.log(fruits[0].name);

// 대괄호 표기법 1. 문자열로 접근
console.log(fruits[0]["name"]);
            
// 대괄호 표기법 2. 변수로 접근
console.log(fruits[0][fruitsName];

추가 연산자

---

1. delete

delete 연산자를 사용해 property를 삭제할 수 있다.

delete object.property;

2. in

in 연산자는 "key" in object 와 같이 사용되며, 이를 통해 property의 존재여부를 확인할 수 있다.

✅ 예시

let fruit = { 
  name: "apple", 
  count: 10, 
};
alert( "count" in fruit ); // true
alert( "taste" in fruit ); // false

✅ 문법

"key" in object

3. for...in 반복문

객체의 모든 키를 순회할 수 있는 for...in 반복문

• for (key in object) { } 의 형태로 쓰이며, key 말고 다른 변수명을 사용해도 된다.

let fruit = { 
  name: "apple", 
  color: "yellow",
  count: 10, 
};

// fruit의 모든 property 출력
for (key in object) { 
	// 키
  	alert(key) // name, color, count
  	// 키에 해당하는 값
	alert(fruit[key]) // apple, yellow, 10
}

참고

---

아래글을 참고하며 개인적으로 공부한 내용을 정리한 글입니다.

• 모던자바스크립트 객체
• [JavaScript]객체의 프로퍼티를 접근하는 방법