[ JavaScript ๋ฌธ๋ฒ• ์ข…ํ•ฉ๋ฐ˜ 1์ฃผ์ฐจ (11)] ๊ฐ์ฒด์™€ ๊ฐ์ฒด ๋ฉ”์†Œ๋“œ

2023. 7. 26. 22:38ใ†2. JS๋ฌธ๋ฒ• ์ข…ํ•ฉ

  • ๊ฐ์ฒด์ƒ์„ฑ

1. ๊ธฐ๋ณธ์ ์ธ ๊ฐ์ฒด ์ƒ์„ฑ : ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค ๋•Œ๋Š” ์ค‘๊ด„ํ˜ธ({})๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ, ์†์„ฑ๊ณผ ๊ฐ’์„ ์ฝœ๋ก (:)์œผ๋กœ ๊ตฌ๋ถ„ํ•˜์—ฌ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ์†์„ฑ๊ณผ ๊ฐ’์€ ์‰ผํ‘œ(,)๋กœ ๊ตฌ๋ถ„ํ•œ๋‹ค.

let person = {
  name: "ํ™๊ธธ๋™",
  age: 30,
  gender: "๋‚จ์ž"
};

2. ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•œ ๊ฐ์ฒด ์ƒ์„ฑ : ์ƒ์„ฑ์ž ํ•จ์ˆ˜ Person()์„ ์‚ฌ์šฉ, ๊ฐ์ฒด person1๊ณผ person2๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ผ๊ด„์ ์œผ๋กœ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑ ํ•  ์ˆ˜ ์žˆ๋‹ค.

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

let person1 = new Person("ํ™๊ธธ๋™", 30, "๋‚จ์ž");
let person2 = new Person("ํ™๊ธธ์ˆœ", 25, "์—ฌ์ž");

 


 

  • ๊ฐ์ฒด ์†์„ฑ ์ ‘๊ทผ : ๊ฐ์ฒด์˜ ์†์„ฑ์— ์ ‘๊ทผํ•  ๋•Œ๋Š” ์ (.)์„ ์‚ฌ์šฉํ•˜์—ฌ ์†์„ฑ ์ด๋ฆ„์„ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค.
let person = {
  name: "ํ™๊ธธ๋™",
  age: 30,
  gender: "๋‚จ์ž"
};

console.log(person.name);   // "ํ™๊ธธ๋™"
console.log(person.age);    // 30
console.log(person.gender); // "๋‚จ์ž"

 


 

  • ๊ฐ์ฒด ๋ฉ”์†Œ๋“œ : ๊ฐ์ฒด๊ฐ€ ๊ฐ€์ง„ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๊ธฐ๋Šฅ

1. Object.keys() ๋ฉ”์†Œ๋“œ : Object.keys() ๋ฉ”์†Œ๋“œ๋Š” ๊ฐ์ฒด์˜ ์†์„ฑ ์ด๋ฆ„์„ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜.

let person = {
  name: "ํ™๊ธธ๋™",
  age: 30,
  gender: "๋‚จ์ž"
};

let keys = Object.keys(person);

console.log(keys);   // ["name", "age", "gender"]

2. Object.values() ๋ฉ”์†Œ๋“œ : Object.values() ๋ฉ”์†Œ๋“œ๋Š” ๊ฐ์ฒด์˜ ์†์„ฑ ๊ฐ’๋“ค์„ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜.

let person = {
  name: "ํ™๊ธธ๋™",
  age: 30,
  gender: "๋‚จ์ž"
};

let values = Object.values(person);

console.log(values);   // ["ํ™๊ธธ๋™", 30, "๋‚จ์ž"]

3. Object.entries() ๋ฉ”์†Œ๋“œ : Object.entries() ๋ฉ”์†Œ๋“œ๋Š” ๊ฐ์ฒด์˜ ์†์„ฑ ์ด๋ฆ„๊ณผ ์†์„ฑ ๊ฐ’๋“ค์„ 2์ฐจ์› ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜.

let person = {
  name: "ํ™๊ธธ๋™",
  age: 30,
  gender: "๋‚จ์ž"
};

let entries = Object.entries(person);

console.log(entries);

4. Object.assign() ๋ฉ”์†Œ๋“œ : ๊ธฐ์กด ๊ฐ์ฒด๋ฅผ ๋ณต์‚ฌํ•˜์—ฌ ์ƒˆ๋กœ์šด ๊ฐ์ฒด newPerson์„ ๋งŒ๋“ ๋‹ค.

let person = {
  name: "ํ™๊ธธ๋™",
  age: 30,
  gender: "๋‚จ์ž"
};

let newPerson = Object.assign({}, person, { age: 35 });

console.log(newPerson);   // { name: "ํ™๊ธธ๋™", age: 35, gender: "๋‚จ์ž" }

5. ๊ฐ์ฒด๋น„๊ต : ๊ฐ์ฒด๋ฅผ ๋น„๊ตํ•  ๋•Œ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ === ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค. JSON.stringify() ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ์ฒด๋ฅผ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•œ ํ›„, ๋ฌธ์ž์—ด ๋น„๊ตํ•œ๋‹ค.

let person1 = {
  name: "ํ™๊ธธ๋™",
  age: 30,
  gender: "๋‚จ์ž"
};

let person2 = {
  name: "ํ™๊ธธ๋™",
  age: 30,
  gender: "๋‚จ์ž"
};

console.log(person1 === person2);   // false
console.log(JSON.stringify(person1) === JSON.stringify(person2));   // true

6. ๊ฐ์ฒด๋ณ‘ํ•ฉ : ๊ฐ์ฒด ๋ณ‘ํ•ฉ์„ ํ•  ๋•Œ๋Š” ์ „๊ฐœ [์—ฐ์‚ฐ์ž(...) [Spread operator] ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

let person1 = {
  name: "ํ™๊ธธ๋™",
  age: 30
};

let person2 = {
  gender: "๋‚จ์ž"
};

let mergedPerson = {...person1, ...person2};

console.log(mergedPerson);   // { name: "ํ™๊ธธ๋™", age: 30, gender: "๋‚จ์ž" }