[JavaScript] Object(๊ฐ์ฒด)

link717ยท2020๋…„ 9์›” 19์ผ
0

JavaScript

๋ชฉ๋ก ๋ณด๊ธฐ
9/17
post-thumbnail

๐Ÿ’Ž Object(๊ฐ์ฒด)

์—ฐ๊ด€๋œ ํ•จ์ˆ˜/ ์—ฐ๊ด€๋œ ๋ณ€์ˆ˜๋“ค์„ groupingํ•˜์—ฌ ์ •๋ฆฌํ•˜๋Š” ์—ญํ• ๋กœ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ์ผ์ข…์˜ ํด๋” ์—ญํ• ๋กœ ์ดํ•ดํ•˜๋ฉด ๋œ๋‹ค. ๊ฐ์ฒด๋Š” โ‘ {}(์ค‘๊ด„ํ˜ธ)๋กœ ๊ฐ์‹ธ์ ธ ์žˆ๊ณ  โ‘ก ์ฝœ๋ก (:)์œผ๋กœ ๊ตฌ๋ถ„๋œ key/value ์Œ๋“ค์ด โ‘ข,(์‰ผํ‘œ)์œผ๋กœ ๋ถ„๋ฆฌ๋œ ๋ชฉ๋ก์˜ ํ˜•ํƒœ์ด๋‹ค.(property์˜ ์ด๋ฆ„์„ ์ค‘๋ณต๋  ์ˆ˜ ์—†๋‹ค.) ๊ฐ์ฒด์˜ key์—๋Š” space, ํ•œ๊ธ€, ํŠน์ˆ˜๋ฌธ์ž ๋“ฑ์ด ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ๋‹ค. ๋งŒ์•ฝ key ๊ฐ’์— ํŠน์ˆ˜๋ฌธ์ž๊ฐ€ ์—†๋‹ค๋ฉด ' '๋ฅผ ์ƒ๋žตํ•˜๊ณ  key๊ฐ’์„ ์“ธ ์ˆ˜ ์žˆ๋‹ค.

let difficult = {
  'my name': 'boong',
  color: 'silver',
  ํ‚ค: 'ํ•œ๊ธ€์ธ ํ‚ค๋Š” ๋”ฐ์˜ดํ‘œ๊ฐ€ ์—†์–ด๋„ ๋˜๋Š”๊ตฐ!!',
  '!ํ‚ค': '๋Š๋‚Œํ‘œ ์žˆ๋Š” ํ‚ค๋Š” ๋”ฐ์˜ดํ‘œ๊ฐ€ ํ•„์š”ํ•˜๊ตฐ',
  $special: '$๋Š” ์—†์–ด๋„ ๋˜๋Š”๊ตฐ'
};
  • ๋ณดํ†ต . notation์€ obj ์•ˆ์— ์ •ํ™•ํ•œ key ๊ฐ’์˜ value๊ฐ€ ์žˆ์„ ๋•Œ ์‚ฌ์šฉํ•˜๊ณ  ์‹ค์‹œ๊ฐ„์œผ๋กœ key ๊ฐ’์˜ ์ •๋ณด๋ฅผ ๋ฐ›์•„์•ผํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” [] notaion์„ ์‚ฌ์šฉํ•œ๋‹ค.
function printValue(obj, key) {
  console.log(obj.key);   // โ€บundefined โ†’ obj์— key๋ผ๋Š” property๊ฐ€ ์žˆ๋Š”์ง€ ํ™•์ธ
  console.log(obj[key];   // โ€บellie
}

printValue(ellie, 'name');

๐Ÿš› ๊ฐ์ฒด ์ ‘๊ทผ ๋ฐฉ๋ฒ•

  • dot(.) notation: ์†์„ฑ ๊ฐ’๋“ค ํ˜น์€ ๋‚ด์žฅ ๊ฐ์ฒด์— ์ ‘๊ทผํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋ฉฐ, ์กด์žฌํ•˜์ง€ ์•Š๋Š” ์†์„ฑ์— ์ ‘๊ทผํ•˜๋ ค๊ณ ํ•˜๋ฉด undefined๊ฐ€ return ๋œ๋‹ค. ์ˆซ์ž๋กœ ์‹œ์ž‘ํ•˜๋Š” ์†์„ฑ/๋ณ€์ˆ˜ํ˜•ํƒœ์˜ ์†์„ฑ์€ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์—†๋‹ค.
[์˜ˆ์‹œ]
OK     โ€บ obj.prop_1, obj.prop$
Not OK โ€บ obj.1prop, obj.prop name
  • bracket([]) notation: dot notation๊ณผ ๊ฐ™์ด ๊ฐ์ฒด ์ ‘๊ทผ์‹œ ์‚ฌ์šฉํ•œ๋‹ค. dot๊ณผ ๋‹ค๋ฅด๊ฒŒ white space ํ˜น์€ string ํ˜•ํƒœ์˜ ํŠน์ˆ˜๋ฌธ์ž ํ˜•ํƒœ์—๋„ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๊ณ , ์ˆซ์ž๋กœ ์‹œ์ž‘ํ•˜๋Š” ์†์„ฑ/๋ณ€์ˆ˜๋„ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•˜๊ณ  ์‹ถ์„ ๋•Œ๋Š” ""์™€ ํ•จ๊ป˜ bracket notation์„ ์‚ฌ์šฉํ•œ๋‹ค.
[์˜ˆ์‹œ]
OK โ€” obj["1prop"], obj["prop name"]
let plan1 = {   
  name: "Basic"
};

let propertyName = "name";

console.log(plan1[propertyName]);
console.log(propertyName);

โ€บBasic
โ€บname

๐Ÿš™ ๊ฐ์ฒด์˜ key ์ถ”๊ฐ€ ๋ฐ ์‚ญ์ œ

  • ์†์„ฑ ์ถ”๊ฐ€: =์„ ํ†ตํ•ด์„œ ๊ฐ์ฒด๋ฅผ ์ถ”๊ฐ€(key=value ํ˜•ํƒœ)ํ•˜๊ฑฐ๋‚˜ ๊ธฐ์กด์˜ ์†์„ฑ๋“ค์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค. ๋งŒ์•ฝ ์ด๋ฏธ ๊ฐ์ฒด์— ์žˆ๋˜ ์†์„ฑ์ด๋ผ๋ฉด ์ƒˆ๋กœ์šด ๊ฐ’์œผ๋กœ ๋Œ€์ฒด๋  ์ˆ˜ ์žˆ๊ณ , ์—†๋˜ ์†์„ฑ์ด๋ผ๋ฉด ๊ฐ์ฒด์— ์ƒˆ๋กญ๊ฒŒ ์ถ”๊ฐ€๋  ์ˆ˜ ์žˆ๋‹ค.
const spaceship = {type: 'shuttle'};
spaceship = {type: 'alien'};
โ€บ TypeError: Assignment to constant variable.

spaceship.type = 'alien';
โ€บ spaceship = {type: "alien"};

spaceship.speed = 'Mach 5';
โ€บ spaceship = {type: "alien", speed: "Mach 5"};
  • ์†์„ฑ ์‚ญ์ œ: delete operator๋ฅผ ํ†ตํ•ด ๊ฐ์ฒด์˜ ์†์„ฑ์„ ์‚ญ์ œํ•  ์ˆ˜ ์žˆ๋‹ค.
const spaceship = {
  'Fuel Type': 'Turbo Fuel',
  homePlanet: 'Earth',
  mission: 'Explore the universe' 
};

delete spaceship.mission;
spaceship;

โ€บ{type: "alien", speed: "Mach 5"}

๐Ÿš– ๊ฐ์ฒด์˜ ์ƒ์„ฑ

  • Property value shorthand
const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3};
const person3 = new Person('ellie, 30);
  • Constructor
function Person(name, age) {
// this = {}; ์ด ์ƒ๋žต๋จ
  this.name = name;
  this.age = age;
// return this; ์ƒ๋žต๋จ
}

๐Ÿšจ ๊ฐ์ฒด๋Š” reference๋กœ ์ €์žฅ๋œ๋‹ค.

๊ฐ์ฒด๋ฅผ ๋ณ€์ˆ˜์— ์ €์žฅํ•˜๋ฉด ๊ฐ์ฒด literal ์ž์ฒด๊ฐ€ ์ €์žฅ๋œ๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ reference๊ฐ€ ์ €์žฅ๋œ๋‹ค. text๋Š” ๋ณ€์ˆ˜์— ์ €์žฅํ•˜๋ฉด text ์ž์ฒด๊ฐ€ ์ €์žฅ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ณ€์ˆ˜๋ช…์ด ๋‹ฌ๋ผ๋„ text ๊ฐ’์ด ๊ฐ™์œผ๋ฉด ์„œ๋กœ ๊ฐ™๋‹ค(true)๊ณ  ํ‘œํ˜„ํ•œ๋‹ค. ํ•˜์ง€๋งŒ ๊ฐ์ฒด๋Š” ์ €์žฅํ•  ๋•Œ ๊ฐ์ฒด ์ž์ฒด๋ฅผ ์ €์žฅํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ์ฒด์˜ ๋ณ€์ˆ˜๋ผ๋ฆฌ ๊ฐ™์€์ง€๋ฅผ ๋น„๊ตํ•˜๋ฉด ์„œ๋กœ ๊ฐ™์ง€ ์•Š์€(false)๊ฒƒ์œผ๋กœ ์ธ์‹ํ•œ๋‹ค. ํ•˜์ง€๋งŒ ๊ฐ์ฒด ๋‚ด๋ถ€์˜ ํ”„๋กœํผํ‹ฐ ๊ฐ’๋ผ๋ฆฌ ๋น„๊ตํ•  ๋•Œ๋Š” ๊ฐ™์Œ/๋‹ค๋ฆ„ ์—ฌ๋ถ€๋ฅผ ํŒ๋‹จํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿšš ๊ฐ์ฒด ์ˆœํšŒํ•˜๊ธฐ

๊ฐ์ฒด๋Š” ์ˆœ์„œ๊ฐ€ ์—†๊ณ  ํ‚ค๋ฅผ ํ†ตํ•ด์„œ๋งŒ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ํ•˜์ง€๋งŒ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ด์œ ๋กœ ๊ฐ์ฒด์— ์žˆ๋Š” ๋ชจ๋“  ํ‚ค์— ํ•œ๋ฒˆ์”ฉ ์ ‘๊ทผํ•ด์•ผํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์จ์•ผํ•œ๋‹ค๋ฉด ๊ฐ€๋Šฅํ•œ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค. ๋‹ค๋งŒ ๋ช…ํ™•ํ•˜๊ฒŒ ์ •ํ•ด์ง„ ์ˆœ์„œ๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ์ฒด์˜ ์ˆœํšŒ๋Š” '์ˆœ์„œ๊ฐ€ ๋ณด์žฅ๋˜์ž ์•Š์€ ์ˆœํšŒ'๋ผ๊ณ  ํ•œ๋‹ค.

โ‘ Object.keys(๊ฐ์ฒด์ด๋ฆ„): ์–ด๋–ค ๊ฐ์ฒด๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ํ‚ค๋“ค์˜ ๋ชฉ๋ก์„ ๋ฐฐ์—ด๋กœ returnํ•˜๋Š” method์ด๋‹ค.

โ‘กObject.values(๊ฐ์ฒด์ด๋ฆ„): ์–ด๋–ค ๊ฐ์ฒด๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ฐ’๋“ค์˜ ๋ชฉ๋ก์„ ๋ฐฐ์—ด๋กœ returnํ•˜๋Š” method์ด๋‹ค.

โ‘ขObject.entries(๊ฐ์ฒด์ด๋ฆ„): ์–ด๋–ค ๊ฐ์ฒด๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ํ‚ค:๊ฐ’ ํ˜•ํƒœ์˜ ๊ฐ์ฒด๋ฅผ์„ 2์—ด์งœ๋ฆฌ ๋ฐฐ์—ด๋กœ returnํ•˜๋Š” method์ด๋‹ค.

const obj = {
 name: 'melon',
 weight: 4350,
 price: 16500,
 isFresh: true
}

Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

โ€บ["name", "weight", "price", "isFresh"]

๐Ÿฟ ๊ฐ์ฒด๋ฅผ ์ˆœํ™˜ํ•˜๋Š” for-in๋ฌธ

const arr = ['coconut', 'banana', 'pepper', 'coriander'] 

for (let i in arr) {
  console.log(i)
  console.log(arr[i])
}

๐ŸšŒ ๊ฐ์ฒด ๋ณต์ œํ•˜๊ธฐ

  • Fun cloning: Object.assign(dest, [obj1, obj2, obj3...])
user = { name: 'ellie', age: 20 };

const user4 =  Object.assign({}, user);
console.log(user4);

โ€บ { name: 'ellie', age: 20 }
const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2};
// ๊ฐ’์ด ์ค‘๋ณต๋˜๋Š”๊ฒŒ ์žˆ๋‹ค๋ฉด ๋’ค์˜ ๊ฐ์ฒด๊ฐ€ ์•ž์˜ ๊ฐ์ฒด value๋ฅผ ๋ฎ์–ด์“ด๋‹ค.
console.log(mixed.color);
console.log(mixed.size);

โ€บblue
โ€บbig
profile
Turtle Never stop

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