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

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

번호 기본값 메서드 리턴값 
const arrNum = [100, 200, 300, 400, 500];

arrNum.map(function (el) { });

document.querySelector(".sample01_N1").innerHTML = "1";
document.querySelector(".sample01_Q1").innerHTML = "['a','b','c','d','e','f']";
document.querySelector(".sample01_M1").innerHTML = "length";
document.querySelector(".sample01_P1").innerHTML = arrNum.length;

const arrTxt = [1, 2, ['a', 'b']];

document.querySelector(".sample01_N2").innerHTML = "2";
document.querySelector(".sample01_Q2").innerHTML = "['a','b','c','d','e','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( ) : 배열 마지막 요소에 추가 : 반환 (숫자) ⭐️⭐️

배열 마지막에 요솔를 추가하고 숫자로 반환 한다.

번호 기본값 메서드 리턴값 결과값 
// 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()";
document.querySelector(".sample03_P1").innerHTML = arrPush; // 6 갯수 출력
document.querySelector(".sample03_A1").innerHTML = arrNum;  // 100,200,300,400,500,600 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. 배열 메서드 : 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;
document.querySelector(".sample04_A1").innerHTML = arrNum1;

const arrNum2 = [100, 200, 300, 400, 500];
const arrNumshift = arrNum1.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 arrNum2Sort2 = 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 = arrNum2Sort2;

const arrNum3 = [100, 200, 300, 400, 500];
const arrNum2Sort3 = arrNum2.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()";
document.querySelector(".sample05_P3").innerHTML = arrNum2Sort3;

const arrNum4 = [500, 400, 300, 200, 100];
const arrNum2Sort4 = arrNum2.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()";
document.querySelector(".sample05_P4").innerHTML = arrNum2Sort4;

const arrNum5 = ['c', 'b', 'e', 'w', 'h'];
const arrNum2Sort5 = arrNum2.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()";
document.querySelector(".sample05_P5").innerHTML = arrNum2Sort5;

const arrNum6 = ['c', 'b', 'e', 'w', 'h'];
const arrNum2Sort6 = arrNum2.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()";
document.querySelector(".sample05_P6").innerHTML = arrNum2Sort6;

06. 배열 메서드 : concat( )

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

번호 기본값 메서드 리턴값 
const arrNum1 = [100, 200, 300];
const arrNum2 = [400, 400, 500];

const arrConcat = arrNum1.concat(arrNum2);

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

const arrSprerd = [...arrNum1, ...arrNum2];

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

07. 배열 메서드 : reduce( ), reduceRight()

reduce( ) : 배열 요소를 하나로 결합 : 반환 (결괏값)
reduceRight( ) : 배열 요소를 하나로 정리 : 반환 (결괏값)

번호 기본값 메서드 리턴값 
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 = "arrNum1.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]; // 1500
}

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

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, "javascirpt");

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

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

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)";
document.querySelector(".sample09_P4").innerHTML = result4;
document.querySelector(".sample09_A4").innerHTML = arrNum4;

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

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)";
document.querySelector(".sample09_P5").innerHTML = result5;
document.querySelector(".sample09_A5").innerHTML = arrNum5;

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

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)";
document.querySelector(".sample09_P6").innerHTML = result6;
document.querySelector(".sample09_A6").innerHTML = arrNum6;

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

indexOf( ) : 배열 요소를 검색할 때 : 반환 (숫자)
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, 200]";
document.querySelector(".sample10_M4").innerHTML = "arrNum4.indexOf(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 = "arrNum4.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, 600]";
document.querySelector(".sample10_M6").innerHTML = "arrNum4.includes(200)";
document.querySelector(".sample10_P6").innerHTML = arrIndex6;

11. 배열 메서드 : find( ), findIndex( ) ⭐️⭐️⭐️

find( ) : 배열 요소를 검색할 때 : 반환 (요소)
findIndex( ) : 배열를 요소 검색할 때 : 반환 (숫자)

번호 기본값 메서드 리턴값 
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, 600]";
document.querySelector(".sample11_M1").innerHTML = "arrNum.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, 600]";
document.querySelector(".sample11_M2").innerHTML = "arrNum.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 = "5";
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( ) ⭐️⭐️⭐️

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, 600]";
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, 600]";
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 = arrNum2.filter((el) => el >= 300);

document.querySelector(".sample12_N3").innerHTML = "3";
document.querySelector(".sample12_Q3").innerHTML = "[100, 200, 300, 400, 600]";
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, 600]";
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, 600]";
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, 600]";
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( ) : 문자열을 배열로 변환 : 반환 (결괏값)

번호 기본값 메서드 리턴값 
// 01
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);

// 02
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);

// 03 react 에서 많이 쓰인다.
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;

console.log(result3);