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 ๊ณผ์ •์—์„œ ์˜๊ฐ์„ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค.

๋ณด๋„ˆ์Šค ๋ฐˆ





ํ–‰๋ณตํ•œ ์ฝ”๋”ฉ ๐Ÿš€

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ