Object.keys, values, entries

RHUK2ยท2022๋…„ 1์›” 30์ผ
0

Javascript

๋ชฉ๋ก ๋ณด๊ธฐ
24/56
post-custom-banner

๐Ÿ“ข 22/05/31 ๋ณต์Šต


๐Ÿ“š Reference


https://ko.javascript.info/keys-values-entries

์ฐธ๊ณ  ์‚ฌ์ดํŠธ์— ๋‚ด์šฉ์„ ๊ฐœ์ธ์ ์œผ๋กœ ๋ณต์Šตํ•˜๊ธฐ ํŽธํ•˜๋„๋ก ์žฌ๊ตฌ์„ฑํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.
์ž์„ธํ•œ ์„ค๋ช…์€ ์ฐธ๊ณ  ์‚ฌ์ดํŠธ๋ฅผ ์‚ดํŽด๋ณด์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.


Object.keys, values, entries


map.keys(), map.values(), map.entries()์™€ ๊ฐ™์ด ์ˆœํšŒ์— ํ•„์š”ํ•œ ๋ฉ”์„œ๋“œ๋“ค์€ ํฌ๊ด„์ ์ธ ์šฉ๋„๋กœ ๋งŒ๋“ค์–ด์กŒ๊ธฐ ๋•Œ๋ฌธ์— ๋ฉ”์„œ๋“œ๋ฅผ ์ ์šฉํ•  ์ž๋ฃŒ๊ตฌ์กฐ๋Š” ์ผ๋ จ์˜ ํ•ฉ์˜๋ฅผ ์ค€์ˆ˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ปค์Šคํ…€ ์ž๋ฃŒ๊ตฌ์กฐ๋ฅผ ๋Œ€์ƒ์œผ๋กœ ์ˆœํšŒ๋ฅผ ํ•ด์•ผ ํ•œ๋‹ค๋ฉด ์ด ๋ฉ”์„œ๋“œ๋“ค์„ ์“ฐ์ง€ ๋ชปํ•˜๊ณ  ์ง์ ‘ ๋ฉ”์„œ๋“œ๋ฅผ ๊ตฌํ˜„ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

keys(), values(), entries()๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ž๋ฃŒ๊ตฌ์กฐ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ Map
๐Ÿ“Œ Set
๐Ÿ“Œ Array

์ผ๋ฐ˜ ๊ฐ์ฒด์—๋„ ์ˆœํšŒ ๊ด€๋ จ ๋ฉ”์„œ๋“œ๊ฐ€ ์žˆ๊ธด ํ•œ๋ฐ, keys(), values(), entries()์™€๋Š” ๋ฌธ๋ฒ•์— ์ฐจ์ด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์ผ๋ฐ˜ ๊ฐ์ฒด์—” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Object.keys(obj)
๊ฐ์ฒด์˜ ํ‚ค๋งŒ ๋‹ด์€ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

Object.values(obj)
๊ฐ์ฒด์˜ ๊ฐ’๋งŒ ๋‹ด์€ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

Object.entries(obj)
[ํ‚ค, ๊ฐ’] ์Œ์„ ๋‹ด์€ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

Map, Set, Array ์ „์šฉ ๋ฉ”์„œ๋“œ์™€ ์ผ๋ฐ˜ ๊ฐ์ฒด์šฉ ๋ฉ”์„œ๋“œ์˜ ์ฐจ์ด๋ฅผ (๋งต์„ ๊ธฐ์ค€์œผ๋กœ) ๋น„๊ตํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋งต๊ฐ์ฒด
ํ˜ธ์ถœ ๋ฌธ๋ฒ•map.keys()Object.keys(obj)(obj.keys() ์•„๋‹˜)
๋ฐ˜ํ™˜ ๊ฐ’iterable ๊ฐ์ฒด"์ง„์งœ" ๋ฐฐ์—ด

์ฒซ ๋ฒˆ์งธ ์ฐจ์ด๋Š” obj.keys()๊ฐ€ ์•„๋‹Œ Object.keys(obj)๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค.

์ด๋ ‡๊ฒŒ ๋ฌธ๋ฒ•์ด ๋‹ค๋ฅธ ์ด์œ ๋Š” ์œ ์—ฐ์„ฑ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์•„์‹œ๋‹ค์‹œํ”ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„  ๋ณต์žกํ•œ ์ž๋ฃŒ๊ตฌ์กฐ ์ „์ฒด๊ฐ€ ๊ฐ์ฒด์— ๊ธฐ๋ฐ˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‹ค ๋ณด๋‹ˆ ๊ฐ์ฒด data์— ์ž์ฒด์ ์œผ๋กœ data.values()๋ผ๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ๊ตฌํ˜„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ์ปค์Šคํ…€ ๋ฉ”์„œ๋“œ๋ฅผ ๊ตฌํ˜„ํ•œ ์ƒํƒœ๋ผ๋„ Object.values(data)๊ฐ™์€ ํ˜•ํƒœ๋กœ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์œผ๋ฉด ์ปค์Šคํ…€ ๋ฉ”์„œ๋“œ์™€ ๋‚ด์žฅ ๋ฉ”์„œ๋“œ ๋‘˜ ๋‹ค๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‘ ๋ฒˆ์งธ ์ฐจ์ด๋Š” ๋ฉ”์„œ๋“œ Object.*๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด iterable ๊ฐ์ฒด๊ฐ€ ์•„๋‹Œ ๊ฐ์ฒด์˜ ํ•œ ์ข…๋ฅ˜์ธ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. "์ง„์งœ" ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ์ด์œ ๋Š” ํ•˜์œ„ ํ˜ธํ™˜์„ฑ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

let user = {
  name: "John",
  age: 30
};

๐Ÿ“Œ Object.keys(user) = ["name", "age"]
๐Ÿ“Œ Object.values(user) = ["John", 30]
๐Ÿ“Œ Object.entries(user) = [ ["name","John"], ["age",30] ]

์•„๋ž˜ ์˜ˆ์‹œ์ฒ˜๋Ÿผ Object.values๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํ”„๋กœํผํ‹ฐ ๊ฐ’์„ ๋Œ€์ƒ์œผ๋กœ ์›ํ•˜๋Š” ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

let user = {
  name: "Violet",
  age: 30
};

// ๊ฐ’์„ ์ˆœํšŒํ•ฉ๋‹ˆ๋‹ค.
for (let value of Object.values(user)) {
  alert(value); // Violet๊ณผ 30์ด ์—ฐ์†์ ์œผ๋กœ ์ถœ๋ ฅ๋จ
}

๐Ÿ”ฅ Object.keys, values, entries๋Š” ์‹ฌ๋ณผํ˜• ํ”„๋กœํผํ‹ฐ๋ฅผ ๋ฌด์‹œํ•ฉ๋‹ˆ๋‹ค.

for..in ๋ฐ˜๋ณต๋ฌธ์ฒ˜๋Ÿผ, Object.keys, Object.values, Object.entries๋Š” ํ‚ค๊ฐ€ ์‹ฌ๋ณผํ˜•์ธ ํ”„๋กœํผํ‹ฐ๋ฅผ ๋ฌด์‹œํ•ฉ๋‹ˆ๋‹ค.

๋Œ€๊ฐœ๋Š” ์‹ฌ๋ณผํ˜• ํ‚ค๋ฅผ ์—ฐ์‚ฐ ๋Œ€์ƒ์— ํฌํ•จํ•˜์ง€ ์•Š๋Š” ๊ฒŒ ์ข‹์ง€๋งŒ, ์‹ฌ๋ณผํ˜• ํ‚ค๊ฐ€ ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—” ์‹ฌ๋ณผํ˜• ํ‚ค๋งŒ ๋ฐฐ์—ด ํ˜•ํƒœ๋กœ ๋ฐ˜ํ™˜ํ•ด์ฃผ๋Š” ๋ฉ”์„œ๋“œ์ธ Object.getOwnPropertySymbols๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. getOwnPropertySymbols ์ด์™ธ์—๋„ ํ‚ค ์ „์ฒด๋ฅผ ๋ฐฐ์—ด ํ˜•ํƒœ๋กœ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋ฉ”์„œ๋“œ์ธ Reflect.ownKeys(obj)๋ฅผ ์‚ฌ์šฉํ•ด๋„ ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค.


๊ฐ์ฒด ๋ณ€ํ™˜ํ•˜๊ธฐ


๊ฐ์ฒด์—” map, filter ๊ฐ™์€ ๋ฐฐ์—ด ์ „์šฉ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ Object.entries์™€ Object.fromEntries๋ฅผ ์ˆœ์ฐจ์ ์œผ๋กœ ์ ์šฉํ•˜๋ฉด ๊ฐ์ฒด์—๋„ ๋ฐฐ์—ด ์ „์šฉ ๋ฉ”์„œ๋“œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ ์šฉ ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๐Ÿ• Object.entries(obj)๋ฅผ ์‚ฌ์šฉํ•ด ๊ฐ์ฒด์˜ ํ‚ค-๊ฐ’ ์Œ์ด ์š”์†Œ์ธ ๋ฐฐ์—ด์„ ์–ป์Šต๋‹ˆ๋‹ค.
๐Ÿ•‘ ์œ„์—์„œ ๋งŒ๋“  ๋ฐฐ์—ด์— map ๋“ฑ์˜ ๋ฐฐ์—ด ์ „์šฉ ๋ฉ”์„œ๋“œ๋ฅผ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค.
๐Ÿ•’ ์œ„์—์„œ ๋ฐ˜ํ™˜๋œ ๋ฐฐ์—ด์— Object.fromEntries(array)๋ฅผ ์ ์šฉํ•ด ๋ฐฐ์—ด์„ ๋‹ค์‹œ ๊ฐ์ฒด๋กœ ๋˜๋Œ๋ฆฝ๋‹ˆ๋‹ค.

์ด ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•ด ๊ฐ€๊ฒฉ ์ •๋ณด๊ฐ€ ์ €์žฅ๋œ ๊ฐ์ฒด prices์˜ ํ”„๋กœํผํ‹ฐ ๊ฐ’์„ ๋‘ ๋ฐฐ๋กœ ๋Š˜๋ ค๋ณด๋„๋ก ํ•ฉ์‹œ๋‹ค.

let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // ๊ฐ์ฒด๋ฅผ ๋ฐฐ์—ด๋กœ ๋ณ€ํ™˜ํ•ด์„œ ๋ฐฐ์—ด ์ „์šฉ ๋ฉ”์„œ๋“œ์ธ map์„ ์ ์šฉํ•˜๊ณ  fromEntries๋ฅผ ์‚ฌ์šฉํ•ด ๋ฐฐ์—ด์„ ๋‹ค์‹œ ๊ฐ์ฒด๋กœ ๋˜๋Œ๋ฆฝ๋‹ˆ๋‹ค.
  Object.entries(prices).map(([key, value]) => [key, value * 2])
);

alert(doublePrices.meat); // 8
profile
์ƒ๊ฐ ๋งŽ์ด ํ•˜์ง€ ์•Š๊ธฐ ๐Ÿ˜Ž
post-custom-banner

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