๐ข 22/05/31 ๋ณต์ต
https://ko.javascript.info/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