자바스크립트 : 문자열 객체

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

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

length 속성은 배열의 총 길이를 반환합니다.

번호	기본값	메서드	리턴값

//01
const arrNum1 = [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 = arrNum1.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 = arrNum1.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 = arrNum1.length;

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

join()은 배열에 들어있는 모든 요소를 연결해 하나의 문자열로 만듭니다. 특히 join()은 가장 많이 사용하는 메서드이기도 합니다.

번호	기본값	메서드	리턴값

//02
const arrNum = [100, 200, 300, 400, 500];
const text1 = arrNum.join('');
const text2 = arrNum.join(' '); //한 칸을 띄우면 인식해서 불러올때도 한 칸씩 띄워진다.
const text3 = arrNum.join('★'); //별을 넣게 되면 join이 인식해서 불러올때도 별이 생긴다.
const text4 = arrNum.join('-'); //-을 넣게 되면 join이 인식해서 불러올때도 -이 생긴다.

document.querySelector(".sample02_N1").innerHTML = "1";
document.querySelector(".sample02_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample02_M1").innerHTML = "join('')";
document.querySelector(".sample02_P1").innerHTML = text1;

document.querySelector(".sample02_N2").innerHTML = "2";
document.querySelector(".sample02_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample02_M2").innerHTML = "join(' ')";
document.querySelector(".sample02_P2").innerHTML = text2;

document.querySelector(".sample02_N3").innerHTML = "3";
document.querySelector(".sample02_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample02_M3").innerHTML = "join('★')";
document.querySelector(".sample02_P3").innerHTML = text3;

document.querySelector(".sample02_N4").innerHTML = "4";
document.querySelector(".sample02_Q4").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample02_M4").innerHTML = "join('-')";
document.querySelector(".sample02_P4").innerHTML = text4;

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

push() 메서드는 배열 마지막 요소에 추가하여 배열의 새로운 길이를 반환합니다.
pop() 메서드는 배열 마지막 요소를 삭제합니다.

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

//03
const arrNum = [100, 200, 300, 400, 500];
const arrPush = arrNum.push(600); //마지막에 숫자 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 arrpop = 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 = arrpop;   //리턴값 500 ->마지막요소를 불러오기 때문에 값이 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(600);

    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;

    //sort()메서드를 사용하는 경우는 배열의 내림차순 또는 오름차순으로 정렬하고 싶을 때 사용한다.
    const arrNum3 = [100, 200, 300, 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 = [500, 400, 300, 200, 100];
    const arrNum4 = [400, 500, 200, 100, 300];
    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', '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 = "sort(function(a, b){ return 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 = "sort(function(a, b){ return b.localeCompare(a) })";
    document.querySelector(".sample05_P6").innerHTML = arrNumSort6;
}

06. 배열 메서드 concat() : 펼침연산자이며 배열요소를 결합시켜준다.

concat( )메서드는

번호	기본값	메서드	리턴값

 //06
{
    const arrNum1 = [100, 200, 300];  //css속성값, 문자 등등이 배열에 들어갈 수 있다.
    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() : 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((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( let i=0; i<arrNum3.length; i++ ){sum += arrNum3[i];";
    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, 500]";
    document.querySelector(".sample07_M4").innerHTML = "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()

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 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 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 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 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 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() : 배열 요소를 다른 요소로 변경

splice( )메서드는

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

{
    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;

    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;

    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;

    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;

    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;

    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;
}

08. 배열 메서드 indexOf() / lastIndexOf() / includes()

slice( )메서드는

번호	기본값	메서드	리턴값

{
    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(200);

    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, 200]";
    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, 200]";
    document.querySelector(".sample10_M5").innerHTML = "arrNum.lastIndexOf(200)";
    document.querySelector(".sample10_P5").innerHTML = arrIndex5;

    const arrNum6 = [100, 200, 300, 400, 500];
    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()

slice( )메서드는

번호	기본값	메서드	리턴값

{
    const arrNum = [100, 200, 300, 400, 500];
    // const result = arrNum.find(function(element){
    //     return element === 300;
    // });
    // const result = arrNum.find((element) => {
    //     return element === 300;
    // });
    // const result = arrNum.find(element => {
    //     return element === 300;
    // });
    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(element => element === 300)";
    document.querySelector(".sample11_P1").innerHTML = result;

    const result2 = arrNum.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 = "arrNum.find(element => element === 600)";
    document.querySelector(".sample11_P2").innerHTML = result2;

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

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

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

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

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

    document.querySelector(".sample11_N5").innerHTML = "5";
    document.querySelector(".sample11_Q5").innerHTML = "['javascript', 'jquery', 'react']";
    document.querySelector(".sample11_M5").innerHTML = "arrNum.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;


    //find와 filter의 차이점 : 연산자 여부
    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()

베열을 새로 가져오는 것 뿐만 아니라 데이터 값을 조건에 맞게 변경하여 배열을 새로 만들어 가져온다.

번호	기본값	메서드	리턴값

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

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

번호	기본값	메서드	리턴값

{
    //배열을 만든다. , 콜백함수 기능도 사용할 수 있다.
    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;
    console.log(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;
    console.log(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;
}