๐Ÿ“– ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด

๊ธฐ๋ก์ผ๊ธฐ๐Ÿ“ซยท2020๋…„ 12์›” 6์ผ
1

Javascript ๊ฐœ๋…์ •๋ฆฌ

๋ชฉ๋ก ๋ณด๊ธฐ
1/15

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ฐ์ฒด ๊ธฐ๋ฐ˜์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ด๋ฉฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด๋ฃจ๊ณ  ์žˆ๋Š” ๊ฑฐ์˜ "๋ชจ๋“  ๊ฒƒ"์ด ๊ฐ์ฒด์ด๋‹ค. ๋”ฐ๋ผ์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ •๋ณตํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๊ฐ์ฒด์— ๋Œ€ํ•ด ์ž˜ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•œ๋‹ค.

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๊ฐ์ฒด ์„ ์–ธ ๋ฐฉ์‹ ์ค‘ ํ•˜๋‚˜์ธ ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž.

ํ•ด๋‹น ํฌ์ŠคํŒ…์€ https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics ๋ฅผ ์ฐธ์กฐํ•˜์—ฌ ์ž‘์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.


๊ฐ์ฒด๋ž€?๐Ÿ™„

๊ฐ์ฒด๋ž€ ๋ฌด์—‡์ผ๊นŒ? ๊ฐ์ฒด๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๋ฐฉ์‹ ์ค‘ ํ•˜๋‚˜๋กœ key,value ์Œ์œผ๋กœ ๊ตฌ์„ฑ๋œ๋‹ค.


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

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” prototype ๊ธฐ๋ฐ˜ ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด๋กœ์„œ ๋‹ค์–‘ํ•œ ๊ฐ์ฒด์ƒ์„ฑ ๋ฐฉ๋ฒ•์„ ์ง€์›ํ•œ๋‹ค.

  • ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด
  • Object ์ƒ์„ฑ์ž ํ•จ์ˆ˜
  • ์ƒ์„ฑ์ž ํ•จ์ˆ˜
  • Object.create ๋ฉ”์„œ๋“œ
  • ํด๋ž˜์Šค(ES6)

์˜ค๋Š˜์€ ์ด์ค‘์—์„œ ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์„ ํ†ตํ•œ ๊ฐ์ฒด ์ƒ์„ฑ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž!


๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด

๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด ๋ฐฉ์‹์€ ๊ฐ์ฒด ์ƒ์„ฑ ๋ฐฉ์‹ ์ค‘ ๊ฐ€์žฅ ์ผ๋ฐ˜์ ์ด๊ณ  ๊ฐ„๋‹จํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ, ์ปจํ…์ธ ๋ฅผ ๊ทธ๋Œ€๋กœ ๋Œ€์ž…ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋งํ•œ๋‹ค. (๊ฐœ์ธ์ ์œผ๋กœ๋Š” ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์ด๋ž€ ๋„ค์ด๋ฐ ์ž์ฒด๊ฐ€ ์ง๊ด€์ ์ด์ง„ ์•Š์€ ๊ฒƒ ๊ฐ™๋‹ค)

let myObject = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value
};

์œ„์˜ ํ˜•์‹๊ณผ ๊ฐ™์ด key : value ํ˜•์‹์˜ data๋ฅผ ์ง์ ‘ ์ž…๋ ฅํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.


๊ทธ๋Ÿฌ๋ฉด ์ด์ œ ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด ๋ฐฉ์‹์„ ํ†ตํ•ด์„œ Person์ด๋ž€ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•ด๋ณด์ž!

let person = {
  name: ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  bio: function() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old`);
  },
  greeting: function() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  }
};

์œ„์˜ person ๊ฐ์ฒด์—์„œ bio์™€ greeting์€ ํ•จ์ˆ˜์ด๋‹ค. ๊ฐ์ฒด๋Š” property๋กœ ์ผ๋ฐ˜ ๋ณ€์ˆ˜ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ•จ์ˆ˜ ๋˜ํ•œ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋‹ค.

๊ฐ์ฒด์— ๋ฌถ์ธ ํ•จ์ˆ˜๋Š” ๋ฉ”์„œ๋“œ๋ผ๊ณ  ํ‘œํ˜„ํ•œ๋‹ค.


ํ”„๋กœํผํ‹ฐ ์ ‘๊ทผ

๊ทธ๋ ‡๋‹ค๋ฉด ์„ ์–ธํ•œ ํ”„๋กœํผํ‹ฐ์— ์–ด๋–ป๊ฒŒ ์ ‘๊ทผ ํ•  ์ˆ˜ ์žˆ์„๊นŒ?

๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ•˜๋Š” ๋‘๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค.

๋งˆ์นจํ‘œ ํ‘œ๊ธฐ๋ฒ•

๋งˆ์นจํ‘œ(.)๋ฅผ ํ†ตํ•ด ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ, person.name, person.age ์™€ ๊ฐ™์ด ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ•

๋Œ€๊ด„ํ˜ธ([])๋ฅผ ํ†ตํ•ด ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ, persone['name'], persone['age'] ์™€ ๊ฐ™์ด ์ ‘๊ทผํ•œ๋‹ค.

๋Œ€๊ด„ํ˜ธ๋ฅผ ์จ์„œ ์ ‘๊ทผํ•  ๊ฒฝ์šฐ ''์•ˆ์— ๊ฐ์‹ธ์ฃผ์ง€ ์•Š์œผ๋ฉด name์ด๋ž€ ๋ณ€์ˆ˜์˜ ๊ฐ’์œผ๋กœ ์ธ์‹ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ผญ ๊ฐ์‹ธ์ฃผ์–ด์•ผ ํ•œ๋‹ค.

๋งˆ์นจํ‘œ ํ‘œ๊ธฐ๋ฒ•์„ ์ด์šฉํ•ด person ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ•ด ๋ณด์•˜๋‹ค. ๋ฉ”์„œ๋“œ๋„ ์ ‘๊ทผ ๋ฐฉ์‹์€ ๋™์ผํ•˜๋‹ค.

ํ”„๋กœํผํ‹ฐ ๊ฐ’ ๊ฐฑ์‹  & ์ƒ์„ฑ & ์‚ญ์ œ

๊ฐฑ์‹ 

์ด๋ฏธ ์กด์žฌํ•˜๋Š” property์˜ ๊ฐ’์„ ์ˆ˜์ •ํ•˜๋ฉด ๊ฐฑ์‹ ๋œ๋‹ค. person.name = 'Brown'๊ณผ ๊ฐ™์ด ๊ฐ’์„ ๊ฐฑ์‹ ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ƒ์„ฑ

์กด์žฌํ•˜์ง€ ์•Š๋Š” property์˜ ๊ฐ’์„ ํ• ๋‹นํ•˜๋ฉด ํ”„๋กœํผํ‹ฐ๊ฐ€ ๋™์ ์œผ๋กœ ์ƒ์„ฑ๋œ๋‹ค! person.address = 'Seoul'์ฒ˜๋Ÿผ ์ƒˆ๋กœ์šด property๋ฅผ ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๋‹ค.

์‚ญ์ œ

์‚ญ์ œํ•˜๊ณ ์ž ํ•˜๋Š” property๋ฅผ delete ํ‚ค์›Œ๋“œ๋ฅผ ๋ถ™์—ฌ ์‚ฌ์šฉํ•œ๋‹ค. ์—†๋Š” property์— ์ ‘๊ทผํ–ˆ์„ ์‹œ์— ์—๋Ÿฌ์—†์ด ๋ฌด์‹œ๋œ๋‹ค. delete person.age์™€ ๊ฐ™์ด ์‚ญ์ œ ๊ฐ€๋Šฅํ•˜๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€