JavaScript์์ ๊ฐ์ฒด(Object)๋ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ ์ฒ๋ฆฌํ๋ ์ค์ํ ๊ตฌ์กฐ์ด๋ฉฐ, ๊ฐ์ฒด์ ์์ฑ(Properties)์ ๊ฐ์ฒด ๋ด๋ถ์ ์ ์ฅ๋ ๊ฐ์ ๋๋ค. ๊ฐ์ฒด ์์ฑ์ ํค-๊ฐ(Key-Value) ์์ผ๋ก ์ด๋ฃจ์ด์ง๋ฉฐ, ๊ฐ์ฒด๋ฅผ ๊ตฌ์ฑํ๋ ํต์ฌ ์์์ ๋๋ค. ์ด ๊ธ์์๋ JavaScript ๊ฐ์ฒด ์์ฑ์ ๋ํ ๊ฐ๋ , ์์ฑ ์ ์ ๋ฐฉ๋ฒ, ์ ๊ทผ ๋ฐ ์์ ๋ฐฉ๋ฒ์ ๋ค๋ฃจ์ด๋ณด๊ฒ ์ต๋๋ค.
๊ฐ์ฒด ์์ฑ(Property) ์ ์
๊ฐ์ฒด ์์ฑ์ ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ฉด์ ์ ์ํ ์ ์์ผ๋ฉฐ, key
์ value
์ ์์ผ๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค. ๊ฐ key
๋ ๋ฌธ์์ด์ด๋ Symbol์ผ ์ ์์ผ๋ฉฐ, value
๋ ๋ฌธ์์ด, ์ซ์, ๋ถ๋ฆฌ์ธ, ํจ์ ๋ฑ ๋ค์ํ ๋ฐ์ดํฐ ํ์
์ ๊ฐ์ง ์ ์์ต๋๋ค.
let car = {
brand: "Tesla",
model: "Model 3",
year: 2021
};
์ ์์ ์์ ๊ฐ์ฒด car
๋ brand
, model
, year
๋ผ๋ ์ธ ๊ฐ์ง ์์ฑ์ ๊ฐ์ง๊ณ ์์ต๋๋ค. ๊ฐ๊ฐ์ ์์ฑ์ ํด๋น ์๋์ฐจ์ ๋ธ๋๋, ๋ชจ๋ธ, ์ ์กฐ ์ฐ๋๋ฅผ ๋ํ๋
๋๋ค.
๊ฐ์ฒด ์์ฑ์ ์ ๊ทผํ๊ธฐ
๊ฐ์ฒด์ ์์ฑ์ ์ ๊ทผํ๋ ๋ฐฉ๋ฒ์ ๋ ๊ฐ์ง๊ฐ ์์ต๋๋ค: ์ ํ๊ธฐ๋ฒ๊ณผ ๋๊ดํธ ํ๊ธฐ๋ฒ์ ๋๋ค.
์ ํ๊ธฐ๋ฒ
์ ํ๊ธฐ๋ฒ์ ๊ฐ์ฅ ์ง๊ด์ ์ธ ๋ฐฉ๋ฒ์ผ๋ก, ๊ฐ์ฒด์ ํน์ ์์ฑ์ ์ ๊ทผํ ๋ ๊ฐ์ฒด๋ช
.์์ฑ๋ช
์ ์ฌ์ฉํฉ๋๋ค.
console.log(car.brand); // ๊ฒฐ๊ณผ: "Tesla"
console.log(car.year); // ๊ฒฐ๊ณผ: 2021
์ ์ฝ๋์์๋ car
๊ฐ์ฒด์ brand
์ year
์์ฑ์ ์ ๊ทผํ์ฌ ๊ทธ ๊ฐ์ ์ถ๋ ฅํฉ๋๋ค.
๋๊ดํธ ํ๊ธฐ๋ฒ
๋๊ดํธ ํ๊ธฐ๋ฒ์ ์์ฑ ์ด๋ฆ์ ๋ฌธ์์ด๋ก ์ง์ ํด์ผ ํ ๋ ์ฌ์ฉ๋๋ฉฐ, ๋ณ์์ ์์ฑ๋ช ์ ์ ์ฅํด ์ฌ์ฉํ ๋ ์ ์ฉํฉ๋๋ค.
console.log(car["model"]); // ๊ฒฐ๊ณผ: "Model 3"
let property = "year";
console.log(car[property]); // ๊ฒฐ๊ณผ: 2021
์ ์์ ์์ car["model"]
๋ก ์์ฑ์ ์ ๊ทผํ๊ณ , ๋ณ์ property
๋ฅผ ์ฌ์ฉํ์ฌ year
์์ฑ์ ์ ๊ทผํฉ๋๋ค.
๊ฐ์ฒด ์์ฑ ์ถ๊ฐ ๋ฐ ์์
JavaScript์์๋ ๊ฐ์ฒด์ ๋์ ์ผ๋ก ์์ฑ์ ์ถ๊ฐํ๊ฑฐ๋ ๊ธฐ์กด ์์ฑ์ ๊ฐ์ ์์ ํ ์ ์์ต๋๋ค. ์ ํ๊ธฐ๋ฒ ๋๋ ๋๊ดํธ ํ๊ธฐ๋ฒ์ ์ฌ์ฉํด ์ด๋ฅผ ์ฝ๊ฒ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
์์ฑ ์ถ๊ฐ
car.color = "red"; // ์๋ก์ด ์์ฑ ์ถ๊ฐ
console.log(car.color); // ๊ฒฐ๊ณผ: "red"
์ ์ฝ๋์์๋ car
๊ฐ์ฒด์ color
๋ผ๋ ์๋ก์ด ์์ฑ์ ์ถ๊ฐํ๊ณ ๊ฐ์ "red"
๋ก ์ค์ ํ์ต๋๋ค.
์์ฑ ๊ฐ ์์
car.year = 2022; // ๊ธฐ์กด ์์ฑ ์์
console.log(car.year); // ๊ฒฐ๊ณผ: 2022
๊ธฐ์กด ์์ฑ year
์ ๊ฐ์ 2022๋ก ์์ ํ์ต๋๋ค. ๊ฐ์ฒด ์์ฑ์ ์ธ์ ๋ ์ง ์ด๋ ๊ฒ ์ฝ๊ฒ ์์ ํ ์ ์์ต๋๋ค.
๊ฐ์ฒด ์์ฑ ์ญ์
๊ฐ์ฒด์ ํน์ ์์ฑ์ ์ญ์ ํ๋ ค๋ฉด delete
์ฐ์ฐ์๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์์ฑ์ ์ญ์ ํ๋ฉด ํด๋น ์์ฑ์ ๋ ์ด์ ๊ฐ์ฒด์ ์กด์ฌํ์ง ์๊ฒ ๋ฉ๋๋ค.
delete car.model; // model ์์ฑ ์ญ์
console.log(car.model); // ๊ฒฐ๊ณผ: undefined
model
์์ฑ์ ์ญ์ ํ ํ์ ํด๋น ์์ฑ์ ์ ๊ทผํ๋ฉด undefined
๊ฐ ๋ฐํ๋ฉ๋๋ค.
์์ฑ์ ์กด์ฌ ์ฌ๋ถ ํ์ธ
๊ฐ์ฒด์์ ํน์ ์์ฑ์ด ์กด์ฌํ๋์ง ํ์ธํ๋ ค๋ฉด in
์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
console.log("brand" in car); // ๊ฒฐ๊ณผ: true
console.log("model" in car); // ๊ฒฐ๊ณผ: false
์ ์ฝ๋์์ "brand"
์์ฑ์ ๊ฐ์ฒด์ ์กด์ฌํ์ง๋ง, ์์ ์ญ์ ๋ "model"
์์ฑ์ ๋ ์ด์ ์กด์ฌํ์ง ์๊ธฐ ๋๋ฌธ์ false
๊ฐ ๋ฐํ๋ฉ๋๋ค.
์์ฑ์ ์์ฑ ๊ธฐ์ ์
JavaScript ๊ฐ์ฒด์ ๊ฐ ์์ฑ์ ๊ธฐ๋ณธ์ ์ผ๋ก ์์ฑ ๊ธฐ์ ์(Property Descriptor)๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค. ์์ฑ ๊ธฐ์ ์๋ ๊ฐ์ฒด์ ์์ฑ์ด ์ด๋ป๊ฒ ๋์ํ ์ง๋ฅผ ์ ์ํ๋ฉฐ, ์ด๋ฅผ ์ฌ์ฉํด ์์ฑ์ ๋์ฑ ์ธ๋ฐํ๊ฒ ์ ์ดํ ์ ์์ต๋๋ค.
- value: ์์ฑ์ ๊ฐ
- writable: ์์ฑ์ ๊ฐ์ ์์ ํ ์ ์๋์ง ์ฌ๋ถ
- enumerable: ์์ฑ์ ๋ฐ๋ณต๋ฌธ์์ ์ด๊ฑฐํ ์ ์๋์ง ์ฌ๋ถ
- configurable: ์์ฑ์ ์ญ์ ํ๊ฑฐ๋ ์์ฑ ๊ธฐ์ ์๋ฅผ ์์ ํ ์ ์๋์ง ์ฌ๋ถ
์์ฑ ๊ธฐ์ ์๋ Object.defineProperty()
๋ฉ์๋๋ฅผ ์ฌ์ฉํด ์ค์ ํ ์ ์์ต๋๋ค.
์์ฑ ๊ธฐ์ ์ ์ค์ ์์
let person = {
name: "Alice"
};
Object.defineProperty(person, "age", {
value: 25,
writable: false,
enumerable: true,
configurable: false
});
console.log(person.age); // ๊ฒฐ๊ณผ: 25
person.age = 30; // writable: false ์ด๋ฏ๋ก ๊ฐ ๋ณ๊ฒฝ ์ ๋จ
console.log(person.age); // ๊ฒฐ๊ณผ: 25
์ ์ฝ๋์์๋ age
์์ฑ์ ์ ์ํ ๋ writable
์ false
๋ก ์ค์ ํ๊ธฐ ๋๋ฌธ์ ์์ฑ ๊ฐ์ ์์ ํ ์ ์์ต๋๋ค.
๊ฐ์ฒด ์์ฑ์ ์ด๊ฑฐ
for...in
๋ฐ๋ณต๋ฌธ์ ์ฌ์ฉํ๋ฉด ๊ฐ์ฒด์ ์ด๊ฑฐ ๊ฐ๋ฅํ(enumerable) ์์ฑ์ ์์ฐจ์ ์ผ๋ก ํ์ํ ์ ์์ต๋๋ค.
for (let key in car) {
console.log(key + ": " + car[key]);
}
์ ์ฝ๋์์๋ car
๊ฐ์ฒด์ ์ด๊ฑฐ ๊ฐ๋ฅํ ๋ชจ๋ ์์ฑ ํค์ ๊ทธ ๊ฐ์ ์ถ๋ ฅํฉ๋๋ค.
๊ฒฐ๋ก
JavaScript ๊ฐ์ฒด ์์ฑ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ ์กฐ์ํ๋ ๋ฐ ์ค์ํ ์ญํ ์ ํฉ๋๋ค. ์์ฑ์ ๋์ ์ผ๋ก ์ถ๊ฐ, ์์ , ์ญ์ ํ ์ ์์ผ๋ฉฐ, ์์ฑ ๊ธฐ์ ์๋ฅผ ์ฌ์ฉํด ๊ฐ์ฒด์ ๋์์ ๋์ฑ ์ธ๋ฐํ๊ฒ ์ ์ดํ ์ ์์ต๋๋ค. ๊ฐ์ฒด์ ์์ฑ ๊ด๋ฆฌ ๋ฐฉ๋ฒ์ ์ ์ดํดํ๊ณ ๋๋ฉด, ๋ ํจ์จ์ ์ผ๋ก JavaScript ํ๋ก๊ทธ๋จ์ ์์ฑํ ์ ์์ต๋๋ค.
์ด์ ๊ฐ์ฒด ์์ฑ์ ๋ํ ๊ฐ๋ ์ ๋ฐํ์ผ๋ก ๋ค์ํ ํ๋ก์ ํธ์์ ํ์ฉํด ๋ณด์ธ์!
๋๊ธ ์ฐ๊ธฐ