- 01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자)
- 02. 배열 메서드 : join( ) : 배열 요소 문자열 결합 : 반환(문자열)
- 03. 배열 메서드 : push( ) : 배열 마지막 요소에 추가 : 반환(숫자)
- 04. 배열 메서드 : pop( ) : 배열 마지막 요소에 삭제 : 반환(삭제된 요소)
- 05. 배열 메서드 : unshift( ) : 배열 처음 요소에 추가 : 반환(숫자)
- 06.배열 메서드 : shift( ) : 배열 처음 요소 삭제 : 반환(삭제된 요소)
- 07.배열 메서드 : reverse( ) : 배열 요소의 순서를 반대로 정렬 : 반환(배열)
- 08.배열 메서드 : sort( ) : 배열 요소를 정렬 : 반환(배열)
- 09.배열 메서드 : concat( ) : 배열 요소를 결합 : 반환(배열)
- 10.배열 메서드 : reduce( ) : 배열 요소를 하나로 정리 : 반환(결과값)
- 11.배열 메서드 : reduceRight( ) : 배열 요소를 하나로 정리 : 반환(결과값)
- 12.배열 메서드 : slice( ) : 배열 요소를 다른 요소로 변경 : 반환(배열)
- 13.배열 메서드 : splice( ) : 배열 요소를 다른 요소로 변경 : 반환(배열)
- 14.배열 메서드 : indexOf( ) : 배열 요소 검색 : 반환(숫자)
- 15.배열 메서드 : lastIndexOf( ) : 배열 요소 끝에서 검색 : 반환(숫자)
- 16.배열 메서드 : includes( ) : 배열 요소 검색 : 반환(Boolean)
- 17.배열 메서드 : find( ) : 배열 요소 검색 : 반환(요소)
- 18.배열 메서드 : findIndex( ) : 배열 첫 요소 검색 : 반환(숫자)
- 19.배열 메서드 : filter( ) : 조건에 만족하는 배열 요소 검색 : 반환(배열)
- 20.배열 메서드 : map( ) : 배열 요소를 추출해서 새로운 배열로 만듬 : 반환(배열)
- 21.배열 메서드 : Array.from( ) : 배열로 변환하기 : 반환(배열)
01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자)
| 번호 | 기본값 | 속성값 | 리턴값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | .length | 5 |
| 2 | ['a', 'b', 'c', 'd', 'e'] | .length | 5 |
| 3 | [1, 2, ['a', 'b']] | .length | 3 |
{
const arrNum = [100, 200, 300, 400, 500];
const arrNumLength = arrNum.length;
document.querySelector(".sample01_R1").innerHTML = arrNumLength;
const arrText = ['a', 'b', 'c', 'd', 'e'];
const arrTextLength = arrText.length;
document.querySelector(".sample01_R2").innerHTML = arrTextLength;
const arr = [1, 2, ['a', 'b']];
const arrLength = arr.length;
document.querySelector(".sample01_R3").innerHTML = arrLength;
}02. 배열 메서드 : join( ) : 배열 요소 문자열 결합 : 반환(문자열)
| 번호 | 기본값 | 속성값 | 리턴값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | .join('*') | 100*200*300*400*500 |
| 2 | [100, 200, 300, 400, 500] | .join('-') | 100-200-300-400-500 |
| 3 | [100, 200, 300, 400, 500] | .join('') | 100200300400500 |
| 4 | [100, 200, 300, 400, 500] | .join('+') | 100+200+300+400+500 |
{
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( ) : 배열 마지막 요소에 추가 : 반환(숫자)
04. 배열 메서드 : pop( ) : 배열 마지막 요소에 삭제 : 반환(삭제된 요소)
| 번호 | 기본값 | 메서드 | 리턴값 | 결괏값 |
|---|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | .push(600) | 6 | 100,200,300,400,500,600 |
| 2 | [100, 200, 300, 400, 500] | .pop() | 500 | 100,200,300,400 |
{
const arrNum1 = [100, 200, 300, 400, 500];
const arrPush = arrNum1.push(600);
const arrNum2 = [100, 200, 300, 400, 500];
const arrPop = arrNum2.pop();
}05. 배열 메서드 : unshift( ) : 배열 처음 요소에 추가 : 반환(숫자)
06.배열 메서드 : shift( ) : 배열 처음 요소 삭제 : 반환(삭제된 요소)
| 번호 | 기본값 | 메서드 | 리턴값 | 결괏값 |
|---|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | .unshift(600) | 6 | 600,100,200,300,400,500 |
| 2 | [100, 200, 300, 400, 500] | .shift() | 100 | 200,300,400,500 |
{
const arrNum1 = [100, 200, 300, 400, 500];
const arrNumUnshift = arrNum1.unshift(600);
const arrNum2= [100, 200, 300, 400, 500];
const arrNumShift = arrNum2.shift();
}07.배열 메서드 : reverse( ) : 배열 요소의 순서를 반대로 정렬 : 반환(배열)
08.배열 메서드 : sort( ) : 배열 요소를 정렬 : 반환(배열)
| 번호 | 기본값 | 메서드 | 결괏값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | .reverse() | 500,400,300,200,100 |
| 2 | [100, 200, 300, 400, 500] | .sort() | 100,200,300,400,500 |
| 3 | [100, 200, 300, 400, 500] | .sort(function(a,b){return b-a}); | 500,400,300,200,100 |
| 4 | [500, 500, 300, 200, 100] | .sort(function(a,b){return a-b}); | 100,200,300,400,500 |
| 5 | ['c', 'd', 'e', 'a', 'b'] | .sort((a,b)=> a.localeCompare(b)); | a,b,c,d,e |
| 6 | ['c', 'd', 'e', 'a', 'b'] | .sort((a,b)=> b.localeCompare(a)); | e,d,c,b,a |
{
//reverse
const arrNum1 = [100, 200, 300, 400, 500];
const arrNumReverse = arrNum1.reverse();
document.querySelector(".sample05_R1").innerHTML = arrNumReverse;
// sort
const arrNum2 = [100, 200, 300, 400, 500];
const arrNumSort2 = arrNum2.sort();
document.querySelector(".sample05_R2").innerHTML = arrNumSort2;
const arrNum3 = [100, 200, 300, 400, 500];
const arrNumSort3 = arrNum3.sort(function(a,b){return b-a});
document.querySelector(".sample05_R3").innerHTML = arrNumSort3;
const arrNum4 = [500, 400, 300, 200, 100];
const arrNumSort4 = arrNum4.sort(function(a,b){return a-b});
document.querySelector(".sample05_R4").innerHTML = arrNumSort4;
const arrNum5 = ['c', 'd', 'e', 'a', 'b'];
const arrNumSort5 = arrNum5.sort((a,b)=> a.localeCompare(b));
document.querySelector(".sample05_R5").innerHTML = arrNumSort5;
const arrNum6 = ['c', 'd', 'e', 'a', 'b'];
const arrNumSort6 = arrNum6.sort((a,b)=> b.localeCompare(a));
document.querySelector(".sample05_R6").innerHTML = arrNumSort6;
}09.배열 메서드 : concat( ) : 배열 요소를 결합 : 반환(배열)
| 번호 | 기본값 | 메서드 | 결괏값 |
|---|---|---|---|
| 1 | [100, 200, 300], [400, 500, 600] | .concat(arrNum2); | 100,200,300,400,500,600 |
| 2 | [100, 200, 300], [400, 500, 600] | [...arrNum1, ...arrNum2] | 100,200,300,400,500,600 |
{
const arrNum1 = [100, 200, 300];
const arrNum2 = [400, 500, 600];
const arrConcat = arrNum1.concat(arrNum2);
document.querySelector(".sample06_R1").innerHTML = arrConcat;
const arrSpread = [...arrNum1, ...arrNum2]; //펼침 연산자로도 가능하다.
document.querySelector(".sample06_R2").innerHTML = arrSpread;
}10.배열 메서드 : reduce( ) : 배열 요소를 하나로 정리 : 반환(결과값)
11.배열 메서드 : reduceRight( ) : 배열 요소를 하나로 정리 : 반환(결과값)
| 번호 | 기본값 | 메서드 | 결괏값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | .reduce(element=>element); | 100 |
| 2 | [100, 200, 300, 400, 500] | .reduce((p, c)=> p + c); | 1500 |
| 3 | [100, 200, 300, 400, 500] | for() | 1500 |
| 4 | [[100, 200],[300, 400]] | .reduce((p,c)=> p.concat(c)); | 100,200,300,400 |
| 5 | ['javascript', 'react' ,'vue'] | .reduceRight((p,c)=> p+c); | vuereactjavascript |
{
const arrNum1 = [100, 200, 300, 400, 500];
const arrReduce1 = arrNum1.reduce(element=>element);
document.querySelector(".sample07_R1").innerHTML = arrReduce1;
const arrNum2 = [100, 200, 300, 400, 500];
const arrReduce2 = arrNum2.reduce((previuos, current)=> previuos + current);
document.querySelector(".sample07_R2").innerHTML = arrReduce2;
const arrNum3 = [100, 200, 300, 400, 500];
let sum = 0;
for(let i=0; i<arrNum3.length; i++){
sum = sum + arrNum3[i];
}
document.querySelector(".sample07_R3").innerHTML = sum;
const arrNum4 = [[100, 200],[300, 400]];
const arrReduce4 = arrNum4.reduce((p,c)=> p.concat(c));
document.querySelector(".sample07_R4").innerHTML = arrReduce4;
const arrNum5 = ["javascript", "react" ,"vue"];
const arrReduce5 = arrNum5.reduceRight((p,c)=> p+c);
document.querySelector(".sample07_R5").innerHTML = arrReduce5;
}12.배열 메서드 : slice( ) : 배열 요소를 다른 요소로 변경 : 반환(배열)
| 번호 | 기본값 | 메서드 | 결괏값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400 ,500] | .slice(2); | 300,400,500 |
| 2 | [100, 200, 300, 400 ,500] | .slice(2, 3); | 300 |
| 3 | [100, 200, 300, 400 ,500] | .slice(2, 4); | 300,400 |
| 4 | [100, 200, 300, 400 ,500] | .slice(2, 5); | 300,400,500 |
| 5 | [100, 200, 300, 400 ,500] | .slice(-2); | 400,500 |
| 6 | [100, 200, 300, 400 ,500] | .slice(-2, 5); | 400,500 |
{
const arrNum = [100, 200, 300, 400 ,500];
const result = arrNum.slice(2);
document.querySelector(".sample08_R1").innerHTML = result;
const result2 = arrNum.slice(2, 3);
document.querySelector(".sample08_R2").innerHTML = result2;
const result3 = arrNum.slice(2, 4);
document.querySelector(".sample08_R3").innerHTML = result3;
const result4 = arrNum.slice(2, 5);
document.querySelector(".sample08_R4").innerHTML = result4;
const result5 = arrNum.slice(-2);
document.querySelector(".sample08_R5").innerHTML = result5;
const result6 = arrNum.slice(-2, 5);
document.querySelector(".sample08_R6").innerHTML = result6;
}13.배열 메서드 : splice( ) : 배열 요소를 다른 요소로 변경 : 반환(배열)
| 번호 | 기본값 | 메서드 | 리턴값 | 결괏값 |
|---|---|---|---|---|
| 1 | [100, 200, 300, 400 ,500] | .splice(2); | 300,400,500 | 100,200 |
| 2 | [100, 200, 300, 400 ,500] | .splice(2, 3); | 300,400,500 | 100,200 |
| 3 | [100, 200, 300, 400 ,500] | .splice(2, 3, 'javascript'); | 300,400,500 | 100,200,javascript |
| 4 | [100, 200, 300, 400 ,500] | .splice(1, 1, 'javascript'); | 200 | 100,javascript,300,400,500 |
| 5 | [100, 200, 300, 400 ,500] | .splice(1, 0, 'javascript'); | 100,javascript,200,300,400,500 | |
| 6 | [100, 200, 300, 400 ,500] | .splice(0, 4, 'javascript', 'jquery'); | 100,200,300,400 | javascript,jquery,500 |
{
const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.splice(2);
document.querySelector(".sample09_P1").innerHTML = result;
document.querySelector(".sample09_R1").innerHTML = arrNum;
const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.splice(2, 3);
document.querySelector(".sample09_P2").innerHTML = result2;
document.querySelector(".sample09_R2").innerHTML = arrNum2;
const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.splice(2, 3, 'javascript');
document.querySelector(".sample09_P3").innerHTML = result3;
document.querySelector(".sample09_R3").innerHTML = arrNum3;
const arrNum4 = [100, 200, 300, 400, 500];
const result4 = arrNum4.splice(1, 1, 'javascript');
document.querySelector(".sample09_P4").innerHTML = result4;
document.querySelector(".sample09_R4").innerHTML = arrNum4;
const arrNum5 = [100, 200, 300, 400, 500];
const result5 = arrNum5.splice(1, 0, 'javascript');
document.querySelector(".sample09_P5").innerHTML = result5;
document.querySelector(".sample09_R5").innerHTML = arrNum5;
const arrNum6 = [100, 200, 300, 400, 500];
const result6 = arrNum6.splice(0, 4, 'javascript', 'jquery');
document.querySelector(".sample09_P6").innerHTML = result6;
document.querySelector(".sample09_R6").innerHTML = arrNum6;
}14.배열 메서드 : indexOf( ) : 배열 요소 검색 : 반환(숫자)
15.배열 메서드 : lastIndexOf( ) : 배열 요소 끝에서 검색 : 반환(숫자)
16.배열 메서드 : includes( ) : 배열 요소 검색 : 반환(Boolean)
| 번호 | 기본값 | 메서드 | 결괏값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400 ,500] | .indexOf(200); | 1 |
| 2 | [100, 200, 300, 400 ,500] | .indexOf(300); | 2 |
| 3 | [100, 200, 300, 400 ,500] | .indexOf(600); | -1 |
| 4 | [100, 200, 300, 400 ,200] | .lastIndexOf(200); | 4 |
| 5 | [100, 200, 300, 400 ,200] | .includes(200); | true |
| 6 | [100, 200, 300, 400 ,500] | .includes(600); | false |
{
const arrNum = [100, 200, 300 ,400 ,500];
const arrIndex = arrNum.indexOf(200);
document.querySelector(".sample10_R1").innerHTML = arrIndex;
const arrNum2 = [100, 200, 300 ,400 ,500];
const arrIndex2 = arrNum2.indexOf(300);
document.querySelector(".sample10_R2").innerHTML = arrIndex2;
const arrNum3 = [100, 200, 300 ,400 ,500];
const arrIndex3 = arrNum3.indexOf(600);
document.querySelector(".sample10_R3").innerHTML = arrIndex3;
const arrNum4 = [100, 200, 300 ,400 ,200];
const arrIndex4 = arrNum4.lastIndexOf(200);
document.querySelector(".sample10_R4").innerHTML = arrIndex4;
const arrNum5 = [100, 200, 300 ,400 ,200];
const arrIndex5 = arrNum4.includes(200);
document.querySelector(".sample10_R5").innerHTML = arrIndex5;
const arrNum6 = [100, 200, 300 ,400 ,500];
const arrIndex6 = arrNum6.includes(600);
document.querySelector(".sample10_R6").innerHTML = arrIndex6;
}17.배열 메서드 : find( ) : 배열 요소 검색 : 반환(요소)
18.배열 메서드 : findIndex( ) : 배열 첫 요소 검색 : 반환(숫자)
| 번호 | 기본값 | 메서드 | 결괏값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400 ,500] | .find(el=>el === 300); | 300 |
| 2 | [100, 200, 300, 400 ,500] | .find(el=>el === 600); | undefined |
| 3 | ['javascript', 'react', 'vue'] | .find(el=>el === 'javascript'; | javascript |
| 4 | ['javascript', 'react', 'vue'] | .findIndex(el=>el === 'javascript'; | 0 |
| 5 | ['javascript', 'react', 'vue'] | .findIndex(el=>el === 'html'; | -1 |
{
const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.find(el=>el === 300);
document.querySelector(".sample11_R1").innerHTML = result;
const result2 = arrNum.find(el=>el === 600);
document.querySelector(".sample11_R2").innerHTML = result2;
const arrText = ["javascript", "react", "vue"];
const result3 = arrText.find(el=>el === "javascript");
document.querySelector(".sample11_R3").innerHTML = result3;
const arrText2 = ["javascript", "react", "vue"];
const result4 = arrText2.findIndex(el=>el === "javascript");
document.querySelector(".sample11_R4").innerHTML = result4;
const arrText3 = ["javascript", "react", "vue"];
const result5 = arrText3.findIndex(el=>el === "html");
document.querySelector(".sample11_R5").innerHTML = result5;
}19.배열 메서드 : filter( ) : 조건에 만족하는 배열 요소 검색 : 반환(배열)
| 번호 | 기본값 | 메서드 | 결괏값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | .filter(el=>el === 300); | 300 |
| 2 | [100, 200, 300, 400, 500] | .filter(el=>el === 600); | |
| 3 | [100, 200, 300, 400, 500] | .filter(el=>el >= 300); | 300,400,500 |
{
const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.filter(el=>el === 300);
document.querySelector(".sample12_R1").innerHTML = result;
const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum.filter(el=>el === 600);
document.querySelector(".sample12_R2").innerHTML = result2;
const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.filter(el => el >= 300);
document.querySelector(".sample12_R3").innerHTML = result3;
}20.배열 메서드 : map( ) : 배열 요소를 추출해서 새로운 배열로 만듬 : 반환(배열)
| 번호 | 기본값 | 메서드 | 결괏값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | .map(el=>el); | 100,200,300,400,500 |
| 2 | [100, 200, 300, 400, 500] | .map(el=>el + 'j'); | 100j,200j,300j,400j,500j |
| 3 | [100, 200, 300, 400, 500] | .map(el=>el + 100); | 200,300,400,500,600 |
| 4 | [{a:100},{a:200},{a:300}] | .map(el=>el.a); | 100,200,300 |
{
const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.map(el => el);
document.querySelector(".sample13_R1").innerHTML = result;
const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.map(el => el + "j");
document.querySelector(".sample13_R2").innerHTML = result2;
const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.map(el => el + 100);
document.querySelector(".sample13_R3").innerHTML = result3;
const arrNum4 = [{a:100}, {a:200}, {a:300}];
const result4 = arrNum4.map(el => el.a);
document.querySelector(".sample13_R4").innerHTML = result4;
}21.배열 메서드 : Array.from( ) : 배열로 변환하기 : 반환(배열)
| 번호 | 기본값 | 메서드 | 결괏값 |
|---|---|---|---|
| 1 | javascript | Array.from() | j,a,v,a,s,c,r,i,p,t |
| 2 | javascript | Array.from(text2, el => el+'10') | j10,a10,v10,a10,s10,c10,r10,i10,p10,t10 |
| 3 | javascript | [...text3].map(el=>el) | j,a,v,a,s,c,r,i,p,t |
{
const text = "javascript";
const result = Array.from(text);
document.querySelector(".sample14_M1").innerHTML = "Array.from()";
document.querySelector(".sample14_R1").innerHTML = result;
const text2 = "javascript";
const result2 = Array.from(text2, el => el+"10");
document.querySelector(".sample14_M2").innerHTML = "Array.from(text2, el => el+'10')";
document.querySelector(".sample14_R2").innerHTML = result2;
const text3 = "javascript";
const result3 = [...text3].map(el=>el);
document.querySelector(".sample14_M3").innerHTML = "[...text3].map(el=>el)";
document.querySelector(".sample14_R3").innerHTML = result3;
}