• [JS30] Array ๋ฉ”์„œ๋“œ (1)

    2019. 1. 7.

    by. ๋‚˜๋‚˜ (nykim)

    ๐Ÿ”ฅJavascript 30 - Day 04๐Ÿ”ฅ


    Day 04๋Š” ๋ฐฐ์—ด ๊ด€๋ จ ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ–๊ณ  ๋…ธ๋Š” ์‹œ๊ฐ„์ด ๋˜๊ฒ ์Šต๋‹ˆ๋‹น :->

    ๊ธฐ๋ณธ html, js ๋‚ด์šฉ์€ ์—ฌ๊ธฐ์—์„œ ํ™•์ธ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.



    1. filter() - ํŠน์ • ์กฐ๊ฑด์„ ๋งŒ์กฑํ•˜๋Š” ์ƒˆ ๋ฐฐ์—ด ๋งŒ๋“ค๊ธฐ

    const people = [
    	{ 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 },
    	{ first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
    	{ first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
    	{ first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
    	{ first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
    	{ first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
    	{ first: 'Hanna', last: 'Hammarstrรถm', year: 1829, passed: 1909 },
    	{ first: 'Sherlock', last: 'Holmes', year: 1854, passed: 1957 },
    	{ first: 'John ', last: 'Watson', year: 1852, passed: 1929 },
    ];

    ์ฒซ๋ฒˆ์งธ๋กœ ํ•ด๋ณผ ๊ฑด, people ๋ฐฐ์—ด์—์„œ 1500๋…„๋Œ€์— ํƒœ์–ด๋‚œ ์ธ๋ฌผ๋งŒ ์ถ”๋ ค์„œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด๋กœ ๋งŒ๋“œ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋•Œ ์‚ฌ์šฉํ•  ๋ฉ”์„œ๋“œ๋Š” filter()์ž…๋‹ˆ๋‹ค.
    filter() ๋ฉ”์„œ๋“œ๋Š” ์ฃผ์–ด์ง„ ํŒ๋ณ„ ํ•จ์ˆ˜๋ฅผ ํ†ต๊ณผํ•˜๋Š” ์š”์†Œ๋ฅผ ๋ชจ์•„ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด๋กœ ๋งŒ๋“ค์–ด ๋ฐ˜ํ™˜ํ•ด์ค๋‹ˆ๋‹ค. (*MDN)

    const fiften = people.filter();

    ์ด ๋ฉ”์„œ๋“œ๋Š” ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ํ•„์š”๋กœ ํ•˜๋ฉฐ, ์ด ํ•จ์ˆ˜๋Š” ์ตœ์†Œ 1๊ฐœ์˜ ์ธ์ˆ˜๋ฅผ ํ•„์š”๋กœ ํ•ฉ๋‹ˆ๋‹ค.
    arr.filter(callback(element[, index[, array]])[, thisArg])
    ์œ„ syntax์—์„œ element๊ฐ€ ๋ฐ”๋กœ ํ•„์ˆ˜ ์ธ์ˆ˜์ด๋ฉฐ, ์ฒ˜๋ฆฌํ•  ํ˜„์žฌ ์š”์†Œ๋ฅผ ๋œปํ•ฉ๋‹ˆ๋‹ค.

    const fiften = people.filter(person=>{});

    ๊ทธ๋Ÿผ ์œ„ ์ฝ”๋“œ์—์„œ filter ๋ฉ”์„œ๋“œ๊ฐ€ ์‹คํ–‰๋์„ ๋•Œ, ์ฒซ๋ฒˆ์งธ๋กœ ์„ ํƒ๋˜๋Š” 'person'์€ ๋ฌด์—‡์ผ๊นŒ์š”? { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }๊ฐ€ ํ•ด๋‹น๋ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์šฐ๋ฆฌ๊ฐ€ ํ•„์š”๋กœ ํ•˜๋Š” ์ •๋ณด๋Š” year์— ํ•ด๋‹นํ•˜์ฃ . ๊ทธ๋Ÿผ person.year๋กœ ์ ‘๊ทผํ•˜๋ฉด ๋˜๊ฒ ๋„ค์š”!

    const fiften = people.filter(person=>{
        if(person.year >=1500 && person.year <=1599){
    	return true;
        }
    });

    filter()๋Š” ์ฃผ์–ด์ง„ ํŒ๋ณ„ ํ•จ์ˆ˜๋ฅผ ํ†ต๊ณผํ•˜๋Š”, ์ฆ‰ ํ•จ์ˆ˜ ์‹คํ–‰ ํ›„ ๊ฒฐ๊ณผ๊ฐ’์ด true์ธ ์š”์†Œ๋งŒ ๊พธ๋ ค์„œ ๋ฐฐ์—ด๋กœ ๋งŒ๋“ค์–ด์ค€๋Œ”์œผ๋‹ˆ return true๋ฅผ ์ž‘์„ฑํ•ด์ค๋‹ˆ๋‹ค.
    ๋˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์งง๊ฒŒ ์ž‘์„ฑํ•ด๋„ ๋˜๊ณ ์š”!

    const fiften = people.filter(person=>
        (person.year >=1500 && person.year <=1599)
    );

    console.log(fiften)์œผ๋กœ ์ฝ˜์†”์— ์ฐ์–ด๋ณด๋ฉด ์ƒˆ ๋ฐฐ์—ด์ด ์ž˜ ๋‚˜์˜จ ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.



    2. map() - ํ•จ์ˆ˜ ๊ฒฐ๊ณผ๋ฅผ ๋ชจ์•„ ์ƒˆ ๋ฐฐ์—ด ๋งŒ๋“ค๊ธฐ

    ์ด๋ฒˆ์—๋Š” people ๋ณ€์ˆ˜์˜ ์‚ฌ๋žŒ๋“ค์˜ ์„ฑ๊ณผ ์ด๋ฆ„์„ ํ•ฉ์นœ ๋‹ค์Œ, ๊ทธ๊ฑธ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด๋กœ ๋งŒ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด๋•Œ ์‚ฌ์šฉํ•  ๋ฉ”์„œ๋“œ๋Š” map()์ž…๋‹ˆ๋‹ค. (*MDN)

    ๊ฐ„๋‹จํ•˜๊ฒŒ ์“ฐ์ž๋ฉด, ๋ฐฐ์—ด ์•ˆ์˜ ๊ฐ ์š”์†Œ์—๊ฒŒ ์–ด๋–ค ํ•จ์ˆ˜๋ฅผ ๋ฐ˜๋ณต์ ์œผ๋กœ ์‹คํ–‰์‹œํ‚ค๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, var arr = [1,2,3]์ด ์žˆ์„ ๋•Œ ์—ฌ๊ธฐ์— ๊ฐ๊ฐ 2๋ฅผ ๊ณฑํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œํ‚ค๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ด๋•Œ arr.map(x=>x*2)๋ฅผ ์จ์ฃผ๋ฉด ๋ฐฐ์—ด ๋‚ด ๊ฐ๊ฐ์—๊ฒŒ x2๋ฅผ ํ•˜๋Š” ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋ฉฐ ๊ทธ ๊ฐ’์„ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜ํ•ด์ค๋‹ˆ๋‹ค.

    map()์˜ ์ฝœ๋ฐฑํ•จ์ˆ˜๋„ ์ตœ์†Œ 1๊ฐœ์˜ ์ธ์ˆ˜๋ฅผ ํ•„์š”๋กœ ํ•˜๋ฉฐ, ์•„๋ž˜ ์ฝ”๋“œ์—์„œ๋Š” person์ด ํ•ด๋‹นํ•ฉ๋‹ˆ๋‹ค. filter()์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ฒ˜๋ฆฌํ•  ํ˜„์žฌ ์š”์†Œ๋ฅผ ๋œปํ•ฉ๋‹ˆ๋‹ค.

    const fullNames = people.map(person =>
    (person.first + ' ' + person.last)
    );
    
    console.log(fullNames);

    ๊ฐ„๋‹จํ•˜๋„ค์š” :)


    3. sort() - ์˜ค๋ฆ„์ฐจ๋‚˜ ๋‚ด๋ฆผ์ฐจ๋กœ ๋ฐฐ์—ด ์ •๋ฆฌํ•˜๊ธฐ

    ๊ทธ๋Ÿผ ์ด์ œ people ๋‚ด ์ธ๋ฌผ๋“ค์„ ์ถœ์ƒ์—ฐ๋„ ์ˆœ์œผ๋กœ ์ •๋ ฌํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋จผ์ € ํƒœ์–ด๋‚œ ์ˆœ๋Œ€๋กœ ๋‚˜์—ดํ•˜๋Š” ๊ฑฐ์ฃ . ์—ฌ๊ธฐ์—๋Š” sort() ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.
    ์ด ๋ฉ”์„œ๋“œ๋Š” ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์ •๋ ฌํ•œ ํ›„ ๊ทธ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•˜๋Š”๋ฐ์š”, ๊ธฐ๋ณธ์ ์œผ๋กœ๋Š” ๋ฌธ์ž์—ด์˜ ์œ ๋‹ˆ์ฝ”๋“œ ์ฝ”๋“œ ํฌ์ธํŠธ๋ฅผ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค.
    (์ž์„ธํ•œ ๊ฑด MDN์„ ๋ด…์‹œ๋‹น!)

    const str = ['๋ฆฌ', '๋ฝ', '์ฟ ', '๋งˆ'];
    const num = [9, 365, 14];
    
    str.sort();
    num.sort();
    
    console.log(str);
    console.log(num);
    
    /*
     ๊ฒฐ๊ณผ:
      > Array ["๋ฝ", "๋ฆฌ", "๋งˆ", "์ฟ "]
      > Array [14, 365, 9]
    */

    ์•„๋ž˜ const num์ด ์žฌ๋ฐฐ์—ด๋œ ๋ชจ์Šต์ด ๋ณด์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ €ํฌ๊ฐ€ ์›ํ•˜๋Š” ๊ฑฐ๋ž‘ ์ข€ ๋‹ค๋ฅด์ง€ ์•Š๋‚˜์—ฌ;ใ…; 365๋Š” 9๋ณด๋‹ค ํฌ์ž–์•„์š”?! ๊ทธ๋ž˜์„œ ์—ฌ๊ธฐ์—๋‹ค ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ํ•จ์ˆ˜๋ฅผ ํ•˜๋‚˜ ์™ ๋„ฃ์–ด์ค์‹œ๋‹ค.
    ์ด๊ฑธ compareFunction์ด๋ผ๊ณ  ํ•˜๋Š”๋ฐ์š”, ์ด๊ฒŒ ์—†๋‹ค๋ฉด ์–ธ๊ธ‰ํ–ˆ๋“ฏ ์œ ๋‹ˆ์ฝ”๋“œ ์ฝ”๋“œ ํฌ์ธํŠธ ์ˆœ๋Œ€๋กœ ์ •๋ ฌ๋ฉ๋‹ˆ๋‹ค. ์ˆซ์ž๋Š” ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜๋˜๊ธฐ ๋•Œ๋ฌธ์— "365"๊ฐ€ "9"๋ณด๋‹ค ๋จผ์ € ์˜ค๋Š” ๊ฑฐ๊ณ ์š”!

    ๋ณดํ†ต compareFunction(a, b) ํ˜•ํƒœ๋กœ ์“ฐ์ด๋Š”๋ฐ, ์ด ๊ฐ’์ด 0๋ณด๋‹ค ํฌ๊ณ  ์ž‘์€์ง€์— ๋”ฐ๋ผ ์ •๋ ฌ ์ˆœ์„œ๊ฐ€ ๋‹ฌ๋ผ์ง‘๋‹ˆ๋‹ค.

    - compareFunction(a, b)์ด 0๋ณด๋‹ค ์ž‘๋‹ค๋ฉด: a -> b ์ˆœ์„œ
    - compareFunction(a, b)์ด 0๋ณด๋‹ค ํฌ๋‹ค๋ฉด : b -> a ์ˆœ์„œ

    ์ž์„ธํ•œ ๊ฑด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด์„œ ์‚ดํŽด๋ด…์‹œ๋‹ค+_+

    const ordered = people.sort((a,b)=>{})

    ์ž, ์—ฌ๊ธฐ ์…œ๋ก ํ™ˆ์ฆˆ์™€ ์กด ์™“์Šจ(ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹) ๋‘ ๋ช…์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋‘˜์˜ ์ถœ์ƒ์—ฐ๋„๋Š” ๊ฐ๊ฐ 1854๋…„, 1852๋…„์ž…๋‹ˆ๋‹ค(์™“์Šจ์ด ํ˜•์ด์—ˆ๊ตฌ๋‚˜...)
    ์ด๊ฑธ a๋ž‘ b๋ผ๊ณ  ์น˜๊ณ  ๋น„๊ตํ•ด ๋ด…๋‹ˆ๋‹ค. ๋‹น์—ฐํžˆ a๊ฐ€ ๋” ํฌ๋ฏ€๋กœ, a(1854) > b (1852)๋ผ๊ณ  ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋„ค์š”.
    ์ด๋•Œ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๊ฑด ์ถœ์ƒ์—ฐ๋„๊ฐ€ '๋น ๋ฅธ'์ˆœ ๋ถ€ํ„ฐ์ด๋ฏ€๋กœ b->a ์ˆœ์œผ๋กœ ์ •๋ ฌ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ a > b ์˜ ๊ฒฐ๊ณผ๋Š” 0๋ณด๋‹ค ์ปค์•ผํ•ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ๋กœ ํ‘œํ˜„ํ•˜๋ฉด ์ด๋ ‡๊ฒ ๋„ค์š”.

    if(a > b){
        return 1;
    }
    

    ๋‹ค๋ฅธ ์ธ๋ฌผ์„ ๊ฐ€์ง€๊ณ  ๋น„๊ตํ•ด๋ด…์‹œ๋‹ค. ๊ฐˆ๋ฆด๋ ˆ์˜ค(a)๋Š” 1564๋…„, ์•„์ด์ž‘(b)์€ 1643๋…„์ƒ์ž…๋‹ˆ๋‹ค. a.year < b.year์— ํ•ด๋‹นํ•˜๋„ค์š”. ์ด ๊ฒฝ์šฐ a -> b์ˆœ์œผ๋กœ ์ •๋ ฌ๋˜์–ด์•ผ ํ•˜๋ฏ€๋กœ ๋ฆฌํ„ด๊ฐ’์€ 0๋ณด๋‹ค ์ž‘์•„์•ผํ•ฉ๋‹ˆ๋‹ค.

    if(a.year < b.year){
        return -1;
    }
    

    ์ž ์ด์ œ ์ด๊ฑธ ๊ณ ๋Œ€๋กœ~ sort()๋ฉ”์„œ๋“œ์— ๋„ฃ์–ด์ค์‹œ๋‹ค.

    const ordered = people.sort((a,b)=>{
    if(a.year > b.year) {
        return 1;
    } 
    if (a.year < b.year) {
        return -1;
    }
    return 0; /*๋‘ ๊ฐ’์ด ๊ฐ™์„ ๋•Œ*/
    
    console.log(ordered);
    })
    

    ๋งŒ์•ฝ ์˜ค๋ฆ„์ฐจ์ˆœ์ด ์•„๋‹ˆ๋ผ ๋‚ด๋ฆผ์ฐจ์ˆœ์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ์ € ๋ฆฌํ„ด๊ฐ’๋งŒ ์„œ๋กœ ๋ฐ”๊ฟ”์ฃผ๋ฉด ๋˜๊ฒ ๋„ค์š”. ๊ตฟ๊ตฟ!


    4. reudce() - ๋ฐฐ์—ด์˜ ์š”์†Œ ๊ฐ’์„ ๋ˆ„์ ํ•˜์—ฌ ๊ณ„์‚ฐํ•˜๊ธฐ

    ์ด๋ฒˆ์—๋Š” ์ธ๋ฌผ๋“ค์ด ์‚ฐ ํ–‡์ˆ˜๋ฅผ ์ €์–ธ๋ถ€ ํ•ฉ์ณ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. reduce()๋ฉ”์„œ๋“œ๋ฅผ ์“ธ ๊ฑด๋ฐ์š”, ์ž์„ธํ•œ ๊ฑด ์—ญ์‹œ๋‚˜ MDN์—๊ฒŒ ํ† ์˜ค์“ฐโ˜…

    ์ด reduce()๋Š” ES6๋ถ€ํ„ฐ ์ถ”๊ฐ€๋œ ๊ฑด๋ฐ์š”, ์ข€ ๋นˆํ‹ฐ์ง€ํ’, ๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ์˜›๋‚  ๋ฐฉ์‹์œผ๋กœ ์ž‘์„ฑํ•˜๋ฉด ์ด๋ ‡๊ฒ ๋„ค์š”.

    var totalYears = 0;
    for (var i=0; i<people.length; i++){
        totalYears += people[i].year
    }
    

    reduce()์˜ ์ฝœ๋ฐฑํ•จ์ˆ˜๋Š” ์ตœ์†Œ ๋‘ ๊ฐœ์˜ ์ธ์ˆ˜๋ฅผ ํ•„์š”๋กœํ•˜๋ฉฐ, accumulator(๋ˆ„์ ๋œ ๊ฐ’)๊ณผ currentValue๋ฐฐ์—ด ๋‚ด ํ˜„์žฌ ์ฒ˜๋ฆฌ๋˜๊ณ  ์žˆ๋Š” ์š”์†Œ์ž…๋‹ˆ๋‹ค.

    const totalYears = people.reduce((total, person)=>{})

    ์ธ๋ฌผ๋“ค์ด ์–ผ๋งŒํผ ์‚ด์•˜๋Š”์ง€ ์•Œ๋ ค๋ฉด '์ƒ๋ชฐ๋…„๋„ - ์ถœ์ƒ๋…„๋„'๋ฅผ ํ•˜๋ฉด ๋˜๊ฒ ์ฃ ?!

    const totalYears = people.reduce((total, person)=>{
        return total + (person.passed - person.year)    
    });
    console.log(totalYears);

    ์—‡ ๊ทธ๋Ÿฌ๋ฉด ๋ฆฌํ„ด๊ฐ’์ด ์ข€ ์ด์ƒํ•˜๊ฒŒ ๋‚˜์˜ค๋Š”๋ฐ์š”?! ์ด๋Ÿด ๋• ๋‹นํ™ฉํ•˜์ง€๋ง๊ณ  ์ดˆ๊ธฐ๊ฐ’์„ ๋„ฃ์–ด์ค๋‹ˆ๋‹ค!

    const totalYears = people.reduce((total, person)=>{
        return total + (person.passed - person.year)    
    }, 0);
    console.log(totalYears);

    5. sort()

    ์ด์ฏค๋˜๋‹ˆ ์ธ๋ฌผ๋“ค ๊ฐ€์šด๋ฐ ๋ˆ„๊ฐ€ ๊ฐ€์žฅ ์˜ค๋ž˜ ์‚ด์•˜๋Š”์ง€ ๊ถ๊ธˆํ•˜๋„ค์š”ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ sort()๋ฉ”์„œ๋“œ๋ฅผ ์จ์„œ ์ดค๋ฅด๋ฅต ์ •๋ ฌํ•ด๋ณด์ฃ .

    const oldest = people.sort((a,b)=>{
        const a_lifeTime = a.passed - a.year;
        const b_lifeTime = b.passed - b.year;
        if(a_lifeTime > b_lifeTime) {
            return -1;
        }
        if(a_lifeTime < b_lifeTime) {
            return 1;
        }
        return 0;
    });
    
    console.log(oldest);

    ์ˆ˜๋ช…์„ ๊ณ„์‚ฐํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— lifeTime์ด๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ ๋งŒ๋“  ๋‹ค์Œ ๋น„๊ตํ•ด์คฌ์Šต๋‹ˆ๋‹ค. ํ™ˆ์ฆˆ์”จ ์žฅ์ˆ˜ํ•˜์…จ๋„ค์—ฌใ…‹ใ…‹ใ…‹ใ…‹ใ…‹


    6. includes()

    ์ด๋ฒˆ์—๋Š” ๊ธฐ์กด people ๋ณ€์ˆ˜ ๋Œ€์‹  ๋งˆํฌ์—…๋˜์–ด์žˆ๋Š” ๋ชฉ๋ก์„ ๊ฐ€์ง€๊ณ  ์ž‘์—…ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ธ๋ฌผ๋“ค ์ค‘ ์ด๋ฆ„์— 'de'๊ฐ€ ๋“ค์–ด๊ฐ€๋Š” ์‚ฌ๋žŒ๋งŒ ๋ชจ์•„์„œ ์ƒˆ ๋ฐฐ์—ด๋กœ ๋งŒ๋“ค๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.

    const category = document.querySelector(".mw-category");
    const categoryLinks = category.querySelectorAll("a"); 
    ์ž, ์—ฌ๊ธฐ์„œ categoryLinks๋Š” ๋ฐฐ์—ด์ผ๊นŒ์š”? ์‚๋น…, NodeList์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋ฐฐ์—ด ๋ฉ”์„œ๋“œ๋ฅผ ์“ฐ๋ ค๋ฉด ์–˜๋ฅผ ์ผ๋‹จ ๋ฐฐ์—ด๋กœ ๋งŒ๋“ค์–ด์ค˜์•ผํ•ฉ๋‹ˆ๋‹ค. ์—Œ..... ๋‹คํ–‰์Šค๋Ÿฝ๊ฒŒ๋„ ES6์—์„œ ์ถ”๊ฐ€๋œ from() ๋ฉ”์„œ๋“œ๊ฐ€ ๊ตฌ์›์˜ ์†๊ธธ์„ ๊ฑด๋„ค๋„ค์š”....โ˜… (*MDN)
    const categoryLinks = Array.from(category.querySelectorAll("a"));

    ๊ทธ๋Ÿผ [a, a, a...]์™€ ๊ฐ™์ด ๋ฐฐ์—ด์ด ๋งŒ๋“ค์–ด์กŒ์„ ํ…๋ฐ ์—ฌ๊ธฐ์„œ ํ•„์š”ํ•œ ์ •๋ณด๋Š” textContent์ž…๋‹ˆ๋‹ค. ์ด๊ฑธ ๊ฐ€์ ธ์˜ค๋ ค๋ฉด ์š”์†Œ ๊ฐ๊ฐ์—๊ฒŒ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œํ‚ค๋Š”, map()ํ•จ์ˆ˜๊ฐ€ ํ•„์š”ํ•˜๊ฒ ๋„ค์š”.

    const categoryLinksText = categoryLinks.map(link=>link.textContent);

    ์—ฌ๊ธฐ์„œ ์ž ๊น. '์Œ? ๊ตณ์ด ๋ฐฐ์—ด๋กœ ์•ˆ ๋งŒ๋“ค๊ณ  forEach ์จ๋„ ๋˜์ง€ ์•Š์•„?' ๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค...์—ˆ๋Š”๋ฐ์š”(๋ป˜์ญ˜) forEach()๋Š” ๋ฆฌํ„ด๊ฐ’์ด undefined์ธ ๋ฐ˜๋ฉด์—, map()์€ ์ฝœ๋ฐฑํ•จ์ˆ˜์˜ ๊ฒฐ๊ณผ๊ฐ’์œผ๋กœ ๊ตฌ์„ฑ๋œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฆฌํ„ดํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ์ผ๋ถ€๋Ÿฌ map()์„ ์“ด ๊ฑฐ์ฃ .

    ์ด์ œ ๋‚จ์€ ํ•  ์ผ์€ ์ด ํ…์ŠคํŠธ์— 'de'๊ฐ€ ํฌํ•จ๋˜์–ด์žˆ๋Š”์ง€ ํŒŒ์•…ํ•˜๋Š” ๊ฒ๋‹ˆ๋‹ค. ๊นŒ๋ฆฌํ•œ include()๋ฉ”์„œ๋“œ๋ฅผ ์“ฐ๋ฉด ๋‹จ๋ฐ•์— ์ฐพ์•„๋‚ผ ์ˆ˜ ์žˆ์–ด์š”!

    includes()๋Š” ๋ฐฐ์—ด์— ํŠน์ • ์š”์†Œ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜์—ฌ true ๋˜๋Š” false๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์–ด, ์•„๊นŒ filter() ๋ฉ”์„œ๋“œ๋Š” true์ธ ์š”์†Œ๋งŒ ๋ณด์•„์„œ ์ƒˆ ๋ฐฐ์—ด๋กœ ๋งŒ๋“ ๋‹ค๊ณ  ํ–ˆ๋Š”๋ฐ!!! ๊ทธ๋Ÿผ ์ด ๋‘˜์„ ๊ฒฐํ•ฉํ•˜๋ฉด ๋˜๊ฒ ๊ตฌ๋‚˜!!!!!

    const category = document.querySelector(".mw-category");
    const categoryLinks = Array.from(category.querySelectorAll("a"));
    const categoryLinksText = categoryLinks.map(link=>link.textContent);
    const result = categoryLinksText.filter(text=>text.includes('de'));
    console.log(result);

    ๋ง๋ถ™์—ฌ, ์•ˆ ๊นŒ๋ฆฌํ•œ ๋นˆํ‹ฐ์ง€ ๋ฐฉ์‹ ๋ฉ”์„œ๋“œ๋กœ๋Š” indexOf()๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
    ์š” ์•„์ด๋Š” ๋ฐฐ์—ด์—์„œ ์ง€์ •๋œ ์š”์†Œ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ๋Š” ์ฒซ๋ฒˆ์งธ ์ธ๋ฑ์Šค๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ  ์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฉด -1์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ด๋ ‡๊ฒŒ ์‘์šฉํ•ด์„œ ์“ธ ์ˆ˜ ์žˆ์–ด์š”!

    const result = de.filter(text=>text.indexOf("de") !== -1);

    7. sort()

    sort() ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด ์•„๋ž˜ ๋ฐฐ์—ด์„ ์žฌ์ •๋ ฌํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฆ„์„ ๊ธฐ์ค€์œผ๋กœ ์•ŒํŒŒ๋ฒณ์ˆœ์œผ๋กœ ๋‚˜์—ดํ•ด๋ณด์ฃ .

    const people2 = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevel, Ken', 'Biden, Joseph', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William', 'Holmes, Sherlock', 'Watson, John', 'kim, Anne'];

    ์ด๋ฆ„์ด '์„ฑ, ์ด๋ฆ„' ํ˜•ํƒœ๋กœ ๋˜์–ด์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ฌธ์ž์—ด์„ ์ž˜๋ผ๋‚ผ ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋•Œ ์“ฐ๋Š” ๊ฑด split()๋ฉ”์„œ๋“œ์ฃ ! ์ด๊ฑด ์ธ์ˆ˜๋กœ ๋ฐ›์€ separator๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ฌธ์ž์—ด์„ ์ž˜๋ผ ๋ฐฐ์—ด๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

    const alpha = people2.sort((lastOne, nextOne)=>{
        const name = lastOne.split(', ');
    });

    ์ด๋•Œ name์„ ์ฝ˜์†”์— ์ฐ์œผ๋ฉด ["kim", "anne"]๊ณผ ๊ฐ™์ด ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ index 1๋ฒˆ์งธ ์š”์†Œ๋ฅผ ๊ฐ€์ ธ๋‹ค ์“ฐ๋ฉด ๋˜๊ฒ ๋„ค์š”!

    const alpha = people2.sort((lastOne, nextOne)=>{
    const aName = lastOne.split(', ');
    const bName = nextOne.split(', ');
    
    if (aName[1] > bName[1]) {
        return 1;
    }
    if (aName[1] < bName[1]) {
        return -1;
    }
        return 0;
    });
    
    console.table(alpha);
    

    ๋˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์ž‘์„ฑํ•ด๋„ ๋ฉ๋‹ˆ๋‹ค :D

    const alpha2 = people2.sort((lastOne, nextOne)=>{
    const [aLast, aName] = lastOne.split(', ');
    const [bLast, bName] = nextOne.split(', ');
    
    if (aName > bName) {
        return 1;
    }
    if (aName < bName) {
        return -1;
    }
        return 0;
    });

    8. reduce()

    ๋“œ๋””์–ด!! ๋งˆ์ง€๋ง‰์ž…๋‹ˆ๋‹ค. reduce()๋ฅผ ํ™œ์šฉํ•ด ์ธ์Šคํ„ด์Šค ๊ฐœ์ˆ˜๋ฅผ ์…€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick'];
    const transportation = data.reduce((all, current)=>{
    if (current in all){
        all[current] ++;
    }else{
        all[current] = 1;
    }
    return all;
    },{});
    
    console.log(transportation);

    inoperator๋Š” ํŠน์ • ์†์„ฑ์ด ์žˆ์œผ๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•ด์ค๋‹ˆ๋‹ค. ๋˜, ์ž˜ ๋ณด๋ฉด ์ฝœ๋ฐฑํ•จ์ˆ˜์— {}์ธ์ˆ˜๊ฐ€ ํ•˜๋‚˜ ๋“ค์–ด๊ฐ„ ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ๋Š”๋ฐ, ์•„๋งˆ(?) ์ดˆ๊ธฐ๊ฐ’์„ ์˜ค๋ธŒ์ ํŠธ ํ˜•ํƒœ๋กœ ์ง€์ •ํ•œ ๋“ฏํ•ฉ๋‹ˆ๋‹ค (์š” ๋ถ€๋ถ„์€ ์ฐจํ›„ ๋” ๊ณต๋ถ€ํ•˜๊ณ  ์ถ”๊ฐ€ํ•˜๊ธฐ๋กœโ˜†) (*MDN)


    ๋„์•!

    See the Pen Array (Javascript) by NY KIM (@nykim_) on CodePen.


    ๋Œ“๊ธ€ 0