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', 'e'];
document.querySelector(".sample01_N2").innerHTML = "2";
document.querySelector(".sample01_Q2").innerHTML = "['a', 'b', 'c', 'd', 'e']";
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() : 배열 요소 문자열 결합 : 반환(문자열) : ★★★
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. push()
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
//02. pop()
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(삭제된 요소 출력)
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(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, 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 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() 메서드는 두 개의 배열을 하나로 결합합니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
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() / reduceRight()
reduce() 메서드는 배열의 모든 요소들에 대해서 각각 연산을 수행하여
하나의 결과 값을 계산합니다.
reduceRight() 메서드는 reduce() 메서드와 동일하지만, 내림차순으로
접근합니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
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 = [1, 2, 3, 4, 5];
let sum = 0;
for (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 = "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 = "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 = result5;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.slice(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.slice(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.slice(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.slice(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.slice(1, 0, 'javascript')";
document.querySelector(".sample09_P5").innerHTML = "//";
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.slice(0, 4, 'javascript')";
document.querySelector(".sample09_P6").innerHTML = result6;
document.querySelector(".sample09_A6").innerHTML = arrNum6;10. 배열 메서드 : indexOf() / lastIndexOf() / includes()
indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를
반환하고 존재하지 않으면 -1을 반환합니다.
lastIndexOf() 메서드는 주어진 값과 일치하는 부분을 역순으로 탐색하여,
최초로 마주치는 인덱스를 반환합니다.
includes() 메서드는 배열이 특정 문자열을 포함하는지 확인하여, boolean
값을 반환합니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
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, 200]";
document.querySelector(".sample10_M4").innerHTML = "arrNum.lastindexOf(200)";
document.querySelector(".sample10_P4").innerHTML = arrIndex4;
const arrNum5 = [100, 200, 300, 500, 200];
const arrIndex5 = arrNum5.lastIndexOf(600);
document.querySelector(".sample10_N5").innerHTML = "5";
document.querySelector(".sample10_Q5").innerHTML = "[100, 200, 300, 400, 200]";
document.querySelector(".sample10_M5").innerHTML = "arrNum.lastindexOf(600)";
document.querySelector(".sample10_P5").innerHTML = arrIndex5;
const arrNum6 = [100, 200, 300, 500, 200];
const arrIndex6 = arrNum6.includes(600);
document.querySelector(".sample10_N6").innerHTML = "6";
document.querySelector(".sample10_Q6").innerHTML = "[100, 200, 300, 400, 200]";
document.querySelector(".sample10_M6").innerHTML = "arrNum.includes(600)";
document.querySelector(".sample10_P6").innerHTML = arrIndex6;11. 배열 메서드 : find() ★★★ / findIndex() ★★★
find() 메서드는 배열 요소를 검색하여, 요소를 반환합니다. 요소가 없으면
undefined를 반환합니다.
findIndex() 메서드는 배열 요소를 검색하여, 요소의 인덱스값을 반환합니다.
요소가 없으면 -1을 반환합니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
const arrNum = [100, 200, 300, 400, 500];
// 1. const result = arrNum.find(function(element){
// return element === 300;
// });
// 2. const result = arrNum.find(element => {
// return element === 300;
// });
// 3. const result = arrNum.find(element => 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 = "['javascript', 'jquery', 'react']";
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 = "['javascript', 'jquery', 'react']";
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 = "['javascript', 'jquery', 'react']";
document.querySelector(".sample11_M5").innerHTML = "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, 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 = "//";
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() : 배열 요소를 추출하여 새로운 배열 생성 : 반환(배열) : ★★★
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 = "1";
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 = "1";
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 = "1";
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);
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;