JS ๋ฐฐ์ด ๋ฐฉ๋ฒ ! ๐ฑโ๐
20885 ๋จ์ด webdevprogrammingjavascriptcodenewbie
JS ๋ฐฐ์ด์ด๋ ๋ฌด์์ ๋๊น?
JavaScript Array ํด๋์ค๋ ๋ฐฐ์ด ๊ตฌ์ฑ์ ์ฌ์ฉ๋๋ ์ ์ญ ๊ฐ์ฒด์ ๋๋ค. ์ด๋ ๋์ ์์ค์ ๋ชฉ๋ก๊ณผ ๊ฐ์ ๊ฐ์ฒด์ ๋๋ค.
๋ฐฐ์ด์ ๋ง์ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ์ผ์ ๋ ์ฝ๊ฒ ํ๊ธฐ ์ํด.
์ฐ๋ฆฌ๋ 4๊ฐ์ ๋ฐฐ์ด ๋ฐฉ๋ฒ์ ๋ํด ์ด์ผ๊ธฐํ ๊ฒ์ ๋๋ค.
1.์ง๋
2. ํํฐ
3.์ ๋ ฌ
4.๊ฐ์
1) ๋ฐฐ์ด.ํ๋กํ ํ์
.๋งต()
๋ฐ๋ผ์ map() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ ๊ธฐ๋ณธ ์๊ตฌ ์ฌํญ์ ์ฃผ์ด์ง ๋ฐ์ดํฐ๋ฅผ ์์ ํ๋ ๊ฒ์
๋๋ค. map() ๋ฉ์๋๋ ํธ์ถ ๋ฐฐ์ด์ ๋ชจ๋ ์์์์ ์ ๊ณต๋ ํจ์๋ฅผ ํธ์ถํ ๊ฒฐ๊ณผ๋ก ์ฑ์์ง ์ ๋ฐฐ์ด์ ๋ง๋ญ๋๋ค. ๋ฐฐ์ด์ ์ํด ์ ๋ฌ๋ ๋์ผํ ์์ ๋ฐ์ดํฐ๋ฅผ ์์ ๋ ํ์์ผ๋ก ๋ฐํํฉ๋๋ค.
const inventors = [
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }
const fullName = inventors.map(
inventor => `${inventor.first} ${inventor.last}`
);
console.log(fullName); // it returns the full name of the inventors using the map method
2) ๋ฐฐ์ด.ํ๋กํ ํ์
.ํํฐ()
๋ฐ๋ผ์ filter() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ ๊ธฐ๋ณธ์ ์ธ ํ์๋ ์ฃผ์ด์ง ๋ฐ์ดํฐ๋ฅผ ํํฐ๋งํ๋ ๊ฒ์
๋๋ค. filter() ๋ฉ์๋๋ ์ ๊ณต๋ ํจ์์ ์ํด ๊ตฌํ๋ ํ
์คํธ๋ฅผ ํต๊ณผํ๋ ๋ชจ๋ ์์๋ก ์ ๋ฐฐ์ด์ ๋ง๋ญ๋๋ค.
์ด๊ธฐํ๋ฅผ ์ ๋ฌํ ๋ชจ๋ ์์๋ฅผ โโํฌํจํ์ง ์์ ์ ์๋ ํํฐ๋ง๋ ๋ฐฐ์ด์ ๋ฐํํฉ๋๋ค.
const inventors = [
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }
const filter = inventors.filter(
inventor => inventor.year >= 1500 && inventor.year <= 1599
);
console.table(filter); // filter helps us here to filter out the list of inventors year dates
3) ๋ฐฐ์ด.ํ๋กํ ํ์
.์ ๋ ฌ()
๋ฐ๋ผ์ sort() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ ๊ธฐ๋ณธ์ ์ธ ํ์๋ ์ฃผ์ด์ง ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฌํ๋ ๊ฒ์
๋๋ค. sort() ๋ฉ์๋๋ ๋ฐฐ์ด์ ์์๋ฅผ ์ ์๋ฆฌ์ ์ ๋ ฌํ๊ณ ์ ๋ ฌ๋ ๋ฐฐ์ด์ ๋ฐํํฉ๋๋ค. ๊ธฐ๋ณธ ์ ๋ ฌ ์์๋ ์ค๋ฆ์ฐจ์์
๋๋ค. ์ ๋ฌ๋ ๋์ผํ ์์ ๋ฐ์ดํฐ๋ฅผ ๋ฐํํฉ๋๋ค!
const inventors = [
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }
const sorted = inventors.sort((a, b) => (a.passed > b.passed ? 1 : -1));
console.table(sorted); // this method helps with the sorting of the results/arrays
3) ๋ฐฐ์ด.ํ๋กํ ํ์
.๋ฆฌ๋์ค()
๋ฐ๋ผ์ reduce() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ ๊ธฐ๋ณธ์ ์ธ ํ์๋ ์ฃผ์ด์ง ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฌํ๋ ๊ฒ์
๋๋ค. reduce() ๋ฉ์๋๋ ๋ฐฐ์ด์ ๊ฐ ์์์ ๋ํด ๋ฆฌ๋์ ํจ์, ์ฆ (๊ทํ๊ฐ ์ ๊ณตํ)๋ฅผ ์คํํ์ฌ ๋จ์ผ ์ถ๋ ฅ ๊ฐ์ ๋ฐํํฉ๋๋ค. ๋จ์ผ ๊ฐ.
const inventors = [
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }
const total = inventors.reduce((total, inventor) => {
return total + (inventor.passed - inventor.year);
}, 0); // this method helps us to calculate the total number of years that were lived by the inventors using the reduce method
console.log(total);
๋ ๋ง์ JS ๋ฐฐ์ด ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๊ทธ๊ฒ IT์ผ
์ด ๋ธ๋ก๊ทธ๋ Wes Bos JavaScript30 ๊ณผ์ ์์ ์๊ฐ์ ๋ฐ์์ต๋๋ค.
๋ณด๋์ค ๋ฐ
ํ๋ณตํ ์ฝ๋ฉ ๐
Reference
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(JS ๋ฐฐ์ด ๋ฐฉ๋ฒ ! ๐ฑโ๐), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค
https://dev.to/mayank0508/js-array-methods-1pk1
ํ
์คํธ๋ฅผ ์์ ๋กญ๊ฒ ๊ณต์ ํ๊ฑฐ๋ ๋ณต์ฌํ ์ ์์ต๋๋ค.ํ์ง๋ง ์ด ๋ฌธ์์ URL์ ์ฐธ์กฐ URL๋ก ๋จ๊ฒจ ๋์ญ์์ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
const inventors = [
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }
const fullName = inventors.map(
inventor => `${inventor.first} ${inventor.last}`
);
console.log(fullName); // it returns the full name of the inventors using the map method
๋ฐ๋ผ์ filter() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ ๊ธฐ๋ณธ์ ์ธ ํ์๋ ์ฃผ์ด์ง ๋ฐ์ดํฐ๋ฅผ ํํฐ๋งํ๋ ๊ฒ์ ๋๋ค. filter() ๋ฉ์๋๋ ์ ๊ณต๋ ํจ์์ ์ํด ๊ตฌํ๋ ํ ์คํธ๋ฅผ ํต๊ณผํ๋ ๋ชจ๋ ์์๋ก ์ ๋ฐฐ์ด์ ๋ง๋ญ๋๋ค.
์ด๊ธฐํ๋ฅผ ์ ๋ฌํ ๋ชจ๋ ์์๋ฅผ โโํฌํจํ์ง ์์ ์ ์๋ ํํฐ๋ง๋ ๋ฐฐ์ด์ ๋ฐํํฉ๋๋ค.
const inventors = [
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }
const filter = inventors.filter(
inventor => inventor.year >= 1500 && inventor.year <= 1599
);
console.table(filter); // filter helps us here to filter out the list of inventors year dates
3) ๋ฐฐ์ด.ํ๋กํ ํ์
.์ ๋ ฌ()
๋ฐ๋ผ์ sort() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ ๊ธฐ๋ณธ์ ์ธ ํ์๋ ์ฃผ์ด์ง ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฌํ๋ ๊ฒ์
๋๋ค. sort() ๋ฉ์๋๋ ๋ฐฐ์ด์ ์์๋ฅผ ์ ์๋ฆฌ์ ์ ๋ ฌํ๊ณ ์ ๋ ฌ๋ ๋ฐฐ์ด์ ๋ฐํํฉ๋๋ค. ๊ธฐ๋ณธ ์ ๋ ฌ ์์๋ ์ค๋ฆ์ฐจ์์
๋๋ค. ์ ๋ฌ๋ ๋์ผํ ์์ ๋ฐ์ดํฐ๋ฅผ ๋ฐํํฉ๋๋ค!
const inventors = [
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }
const sorted = inventors.sort((a, b) => (a.passed > b.passed ? 1 : -1));
console.table(sorted); // this method helps with the sorting of the results/arrays
3) ๋ฐฐ์ด.ํ๋กํ ํ์
.๋ฆฌ๋์ค()
๋ฐ๋ผ์ reduce() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ ๊ธฐ๋ณธ์ ์ธ ํ์๋ ์ฃผ์ด์ง ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฌํ๋ ๊ฒ์
๋๋ค. reduce() ๋ฉ์๋๋ ๋ฐฐ์ด์ ๊ฐ ์์์ ๋ํด ๋ฆฌ๋์ ํจ์, ์ฆ (๊ทํ๊ฐ ์ ๊ณตํ)๋ฅผ ์คํํ์ฌ ๋จ์ผ ์ถ๋ ฅ ๊ฐ์ ๋ฐํํฉ๋๋ค. ๋จ์ผ ๊ฐ.
const inventors = [
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }
const total = inventors.reduce((total, inventor) => {
return total + (inventor.passed - inventor.year);
}, 0); // this method helps us to calculate the total number of years that were lived by the inventors using the reduce method
console.log(total);
๋ ๋ง์ JS ๋ฐฐ์ด ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๊ทธ๊ฒ IT์ผ
์ด ๋ธ๋ก๊ทธ๋ Wes Bos JavaScript30 ๊ณผ์ ์์ ์๊ฐ์ ๋ฐ์์ต๋๋ค.
๋ณด๋์ค ๋ฐ
ํ๋ณตํ ์ฝ๋ฉ ๐
Reference
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(JS ๋ฐฐ์ด ๋ฐฉ๋ฒ ! ๐ฑโ๐), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค
https://dev.to/mayank0508/js-array-methods-1pk1
ํ
์คํธ๋ฅผ ์์ ๋กญ๊ฒ ๊ณต์ ํ๊ฑฐ๋ ๋ณต์ฌํ ์ ์์ต๋๋ค.ํ์ง๋ง ์ด ๋ฌธ์์ URL์ ์ฐธ์กฐ URL๋ก ๋จ๊ฒจ ๋์ญ์์ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
const inventors = [
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }
const sorted = inventors.sort((a, b) => (a.passed > b.passed ? 1 : -1));
console.table(sorted); // this method helps with the sorting of the results/arrays
๋ฐ๋ผ์ reduce() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ ๊ธฐ๋ณธ์ ์ธ ํ์๋ ์ฃผ์ด์ง ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฌํ๋ ๊ฒ์ ๋๋ค. reduce() ๋ฉ์๋๋ ๋ฐฐ์ด์ ๊ฐ ์์์ ๋ํด ๋ฆฌ๋์ ํจ์, ์ฆ (๊ทํ๊ฐ ์ ๊ณตํ)๋ฅผ ์คํํ์ฌ ๋จ์ผ ์ถ๋ ฅ ๊ฐ์ ๋ฐํํฉ๋๋ค. ๋จ์ผ ๊ฐ.
const inventors = [
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }
const total = inventors.reduce((total, inventor) => {
return total + (inventor.passed - inventor.year);
}, 0); // this method helps us to calculate the total number of years that were lived by the inventors using the reduce method
console.log(total);
๋ ๋ง์ JS ๋ฐฐ์ด ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๊ทธ๊ฒ IT์ผ
์ด ๋ธ๋ก๊ทธ๋ Wes Bos JavaScript30 ๊ณผ์ ์์ ์๊ฐ์ ๋ฐ์์ต๋๋ค.
๋ณด๋์ค ๋ฐ
ํ๋ณตํ ์ฝ๋ฉ ๐
Reference
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(JS ๋ฐฐ์ด ๋ฐฉ๋ฒ ! ๐ฑโ๐), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค
https://dev.to/mayank0508/js-array-methods-1pk1
ํ
์คํธ๋ฅผ ์์ ๋กญ๊ฒ ๊ณต์ ํ๊ฑฐ๋ ๋ณต์ฌํ ์ ์์ต๋๋ค.ํ์ง๋ง ์ด ๋ฌธ์์ URL์ ์ฐธ์กฐ URL๋ก ๋จ๊ฒจ ๋์ญ์์ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
ํ๋ณตํ ์ฝ๋ฉ ๐
Reference
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(JS ๋ฐฐ์ด ๋ฐฉ๋ฒ ! ๐ฑโ๐), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค
https://dev.to/mayank0508/js-array-methods-1pk1
ํ
์คํธ๋ฅผ ์์ ๋กญ๊ฒ ๊ณต์ ํ๊ฑฐ๋ ๋ณต์ฌํ ์ ์์ต๋๋ค.ํ์ง๋ง ์ด ๋ฌธ์์ URL์ ์ฐธ์กฐ URL๋ก ๋จ๊ฒจ ๋์ญ์์ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
Reference
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(JS ๋ฐฐ์ด ๋ฐฉ๋ฒ ! ๐ฑโ๐), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://dev.to/mayank0508/js-array-methods-1pk1ํ ์คํธ๋ฅผ ์์ ๋กญ๊ฒ ๊ณต์ ํ๊ฑฐ๋ ๋ณต์ฌํ ์ ์์ต๋๋ค.ํ์ง๋ง ์ด ๋ฌธ์์ URL์ ์ฐธ์กฐ URL๋ก ๋จ๊ฒจ ๋์ญ์์ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค