자바스크립트 : 배열 객체

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

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

length 속성은 배열 길이를 구해서 숫자로 돌려준다.

번호	기본값	메서드	리턴값

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;

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;

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 메서드는 배열 마지막 요소를 삭제합니다.

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

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

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. 배열 메서드 : unshift()/ shift()

unshift() 메서드는 배열 처음 요소에 추가
shift() 배열 처음 요소에 삭제

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

//04
{
    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()";
    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()메서드는 배열을 반대로 정렬

번호	기본값	메서드	리턴값

//05
    {   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 = [300,100,200,400,500];
        const arrNumSort3 = arrNum3.sort(function(a,b){return b-a});

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

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

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

        const arrNum5 = ['c','a','q','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','a','q','w','h']";
        document.querySelector(".sample05_M5").innerHTML = "sort(function(a, b){return a.localeCompare(b)})";
        document.querySelector(".sample05_P5").innerHTML = arrNumSort5; 

        const arrNum6 = ['c','a','q','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','a','q','w','h']";
        document.querySelector(".sample05_M6").innerHTML = "sort(function(a, b){return b.localeCompare(a)})";
        document.querySelector(".sample05_P6").innerHTML = arrNumSort6; 
    }

결과 보기

06. 배열 메서드 : concat() : 펼침연산자 : 배열요소 결합

번호	기본값	메서드	리턴값

//06
    {
        const arrNum1 = [100,200,300];
        const arrNum2 = [400,500,600];

        const arrConcat = 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 = arrConcat; 

        const arrSpered = [...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 = arrSpered; 

    }

07. 배열 메서드 : reduce() /reduecRight()

번호	기본값	메서드	리턴값

//07
    {
        const arrNum1 = [100,200,300,400,500];
        const arrReduce1 = 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 = arrReduce1; 

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

        document.querySelector(".sample07_N2").innerHTML = "2";
        document.querySelector(".sample07_Q2").innerHTML = "[100,200,300,400,500]";
        document.querySelector(".sample07_M2").innerHTML = "arrNum2.reduce((p, c) => p + c)";
        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((p,c) => p.concat(c));

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

        const arrNum5 = ["javascript", "react", "vue"];
        const arrReduce5 = arrNum5.reduceRight((p,c)=>p+c);

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

08. 배열 메서드 : slice()

번호	기본값	메서드	리턴값

//08
    {
        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 = arrNum.slice(2,3);

        document.querySelector(".sample08_N2").innerHTML = "2";
        document.querySelector(".sample08_Q2").innerHTML = "[100,200,300,400,500]";
        document.querySelector(".sample08_M2").innerHTML = "arrNum.slice(2,3)";
        document.querySelector(".sample08_P2").innerHTML = result2;

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

        document.querySelector(".sample08_N3").innerHTML = "3";
        document.querySelector(".sample08_Q3").innerHTML = "[100,200,300,400,500]";
        document.querySelector(".sample08_M3").innerHTML = "arrNum.slice(2,4)";
        document.querySelector(".sample08_P3").innerHTML = result3;

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

        document.querySelector(".sample08_N4").innerHTML = "4";
        document.querySelector(".sample08_Q4").innerHTML = "[100,200,300,400,500]";
        document.querySelector(".sample08_M4").innerHTML = "arrNum.slice(2,5)";
        document.querySelector(".sample08_P4").innerHTML = result4;

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

        document.querySelector(".sample08_N5").innerHTML = "5";
        document.querySelector(".sample08_Q5").innerHTML = "[100,200,300,400,500]";
        document.querySelector(".sample08_M5").innerHTML = "arrNum.slice(-2)";
        document.querySelector(".sample08_P5").innerHTML = result5;

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

        document.querySelector(".sample08_N6").innerHTML = "6";
        document.querySelector(".sample08_Q6").innerHTML = "[100,200,300,400,500]";
        document.querySelector(".sample08_M6").innerHTML = "arrNum.slice(-2,5)";
        document.querySelector(".sample08_P6").innerHTML = result6;



    }

09. 배열 메서드 : splice : 배열 요소를 다른 요소로 변경

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

//09
    {
        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. 배열 메서드 : indexOf() / lastIndexOf() / includes()

번호	기본값	메서드	리턴값

//10
    {
        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 = "arrNum.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 = "arrNum.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,200];
        const arrIndex5 = 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 = arrIndex5;

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

11. 배열 메서드 : find() / findIndex()

번호	기본값	메서드	리턴값

    //11
    {
        const arrNum = [100,200,300,400,500];
        // const result = arrNum.find((element) => {
        //     return element === 300;
        // });
        //괄호생략
        // const result = arrNum.find(element => {
        //     return element === 300;
        // });
        //리턴생략
        const result = arrNum.find(e => e === 300);
        
        document.querySelector(".sample11_N1").innerHTML = "1";
        document.querySelector(".sample11_Q1").innerHTML = "[100,200,300,400,500]";
        document.querySelector(".sample11_M1").innerHTML = "find(e => e === 300)";
        document.querySelector(".sample11_P1").innerHTML = result;


        const result2 = arrNum.find(e => e === 600);
        
        document.querySelector(".sample11_N2").innerHTML = "2";
        document.querySelector(".sample11_Q2").innerHTML = "[100,200,300,400,500]";
        document.querySelector(".sample11_M2").innerHTML = "find(e => e === 600)";
        document.querySelector(".sample11_P2").innerHTML = result2;


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

        document.querySelector(".sample11_N3").innerHTML = "3";
        document.querySelector(".sample11_Q3").innerHTML = "[100,200,300,400,500]";
        document.querySelector(".sample11_M3").innerHTML = "find(el=>el==='javascript')";
        document.querySelector(".sample11_P3").innerHTML = result3;


        const result4 = arrText.findIndex(el=>el==="javascript");

        document.querySelector(".sample11_N4").innerHTML = "4";
        document.querySelector(".sample11_Q4").innerHTML = "[100,200,300,400,500]";
        document.querySelector(".sample11_M4").innerHTML = "findIndex(el=>el==='javascript')";
        document.querySelector(".sample11_P4").innerHTML = result4;

        
        const result5 = arrText.findIndex(el=>el==="html");

        document.querySelector(".sample11_N5").innerHTML = "5";
        document.querySelector(".sample11_Q5").innerHTML = "[100,200,300,400,500]";
        document.querySelector(".sample11_M5").innerHTML = "findIndex(el=>el==='html')";
        document.querySelector(".sample11_P5").innerHTML = result5;

    }

12. 배열 메서드 : filter() *****

번호	기본값	메서드	리턴값

//12
    {
        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 = "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 = "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 = "filter(el => el >= 300)";
        document.querySelector(".sample12_P3").innerHTML = result3;

    }

13. 배열 메서드 : map()

번호	기본값	메서드	리턴값

//13
    {
        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 = "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 = "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 = "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 = "map(el=>el.a)";
        document.querySelector(".sample13_P4").innerHTML = result4;
    }

14. 배열 메서드 : Array.from()

번호	기본값	메서드	리턴값

//14
    {
        const text = "javascript";
        const result = Array.from(text);

        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(text2, 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;
    }