์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- ๋ฐฑ์ค 1339๋ฒ nodejs
- suspense ๋ณ๋ชฉํ์
- suspense ๋์์๋ฆฌ
- ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ์์ด ์์ถ
- ๋ฐฑ์ค 1339๋ฒ js
- ์ค์ฝํ
- emotion RSC
- js
- ๋ฐฑ์ค 2108 nodejs
- ์๋ฐ์คํฌ๋ฆฝํธ ์ค์ฝํ
- ํ๋ก๊ทธ๋๋จธ์ค ๊ฑฐ๋ฆฌ๋๊ธฐ ํ์ธํ๊ธฐ
- ํ๋ก๊ทธ๋๋จธ์ค ๋ฌธ์์ด ์์ถ
- ๋ฆฌ์กํธ์ฟผ๋ฆฌ suspense
- next13 emotion
- ๊ตฌ๋ฆํค ์ฑ๋ฆฐ์ง ํ๊ณ
- ๋ฐฑ์ค 1339๋ฒ ์๋ฐ์คํฌ๋ฆฝํธ
- ๊ตฌ๋ฆํค
- js ๊ฑฐ๋ฆฌ๋๊ธฐ ํ์ธํ๊ธฐ
- ๊ตฌ๋ฆํค ์ฑ๋ฆฐ์ง
- emtion app router
- js ๋ฌธ์์ด ์์ถ
- suspense react-query
- app router emotion
- js ์ค์ฝํ
- suspense ๋น๋๊ธฐ
- ์นด์นด์ค ์ฝํ
- TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more:
- ์ต์ ๋์ฒด์ด๋
- ์ฌ์ฉ์ฑ ๊ฐ์
- ๋ฐฑ์ค 2108 ์๋ฐ์คํฌ๋ฆฝํธ
- Today
- Total
Lennon FE
[JavaScript] Array, Set, Map์ ํตํด ์์๋ณด๋ ์ดํฐ๋ฌ๋ธ/์ดํฐ๋ ์ดํฐ ๋ณธ๋ฌธ
[JavaScript] Array, Set, Map์ ํตํด ์์๋ณด๋ ์ดํฐ๋ฌ๋ธ/์ดํฐ๋ ์ดํฐ
Lennon 2022. 7. 19. 00:30Array๋ฅผ ์ํํ๋ ๋ฐฉ๋ฒ์ ์ฌ๋ฌ๊ฐ์ง ๋ฐฉ๋ฒ์ด ์๋ค.
๊ณ ์ ์ ์ด๋ผ๋ฉด
const arr = [1,2,3,4,5]
for(let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
์ด๋ ๊ฒ ์ํ๋ฅผ ํ ๊ฒ์ด๊ณ ,
forEach, filter, reduce, map ๋ฑ๋ฑ ๋ฐฐ์ด ์ํ ํจ์๋ฅผ ๋ฐฐ์ฐ์ จ๋ค๋ฉด ๋จ์ ์ํ์๋ ์๋์ ๊ฐ์ด
const arr = [1,2,3,4,5]
arr.forEach(v => {
console.log(v);
})
forEach๋ฅผ ์ฌ์ฉํ ๊ฒ์ด๋ค.
๋๋, ์ดํฐ๋ฌ๋ธ, ์ดํฐ๋ ์ดํฐ์ ๊ฐ๋ ์ ์๊ฑฐ๋, ๋ญ๊ฐ ์ด๋ ๊ฒ ์ฐ๋ ๊ฒ ์ข๋ค๊ณ ๋ค์ผ์ จ๋ค๋ฉด
const arr = [1,2,3,4,5]
for(const a of arr) {
console.log(a);
}
for of๋ฅผ ์ฌ์ฉํ ๊ฒ์ด๋ค.
์ด๋ฒ ํฌ์คํ ์์๋ ์ดํฐ๋ฌ๋ธ, ์ดํฐ๋ ์ด์ ์ ๋ํด ์์๋ณด๋ คํ๋ค.
๋จผ์ ์ดํฐ๋ฌ๋ธ, ์ดํฐ๋ ์ด์ ์ ๋ํ ๊ฐ๋ ์ ๋ํด ์์๋ณด์
์ดํฐ๋ฌ๋ธ
์ดํฐ๋ ์ด์ ์ ๋ฆฌํดํ๋ [Symbol.iterator]()๋ฅผ ๊ฐ์ง ๊ฐ
์ดํฐ๋ ์ด์
{ value, doen } ๊ฐ์ฒด๋ฅผ ๋ฆฌํดํ๋ next() ๋ฅผ ๊ฐ์ง ๊ฐ
๊ฐ๋ ๋ง ๋ณด๋ฉด ์ด๋ค ๊ฒ์ธ์ง ํ ์๋ฟ์ง ์๋๋ค. ์๋ฅผ ๋ค์ด ์ดํด๋ณด์.
const arr = [1,2,3,4,5];
const iteration = arr[Symbol.iterator]();
for(const a of arr) {
console.log(a);
}
Array๋ ์ดํฐ๋ฌ๋ธ์ด๋ค. ๊ทธ๋์ arr[Symbol.iterator]() ๋ก ์ ์ํ ์ ์๋ค.
console.log๋ฅผ ์ฐ์ด๋ณด๋ฉด
Array Iterator๋ผ๊ณ ์น์ ํ๊ฒ ์๋ ค์ค๋ค.
๊ทธ๋ผ ์ดํฐ๋ ์ด์ ์์ ํ์ธํ ์ ์์ผ๋ฏ๋ก next()๊ฐ์ ํ์ธํด๋ณด์
const arr = [1,2,3,4,5];
const iteration = arr[Symbol.iterator]();
iteration.next();
iteration.next();
iteration.next();
iteration.next();
iteration.next();
iteration.next();
์๋ฅผ ์คํํ๋ฉด ์ด๋ป๊ฒ ๋ ๊น?
์ ์ดํฐ๋ ์ด์ ๊ฐ๋ ๊ณผ ๊ฐ์ด value์ done์ ๊ฐ์ง ๊ฐ๋ค์ด ํ๋์ฉ ์ถ๋ ฅ๋๋ค. 5๊น์ง ๋ฐ์ ์์ผ๋ฏ๋ก ๊ทธ ๋ค์๋ถํด done์ด true๊ฐ ๋๋ค.
for of๋ฌธ์ ํด๋น ์ดํฐ๋ ์ด์ ๋ค์ ์ํํ๊ธฐ ์ํด ์๋ ์ํ๋ฌธ์ด๋ค.
์์ ๊ฐ์ ๊ฒฐ๊ณผ์์ for of๋ฌธ์ done์ด true๋ฉด ์ํ๋ฌธ์ ํ์ถํ๋ ์กฐ๊ฑด์ ๊ฐ์ง ์ํ๋ฌธ์ธ ๊ฑธ ํ์ธํ ์ ์๋ค.
์ด๊ฑธ ์ด๋์ ์ ์ฉํ ์ ์์๊น?
Map, Set
๋ฐฐ์ด์ด ์๋ map, set์ ๋จ์ for๋ฌธ์ด ์ ์ฉ๋์ง ์๋ ๊ฑธ ๊ฒฝํํ ์ ๋ค๋ค ์์๊ฒ์ด๋ค. ์ด์ ๋ ๊ฐ๋จํ๋ค. ์๋ ์ฝ๋์์ ํ์ธํด๋ณด์.
const set = new Set([1, 2, 3, 4, 5]);
const map = new Map([['a', 1],['b', 2],['c', 3]]);
console.log(set[1]); // undefined
console.log(map[1]); // undefined
console.log(set[Symbol.iterator]());
// SetIterator {1, 2, 3, 4, 5}
console.log(map[Symbol.iterator]());
// MapIterator {'a' => 1, 'b' => 2, 'c' => 3}
set, map์ ๋จ์ ์ธ๋ฑ์ค ์ํ๋ก๋ ๊ฐ์ ์ํํ ์ ์๋ค.
์ดํฐ๋ ์ด์ ์ธ ๊ฑธ ํ์ธํ์ผ๋ next()๋ฅผ ์ฌ์ฉํด๋ณด์!
const set = new Set([1, 2, 3, 4, 5]);
const map = new Map([['a', 1],['b', 2],['c', 3]]);
const setIter = set[Symbol.iterator]();
setIter.next(); // {value: 1, done: false}
setIter.next(); // {value: 2, done: false}
const mapIter = map[Symbol.iterator]();
mapIter.next(); // {value: Array(2), done: false}
mapIter.next(); // {value: Array(2), done: false}
์ดํฐ๋ ์ด์ ์ด๋ฏ๋ก nextํจ์๋ฅผ ํตํด { value, done } ํํ์ ๊ฐ์ฒด๋ฅผ ๋ฝ์๋ผ ์ ์๋ค. ์ฆ map๊ณผ set์
{ value, done } ํํ์ ๊ฐ์ฒด๋ฅผ ์ํํ๋ for of๋ฌธ์ ์ฌ์ฉํด ์ํํด์ผํ๋ค.
map์ key, value ๋ณ๋ก ๋ฐ๋ก ์ํํ ์ ์๋ ๋ฐฉ๋ฒ๋ ์กด์ฌํ๋ค.
const set = new Set([1, 2, 3, 4, 5]);
const map = new Map([['a', 1],['b', 2],['c', 3]]);
for(const a of set) {
console.log(a) // 1, 2, 3, 4, 5
}
for(const a of map) {
console.log(a) // ['a', 1], ['b', 2], ['c', 3]
}
for(const a of map.keys()) { // ํค๋ง ์ํ
console.log(a) // 'a', 'b', 'c'
}
for(const a of map.values()) { // ๊ฐ๋ง ์ํ
console.log(a) // 1, 2, 3
}
for(const a of map.entries()) { // ๋ ๋ค ์ํ =>
console.log(a) // ['a', 1], ['b', 2], ['c', 3]
}
'๐งโ๐ป Web > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[JavaScript] ๊ณ ์ฐจํจ์ (0) | 2022.07.18 |
---|---|
[JavaScript] lodash sortBy (0) | 2022.07.02 |
[JavaScript] ํ์ดํ ํจ์์ ์ผ๋ฐ ํจ์์ ์ฐจ์ด (0) | 2022.06.03 |
[heroku] nodejs ๋ฐฐํฌํ ๋ dotenv ์ฒ๋ฆฌ (0) | 2022.03.25 |
billboard.js ์ ๋ํด ์์๋ณด์. (pie chart ์์) (0) | 2022.03.24 |