자바스크립트 : 데이터 제어하기

01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자)
02. 배열 메서드 : join() : 배열 요소 문자열을 결합 : 반환(문자열) : ★★★
03. 배열 메서드 : push() : 배열 마지막 요소에 추가 : 반환(숫자) : ★★
03. 배열 메서드 : pop() : 배열 마지막 요소를 삭제 : 반환(삭제된 요소)
04. 배열 메서드 : unshift() : 배열 처음 요소에 추가 :반환(숫자)
04. 배열 메서드 : shift() : 배열 처음 요소에 삭제 :반환(삭제된 요소)
05. 배열 메서드 : reverse() : 배열요소의 순서를 반대로 정렬 (배열)
05. 배열 메서드 : sort() : 배열 요소를 정렬할때 : 반환(배열)
06. 배열 메서드 : contact(): 배열 요소를 결합할때 : 반환(배열)
07. 배열 메서드 : reduce(): 배열요소를 하나로 정리: 반환(결과값)
07. 배열 메서드 : reduceRight() : 배열요소를 하나로 정리: 반환(결과값)
08. 배열 메서드 : slice() : 배열요소를 다른요소로 변경: 반환(배열)
09. 배열 메서드 : splice() : 배열요소를 다른요소로 변경: 반환(배열)
10. 배열 메서드 : indexOf() : 배열 요소를 검색할 때 : 반환(숫자)
10. 배열 메서드 : lastIndexOf() : 배열 요소를 끝에서 검색할 때 : 반환(숫자)
10. 배열 메서드 : includes() : 배열 요소를 검색할 때 : 반환(불린)
11. 배열 메서드 : find() : 배열 요소를 검색할 때 : 반환(요소)
11. 배열 메서드 : findIndex() : 배열 요소를 검색할 때 : 반환(숫자)
12. 배열 메서드 : filter() : 조건에 만족하는 배열 요소를 검색할 때 : 반환(배열)
13. 배열 메서드 : map() : 배열 요소를 추출하여 새로운 배열로 만듦 : 반환(배열)
14. 배열 메서드 : Array.from() : 문자열을 배열로 바꾸거나 배열 생성, 유사배열을 배열로 바꿀 수 있습니다. : 반환(배열)

01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자)

length 속성은 배열의 길이를 구할 수 있다.

번호	기본값	메서드	리턴값

//01
const arrNum = [100, 200, 300, 400, 500];

document.querySelector(".sample01_N1").innerHTML = "1";
document.querySelector(".sample01_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample01_M1").innerHTML = "length";
document.querySelector(".sample01_P1").innerHTML = arrNum.length;

//02
const arrTxt = ['a', 'b', 'c', 'd', 'f'];

document.querySelector(".sample01_N2").innerHTML = "2";
document.querySelector(".sample01_Q2").innerHTML = "['a', 'b', 'c', 'd', 'f']";
document.querySelector(".sample01_M2").innerHTML = "length";
document.querySelector(".sample01_P2").innerHTML = arrTxt.length;

//03
const arr = [1, 2, ['a', 'b']];

document.querySelector(".sample01_N3").innerHTML = "3";
document.querySelector(".sample01_Q3").innerHTML = "[1, 2, ['a', 'b']]";
document.querySelector(".sample01_M3").innerHTML = "length";
document.querySelector(".sample01_P3").innerHTML = arr.length; // 배열안에 배열도 원소 하나로 취급

02. 배열 메서드 : join() : 배열 요소 문자열을 결합 : 반환(문자열)

번호	기본값	메서드	리턴값

const arrNum = [100, 200, 300, 400, 500];
const text1 = arrNum.join('');
const text2 = arrNum.join(' ');
const text3 = arrNum.join('★');
const text4 = arrNum.join('-');

03. 배열 메서드 : push() / pop()

push() 메서드 배열 마지막 요소에 추가 하고, pop() 메서드는 배열 마지막 요소를 삭제합니다.

번호	기본값	메서드	리턴값	결과값

//01
const arrNum = [100, 200, 300, 400, 500];
const arrPush = arrNum.push(600);

document.querySelector(".sample03_N1").innerHTML = "1";
document.querySelector(".sample03_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample03_M1").innerHTML = "push(600)";
document.querySelector(".sample03_P1").innerHTML = arrPush; //6
document.querySelector(".sample03_A1").innerHTML = arrNum;  //100,200,300,400,500,600

//02
const arrNum2 = [100, 200, 300, 400, 500];
const arrPush2 = arrNum2.pop();

document.querySelector(".sample03_N2").innerHTML = "2";
document.querySelector(".sample03_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample03_M2").innerHTML = "pop()";
document.querySelector(".sample03_P2").innerHTML = arrPush2; //500
document.querySelector(".sample03_A2").innerHTML = arrNum2;  //100,200,300,400

04. 배열 메서드 : shift() / unshift()

unshift() : 배열 처음 요소에 추가 : return : 새로 추가된 배열의 길이 shift() : 배열 처음 요소 삭제 : return : 없앤 원소

번호	기본값	메서드	리턴값	결과값

const arrNum1 = [100, 200, 300, 400, 500];
const arrNumUnshift = arrNum1.unshift(600);
document.querySelector(".sample04_N1").innerHTML = "1";
document.querySelector(".sample04_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample04_M1").innerHTML = "unshift(600)";
document.querySelector(".sample04_P1").innerHTML = arrNumUnshift; 
document.querySelector(".sample04_A1").innerHTML = arrNum1; 


const arrNum2 = [100, 200, 300, 400, 500];
const arrNumshift = arrNum2.shift();
document.querySelector(".sample04_N2").innerHTML = "2";
document.querySelector(".sample04_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample04_M2").innerHTML = "shift()";
document.querySelector(".sample04_P2").innerHTML = arrNumshift; 
document.querySelector(".sample04_A2").innerHTML = arrNum2;

05. reverse() / sort()

reverse() : 순서를 반대로 정렬 sort() : 배열 요소를 정렬

번호	기본값	메서드	리턴값

    const arrNum1 = [100, 200, 300, 400, 500];
    const arrNumReverse = arrNum1.reverse();

    document.querySelector(".sample05_N1").innerHTML = "1";
    document.querySelector(".sample05_Q1").innerHTML = "[100, 200, 300, 400, 500]";
    document.querySelector(".sample05_M1").innerHTML = "reverse()";
    document.querySelector(".sample05_P1").innerHTML = arrNumReverse;

    const arrNum2 = [100, 200, 300, 400, 500];
    const arrNumSort2 = arrNum2.sort();

    document.querySelector(".sample05_N2").innerHTML = "2";
    document.querySelector(".sample05_Q2").innerHTML = "[100, 200, 300, 400, 500]";
    document.querySelector(".sample05_M2").innerHTML = "sort()";
    document.querySelector(".sample05_P2").innerHTML = arrNumSort2;

    const arrNum3 = [100, 500, 300, 400, 200];
    const arrNumSort3 = arrNum3.sort(function (a, b) { return b - a });

    document.querySelector(".sample05_N3").innerHTML = "3";
    document.querySelector(".sample05_Q3").innerHTML = "[100, 500, 300, 400, 200]";
    document.querySelector(".sample05_M3").innerHTML = "sort(function(a,b){return b-a}";
    document.querySelector(".sample05_P3").innerHTML = arrNumSort3;

    const arrNum4 = [400, 500, 300, 200, 100];
    const arrNumSort4 = arrNum4.sort(function (a, b) { return a - b });

    document.querySelector(".sample05_N4").innerHTML = "4";
    document.querySelector(".sample05_Q4").innerHTML = "[400, 500, 300, 200, 100]";
    document.querySelector(".sample05_M4").innerHTML = "sort(function(a,b){return a-b}";
    document.querySelector(".sample05_P4").innerHTML = arrNumSort4;

    const arrNum5 = ['c', 'b', 'e', 'w', 'h'];
    const arrNumSort5 = arrNum5.sort(function (a, b) { return a.localeCompare(b) });

    document.querySelector(".sample05_N5").innerHTML = "5";
    document.querySelector(".sample05_Q5").innerHTML = "['c', 'b', 'e', 'w', 'h']";
    document.querySelector(".sample05_M5").innerHTML = "a.localeCompare(b)";
    document.querySelector(".sample05_P5").innerHTML = arrNumSort5;

    const arrNum6 = ['c', 'b', 'e', 'w', 'h'];
    const arrNumSort6 = arrNum6.sort(function (a, b) { return b.localeCompare(a) });

    document.querySelector(".sample05_N6").innerHTML = "6";
    document.querySelector(".sample05_Q6").innerHTML = "['c', 'b', 'e', 'w', 'h']";
    document.querySelector(".sample05_M6").innerHTML = "b.localeCompare(a)";
    document.querySelector(".sample05_P6").innerHTML = arrNumSort6;

06. concat()

concat() : 배열을 결합하는 메서드

번호	기본값	메서드	리턴값

const arrNum1 = [100, 200, 300];
const arrNum2 = [400, 500, 600];
const arrNumConcat = arrNum1.concat(arrNum2);

document.querySelector(".sample06_N1").innerHTML = "1";
document.querySelector(".sample06_Q1").innerHTML = "[100, 200, 300], [400, 500, 600]";
document.querySelector(".sample06_M1").innerHTML = "arrNum1.concat(arrNum2)";
document.querySelector(".sample06_P1").innerHTML = arrNumConcat;

const arrSpread = [...arrNum1, ...arrNum2];
document.querySelector(".sample06_N2").innerHTML = "2";
document.querySelector(".sample06_Q2").innerHTML = "[100, 200, 300], [400, 500, 600]";
document.querySelector(".sample06_M2").innerHTML = "[...arrNum1, ...arrNum2]";
document.querySelector(".sample06_P2").innerHTML = arrSpread;

07. reduce() / reduceRight()

reduce() : 배열을 요소를 하나로 정리
reduceRight() reduce의 반대:

번호	기본값	메서드	리턴값

const arrNum1 = [100, 200, 300, 400, 500];
const arrReduce = arrNum1.reduce(element => element);

document.querySelector(".sample07_N1").innerHTML = "1";
document.querySelector(".sample07_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample07_M1").innerHTML = "arrNum1.reduce(element => element)";
document.querySelector(".sample07_P1").innerHTML = arrReduce;

const arrNum2 = [100, 200, 300, 400, 500];
const arrReduce2 = arrNum2.reduce((prev, curr) => prev + curr);

document.querySelector(".sample07_N2").innerHTML = "2";
document.querySelector(".sample07_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample07_M2").innerHTML = "arrNum2.reduce((prev, curr) => prev + curr)";
document.querySelector(".sample07_P2").innerHTML = arrReduce2;

const arrNum3 = [100, 200, 300, 400, 500];
let sum = 0;
for(let i = 0; i < arrNum3.length; i++) {
    sum += arrNum3[i];
}

document.querySelector(".sample07_N3").innerHTML = "3";
document.querySelector(".sample07_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample07_M3").innerHTML = "for()";
document.querySelector(".sample07_P3").innerHTML = sum;

const arrNum4 = [[100, 200], [300, 400]];
const arrReduce4 = arrNum4.reduce((prev, curr) => prev.concat(curr));

document.querySelector(".sample07_N4").innerHTML = "4";
document.querySelector(".sample07_Q4").innerHTML = "[[100, 200], [300, 400]]";
document.querySelector(".sample07_M4").innerHTML = "arrNum4.reduce((prev, curr) => p.concat(c))";
document.querySelector(".sample07_P4").innerHTML = arrReduce4;

const arrNum5 = ["javascript", "react", 'vue'];
const arrReduce5 = arrNum5.reduceRight((prev, curr) => prev + curr);

document.querySelector(".sample07_N5").innerHTML = "5";
document.querySelector(".sample07_Q5").innerHTML = '["javascript", "react", "vue"]';
document.querySelector(".sample07_M5").innerHTML = "arrNum5.reduceRight((prev, curr) => prev + curr);";
document.querySelector(".sample07_P5").innerHTML = arrReduce5;

08. slice()

slice() : 배열 자르기

번호	기본값	메서드	리턴값

const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.slice(2);

document.querySelector(".sample08_N1").innerHTML = "1";
document.querySelector(".sample08_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M1").innerHTML = "arrNum.slice(2)";
document.querySelector(".sample08_P1").innerHTML = result;

const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.slice(2, 3);

document.querySelector(".sample08_N1").innerHTML = "2";
document.querySelector(".sample08_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M1").innerHTML = "arrNum2.slice(2, 3)";
document.querySelector(".sample08_P1").innerHTML = result2;

const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.slice(2, 4);

document.querySelector(".sample08_N1").innerHTML = "3";
document.querySelector(".sample08_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M1").innerHTML = "arrNum2.slice(2, 4)";
document.querySelector(".sample08_P1").innerHTML = result3;

const arrNum4 = [100, 200, 300, 400, 500];
const result4 = arrNum4.slice(2, 5);

document.querySelector(".sample08_N1").innerHTML = "4";
document.querySelector(".sample08_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M1").innerHTML = "arrNum2.slice(2, 5)";
document.querySelector(".sample08_P1").innerHTML = result4;

const arrNum5 = [100, 200, 300, 400, 500];
const result5 = arrNum5.slice(-2);

document.querySelector(".sample08_N1").innerHTML = "5";
document.querySelector(".sample08_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M1").innerHTML = "arrNum2.slice(-2)";
document.querySelector(".sample08_P1").innerHTML = result5;

const arrNum6 = [100, 200, 300, 400, 500];
const result6 = arrNum6.slice(-2, 5);

document.querySelector(".sample08_N1").innerHTML = "6";
document.querySelector(".sample08_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M1").innerHTML = "arrNum2.slice(-2, 5)";
document.querySelector(".sample08_P1").innerHTML = result6;

09. splice()

splice() : 배열의 원소를 삭제시킬 수 있습니다. 삭제할 원소의 갯수도 지정할 수 있고, 삭제 후에 추가도 가능합니다.

번호	기본값	메서드	리턴값	결과값

const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.splice(2);

document.querySelector(".sample09_N1").innerHTML = "1";
document.querySelector(".sample09_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M1").innerHTML = "arrNum.splice(2)";
document.querySelector(".sample09_P1").innerHTML = result;
document.querySelector(".sample09_A1").innerHTML = arrNum;

const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.splice(2, 3);

document.querySelector(".sample09_N2").innerHTML = "2";
document.querySelector(".sample09_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M2").innerHTML = "arrNum.splice(2, 3)";
document.querySelector(".sample09_P2").innerHTML = result2;
document.querySelector(".sample09_A2").innerHTML = arrNum2;

const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.splice(2, 3, 'javascript');

document.querySelector(".sample09_N3").innerHTML = "3";
document.querySelector(".sample09_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M3").innerHTML = "arrNum.splice(2, 3, 'javascript')";
document.querySelector(".sample09_P3").innerHTML = result3;
document.querySelector(".sample09_A3").innerHTML = arrNum3;

const arrNum4 = [100, 200, 300, 400, 500];
const result4 = arrNum4.splice(1, 1, 'javascript');

document.querySelector(".sample09_N4").innerHTML = "4";
document.querySelector(".sample09_Q4").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M4").innerHTML = "arrNum.splice(1, 1, 'javascript')";
document.querySelector(".sample09_P4").innerHTML = result4;
document.querySelector(".sample09_A4").innerHTML = arrNum4;

const arrNum5 = [100, 200, 300, 400, 500];
const result5 = arrNum5.splice(1, 0, 'javascript');

document.querySelector(".sample09_N5").innerHTML = "5";
document.querySelector(".sample09_Q5").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M5").innerHTML = "arrNum.splice(1, 0, 'javascript')";
document.querySelector(".sample09_P5").innerHTML = result5;
document.querySelector(".sample09_A5").innerHTML = arrNum5;

const arrNum6 = [100, 200, 300, 400, 500];
const result6 = arrNum6.splice(0, 4, 'javascript');

document.querySelector(".sample09_N6").innerHTML = "6";
document.querySelector(".sample09_Q6").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M6").innerHTML = "arrNum.splice(0, 4, 'javascript')";
document.querySelector(".sample09_P6").innerHTML = result6;
document.querySelector(".sample09_A6").innerHTML = arrNum6;

10. lndexOf() / lastIndexOf() / includes()

lndexOf() : 배열의 요소 찾기 : 인덱스 반환
lastIndexOf() : 배열의 요소 찾기 (거꾸로 부터) : 인덱스 반환
includes() : 배열의 특정 요소가 포함되었나 찾기 : 불린값 반환

번호	기본값	메서드	리턴값

const arrNum = [100, 200, 300, 400, 500];
const arrIndex = arrNum.indexOf(200);

document.querySelector(".sample10_N1").innerHTML = "1";
document.querySelector(".sample10_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M1").innerHTML = "arrNum.indexOf(200)";
document.querySelector(".sample10_P1").innerHTML = arrIndex;

const arrNum2 = [100, 200, 300, 400, 500];
const arrIndex2 = arrNum2.indexOf(300);

document.querySelector(".sample10_N2").innerHTML = "2";
document.querySelector(".sample10_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M2").innerHTML = "arrNum2.indexOf(300)";
document.querySelector(".sample10_P2").innerHTML = arrIndex2;

const arrNum3 = [100, 200, 300, 400, 500];
const arrIndex3 = arrNum3.indexOf(600);

document.querySelector(".sample10_N3").innerHTML = "3";
document.querySelector(".sample10_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M3").innerHTML = "arrNum3.indexOf(600)";
document.querySelector(".sample10_P3").innerHTML = arrIndex3;

const arrNum4 = [100, 200, 300, 400, 200];
const arrIndex4 = arrNum4.lastIndexOf(200);

document.querySelector(".sample10_N4").innerHTML = "4";
document.querySelector(".sample10_Q4").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M4").innerHTML = "arrNum.lastIndexOf(200)";
document.querySelector(".sample10_P4").innerHTML = arrIndex4;

const arrNum5 = [100, 200, 300, 400, 500];
const arrIncludes = arrNum5.includes(200);

document.querySelector(".sample10_N5").innerHTML = "5";
document.querySelector(".sample10_Q5").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M5").innerHTML = "arrNum.includes(200)";
document.querySelector(".sample10_P5").innerHTML = arrIncludes;

const arrNum6 = [100, 200, 300, 400, 500];
const arrIncludes2 = arrNum6.includes(600);

document.querySelector(".sample10_N6").innerHTML = "6";
document.querySelector(".sample10_Q6").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M6").innerHTML = "arrNum6.includes(600)";
document.querySelector(".sample10_P6").innerHTML = arrIncludes2;

11. find() / findIndex()

find() : 배열의 요소를 찾는다
findIndex() 해당하는 배열의 요소의 인덱스를 찾는다.

번호	기본값	메서드	리턴값

const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.find(element => element === 300);

document.querySelector(".sample11_N1").innerHTML = "1";
document.querySelector(".sample11_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M1").innerHTML = "arrNum.find(function(element) {return element === 300})";
document.querySelector(".sample11_P1").innerHTML = result;

const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.find(element => element === 600);

document.querySelector(".sample11_N2").innerHTML = "2";
document.querySelector(".sample11_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M2").innerHTML = "arrNum2.find(function(element) {return element === 600})";
document.querySelector(".sample11_P2").innerHTML = result2;

const arrText3 = ['javascript', 'jquery', 'react'];
const result3 = arrText3.find(el => el === 'javascript');

document.querySelector(".sample11_N3").innerHTML = "3";
document.querySelector(".sample11_Q3").innerHTML = "['javascript', 'jquery', 'react']";
document.querySelector(".sample11_M3").innerHTML = "arrText3.find(el => el === 'javascript')";
document.querySelector(".sample11_P3").innerHTML = result3;

const arrNum4 = ['javascript', 'jquery', 'react'];
const result4 = arrNum4.findIndex(element => element === 'javascript');

document.querySelector(".sample11_N4").innerHTML = "4";
document.querySelector(".sample11_Q4").innerHTML = "['javascript', 'jquery', 'react']";
document.querySelector(".sample11_M4").innerHTML = "arrNum4.findIndex(element => element === 'javascript')";
document.querySelector(".sample11_P4").innerHTML = result4;

const arrNum5 = ['javascript', 'jquery', 'react'];
const result5 = arrNum5.findIndex(element => element === "html");

document.querySelector(".sample11_N5").innerHTML = "5";
document.querySelector(".sample11_Q5").innerHTML = "['javascript', 'jquery', 'react']";
document.querySelector(".sample11_M5").innerHTML = "arrNum5.findIndex(element => element === 'html')";
document.querySelector(".sample11_P5").innerHTML = result5;

12. filter()

filter() : 배열의 요소를 찾거나 조건에 맞는 요소들을 걸러낸다.

번호	기본값	메서드	리턴값

const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.filter(el => el === 300);

document.querySelector(".sample12_N1").innerHTML = "1";
document.querySelector(".sample12_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample12_M1").innerHTML = "arrNum.filter(el => el === 300)";
document.querySelector(".sample12_P1").innerHTML = result;

const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.filter(el => el === 600);

document.querySelector(".sample12_N2").innerHTML = "2";
document.querySelector(".sample12_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample12_M2").innerHTML = "arrNum.filter(el => el === 600)";
document.querySelector(".sample12_P2").innerHTML = result2;

const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.filter(el => el >= 300);

document.querySelector(".sample12_N3").innerHTML = "3";
document.querySelector(".sample12_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample12_M3").innerHTML = "arrNum.filter(el => el === 300)";
document.querySelector(".sample12_P3").innerHTML = result3;

13. map()

map() : 배열을 순회하면서 작업한 후 결과 값을 반환해준다.

번호	기본값	메서드	리턴값

const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.map((el) => el);

document.querySelector(".sample13_N1").innerHTML = "1";
document.querySelector(".sample13_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample13_M1").innerHTML = "arrNum.map(el => el)";
document.querySelector(".sample13_P1").innerHTML = result;

const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.map((el) => el + "J");

document.querySelector(".sample13_N2").innerHTML = "2";
document.querySelector(".sample13_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample13_M2").innerHTML = "arrNum2.map((el) => el + 'J')";
document.querySelector(".sample13_P2").innerHTML = result2;

const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.map((el) => el + 100);

document.querySelector(".sample13_N3").innerHTML = "3";
document.querySelector(".sample13_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample13_M3").innerHTML = "arrNum3.map((el) => el + 100)";
document.querySelector(".sample13_P3").innerHTML = result3;

const arrNum4 = [{a : 100}, {a : 200}, {a : 300}];
const result4 = arrNum4.map((el) => el.a);

document.querySelector(".sample13_N4").innerHTML = "4";
document.querySelector(".sample13_Q4").innerHTML = "[{a : 100}, {a : 200}, {a : 300}]";
document.querySelector(".sample13_M4").innerHTML = "arrNum4.map((el) => el.a)";
document.querySelector(".sample13_P4").innerHTML = result4;

14. Array.from()

Array.from() : 문자열을 배열로 바꿀 수 있습니다.

번호	기본값	메서드	리턴값

 const text = 'javascript';
const result = Array.from(text);
console.log(result);

document.querySelector(".sample14_N1").innerHTML = "1";
document.querySelector(".sample14_Q1").innerHTML = "'javascript'";
document.querySelector(".sample14_M1").innerHTML = "Array.from(text)";
document.querySelector(".sample14_P1").innerHTML = result;

const text2 = 'javascript';
const result2 = Array.from(text, el => el + "10");
document.querySelector(".sample14_N2").innerHTML = "2";
document.querySelector(".sample14_Q2").innerHTML = "'javascript'";
document.querySelector(".sample14_M2").innerHTML = "Array.from(text2, el => el + '10')";
document.querySelector(".sample14_P2").innerHTML = result2;

const text3 = 'javascript';
const result3 = [...text3].map(el => el);
document.querySelector(".sample14_N3").innerHTML = "3";
document.querySelector(".sample14_Q3").innerHTML = "'javascript'";
document.querySelector(".sample14_M3").innerHTML = "[...text3].map(el => el)";
document.querySelector(".sample14_P3").innerHTML = result3;