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

//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() : 배열 요소 문자열을 결합 : 반환(문자열)

length 속성은 배열의 길이를 구하기 위해서 사용한다.

번호	기본값	메서드	리턴값

//01

    const arrNum = [100, 200, 300, 400, 500];
    document.querySelector(".sample02_N1").innerHTML = "1";
    document.querySelector(".sample02_Q1").innerHTML = "[100, 200, 300, 400, 500]";
    document.querySelector(".sample02_M1").innerHTML = "length";
    document.querySelector(".sample02_P1").innerHTML = arrNum.length

//02
    const arrTxt= [100, 200, 300, 400, 500];


    document.querySelector(".sample02_N2").innerHTML = "2";
    document.querySelector(".sample02_Q2").innerHTML = "['a', 'b', 'c', 'd', 'e']";
    document.querySelector(".sample02_M2").innerHTML = "length";
    document.querySelector(".sample02_P2").innerHTML = arrNum.length
//03
    const arr= [1, 2, ['a', 'b']];

    document.querySelector(".sample02_N3").innerHTML = "3";
    document.querySelector(".sample02_Q3").innerHTML = "[1, 2, ['a', 'b']]";
    document.querySelector(".sample02_M3").innerHTML = "length";
    document.querySelector(".sample02_P3").innerHTML = arrNum.length

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
    
    //03-1
    const arrNum2 = [100, 200, 300, 400, 500];
    const arrPush2 = arrNum2.push();

    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() : 배열 처음 요소 삭제 : 반환(삭제된 요소)

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

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; //500
    document.querySelector(".sample04_A1").innerHTML = arrNum1;  //100, 200, 300, 400

    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; //500
    document.querySelector(".sample04_A2").innerHTML = arrNum1;  //100, 200, 300, 400

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, 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, 200, 400, 300, 100];
    const arrNumSort4 = arrNum4.sort(function(a,b) {return a-b}); 

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

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


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

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

concat() : 배열 요소를 결합할 때 : 반환(배열)

번호	기본값	메서드	리턴값

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 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(),reduceRigth()

reduce() : 배열 요소를 하나로 정리 : 반환(결과값)
reduceRigth() : 배열 요소를 하나로 정리 : 반환(결과값)

번호	기본값	메서드	리턴값

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 result1 = 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 = result1; 

const result2 = 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 = ".slice(2,4)";
document.querySelector(".sample08_P3").innerHTML = result2; 

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



const result4 = arrNum.slice(2,6)

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



const result5 = arrNum.slice(-2)

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


const result6 = arrNum.slice(-2,5)

document.querySelector(".sample08_N7").innerHTML = "7";
document.querySelector(".sample08_Q7").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M7").innerHTML = "arrNum.slice(-2,5)";
document.querySelector(".sample08_P7").innerHTML = result6;

09. 배열 메서드 : splice()

splice() : 배열 요소를 다른 요소로 변경 : 반환(배열)

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

arrNum1 = [100, 200, 300, 400, 500];

const result1 = arrNum1.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 = result1; 
document.querySelector(".sample09_A1").innerHTML = arrNum1;  

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(1,1, 'jvascript');

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,'jvascript')";
document.querySelector(".sample09_P3").innerHTML = result3; 
document.querySelector(".sample09_A3").innerHTML = arrNum3; 

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

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

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

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


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

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

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

배열 메서드 : indexOf() : 배열 요소를 검색 할 때 : 반환(숫자)
배열 메서드 : lastIndexOf() : 배열 요소를 끝에서 검색 할 때 : 반환(숫자)
배열 메서드 : includes() : 배열 요소를 검색 할 때 : 반환(불린)

번호	기본값	메서드	리턴값

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; 

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; 

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(200)";
document.querySelector(".sample10_P3").innerHTML = arrIndex3; 

arrNum4 = [100, 200, 300, 400, 500]
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; 

arrNum5 = [100, 200, 300, 400, 500]
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 = "arrNum5.includes(200)";
document.querySelector(".sample10_P5").innerHTML = arrIndex5; 

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 = "arrNum6.includes(600)";
document.querySelector(".sample10_P6").innerHTML = arrIndex6;

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

11. 배열 메서드 : findIndex() : 배열 요소를 검색 할 때 : 반환(숫자) 11. 배열 메서드 : find() 배열 요소를 검색 할 때 : 반환(요소)

번호	기본값	메서드	리턴값

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

const result2 = arrNum2.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 = "['javascript', 'jquery', 'react']";
document.querySelector(".sample11_M3").innerHTML = "arrText.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 = "['javascript', 'jquery', 'react']";
document.querySelector(".sample11_M4").innerHTML = "arrText.findIndex(el => el === 'javascript')";
document.querySelector(".sample11_P4").innerHTML = result4; 

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

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

12. 배열 메서드 : 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 = arrNum.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 = arrNum.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 = arrNum1.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);
//객체 상태에서 테이터를 불러올때 많이 사용한다. (react에서 많이 사용함)
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()

번호	기본값	메서드	리턴값

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

//map을 사용해서 표현하기도 함
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;