01. 배열 속성 : length : 배열 길이 구하기

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

번호 기본값 메서드 리턴값
1 [100, 200, 300, 400, 500] arrNum.length 5
2 ['a', 'b', 'c', 'd', 'e', 'f'] arrTxt.length 6
3 [1, 2, ['c', 'd']] arr.length 3 
//01
const arrNum = [100, 200, 300, 400, 500];
//02
const arrTxt = ['a', 'b', 'c', 'd', 'e', 'f'];
//03
const arr = [1, 2, ['c', 'd']];

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

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

번호 기본값 메서드 리턴값
1 [100, 200, 300, 400, 500] join('') 100200300400500
2 [100, 200, 300, 400, 500] join(' ') 100 200 300 400 500
3 [100, 200, 300, 400, 500] join('★') 100★200★300★400★500
4 [100, 200, 300, 400, 500] join('-') 100-200-300-400-500 
const arrNum = [100, 200, 300, 400, 500];
//01
const text1 = arrNum.join("");
//02
const text2 = arrNum.join(" ");
//03
const text3 = arrNum.join("★");
//04
const text4 = arrNum.join("-");

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

push() 매서드는 마지막 요소에 추가하며, 전체길이값을 반환합니다.
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 
//01
const arrNum = [100, 200, 300, 400, 500];
const arrPush = arrNum.push(600);
//02
const arrNum2 = [100, 200, 300, 400, 500];
const arrPop = arrNum2.pop();

04. 배열 메서드 : unshift() / shift()

unshift() 메서드는 배열 처음 요소에 추가
shift() 메서드는 배열 처음 요소에 삭제

번호 기본값 메서드 리턴값 결과값
1 [100, 200, 300, 400, 500] unshift(600) 6 600,100,200,300,400,500
1 [100, 200, 300, 400, 500] shift() 100 200,300,400,500 
// 01
const arrNum = [100, 200, 300, 400, 500];
const arrUnshift = arrNum.unshift(600);
// 02
const arrNum2 = [100, 200, 300, 400, 500];
const arrShift = arrNum2.shift();

05. 배열 메서드 : reverse() / sort()

reverse() 메서드는 배열 요소의 순서를 반대로 정렬 sort 메서드는 배열 정렬

번호 기본값 메서드 리턴값
1 [100, 200, 300, 400, 500] reverse() 500,400,300,200,100
2 [100, 200, 200, 300, 400, 500] sort() 100,200,200,300,400,500
3 [100, 200, 200, 300, 400, 500] sort((a, b) => b - a) 500,400,300,200,100
4 [500, 400, 300, 200, 100] sort((a, b) => a - b) 100,200,300,400,500
5 [500, 400, 300, 200, 100] sort((a, b) => a.localeCompare(b)) a,b,d,e,t
6 [500, 400, 300, 200, 100] sort((a, b) => a.localeCompare(b)) t,e,d,b,a 
// 01
const arrNum = [100, 200, 300, 400, 500];
const arrReverse = arrNum.reverse();
// 02
const arrNum2 = [100, 200, 200, 300, 400, 500];
const arrSort = arrNum2.sort();
// 03
const arrNum3 = [500, 400, 300, 200, 100];
const arrSort3 = arrNum3.sort( (a, b) => b - a );
// 04
const arrNum4 = [500, 400, 300, 200, 100];
const arrSort4 = arrNum4.sort( (a, b) => a - b );
// 05
const arrNum5 = ['t','d','e','a','b'];
const arrSort5 = arrNum5.sort( (a, b) => a.localeCompare(b) );

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

concat() 매서드는 배열요소를 결합시킵니다.

번호 기본값 메서드 리턴값
1 [100, 200, 300], [400, 500, 600] arrNum1.concat(arrNum2) 100,200,300,400,500,600
2 [100, 200, 300], [400, 500, 600] arrSpered = [...arrNum1, ...arrNum2] 100,200,300,400,500,600 
//01
const arrNum1 = [100, 200, 300];
const arrNum2 = [400, 500, 600];
const arrConcat = arrNum1.concat(arrNum2);
//02
const arrSpered = [...arrNum1, ...arrNum2];

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

reduce() 매서드는 메서드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환합니다.
reduceRight() 매서드는 메서드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환합니다.

번호 기본값 메서드 리턴값
1 [100, 200, 300, 400, 500] arrNum1.reduce((element) => element) 100
2 [100, 200, 300, 400, 500] arrNum1.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] arrNum4.reduceRight((p, c) => p + c) vuereactjavascript 
//01
const arrNum1 = [100, 200, 300, 400, 500];
const arrReduce1 = arrNum1.reduce((element) => element);

//02
const arrNum2 = [100, 200, 300, 400, 500];
const arrReduce2 = arrNum1.reduce((p, c) => p + c);

//03
const arrNum3 = [100, 200, 300, 400, 500];
let sum = 0;
for (let i = 0; i < arrNum2.length; i++) sum += arrNum3[i];
    
//04 
const arrNum4 = [
    [100, 200],
    [300, 400],
];
const arrReduce4 = arrNum4.reduce((p, c) => p.concat(c));
    
//05
const arrNum5 = ["javascript", "react", "vue"];
const arrReduce5 = arrNum5.reduceRight((p, c) => p + c);

08. 배열 메서드 : slice()

slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

번호 기본값 메서드 리턴값
1 [100, 200, 300, 400, 500] arrNum1.slice(2) 300,400,500
2 [100, 200, 300, 400, 500] arrNum1.slice(3) 400,500
3 [100, 200, 300, 400, 500] arrNum1.slice(2, 4) 300,400
4 [100, 200, 300, 400, 500] arrNum1.slice(2, 5) 300,400,500
5 [100, 200, 300, 400, 500] arrNum1.slice(-2) 400,500
6 [100, 200, 300, 400, 500] arrNum1.slice(-2, 5) 400,500 
//01
const arrNum1 = [100, 200, 300, 400, 500];
const result = arrNum1.slice(2);

//02
const result2 = arrNum1.slice(3);
 
//03
const result3 = arrNum1.slice(2, 4);
                
//04
const result4 = arrNum1.slice(2, 5);

//05
const result5 = arrNum1.slice(-2);

//06
const result6 = arrNum1.slice(-2, 5);

09. 배열 메서드 : splice() : 배열 요소를 다른 요소로 변경

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

번호 기본값 메서드 리턴값 결과값
1 [100, 200, 300, 400, 500] arrNum1.slice(2) 300,400,500 100,200
2 [100, 200, 300, 400, 500] arrNum2.slice(2, 3) 300,400,500 100,200
3 [100, 200, 300, 400, 500] arrNum3.slice(2, 3, 'javascript') 300,400,500 100,200,javascript
4 [100, 200, 300, 400, 500] arrNum4.slice(1, 1, 'javascript') 200 100,javascript,300,400,500
5 [100, 200, 300, 400, 500] arrNum5.slice(1, 0, 'javascript') 100,javascript,200,300,400,500
6 [100, 200, 300, 400, 500] arrNum5.slice(0, 4, 'javascript') 100,200,300,400 javascript,500 
//01
const arrNum1 = [100, 200, 300, 400, 500];
const result = arrNum1.splice(2);
 
//02
const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.splice(2, 3);

//03
const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.splice(2, 3, "javascript");
 
//04
const arrNum4 = [100, 200, 300, 400, 500];
const result4 = arrNum4.splice(1, 1, "javascript");
                
//05
const arrNum5 = [100, 200, 300, 400, 500];
const result5 = arrNum5.splice(1, 0, "javascript");
          
//06
const arrNum6 = [100, 200, 300, 400, 500];
const result6 = arrNum6.splice(0, 4, "javascript");

10. 배열 메서드 : indexof() / lastIndexof() / includes()

indexof(),lastIndexof()메서드는 문자열에서 특정 문자의 위치를 찾고 숫자를 반환합니다.

번호 기본값 메서드 리턴값
1 [100, 200, 300, 400, 500] arrNum1.indexOf(200) 1
2 [100, 200, 300, 400, 500] arrNum2.indexOf(200) 2
3 [100, 200, 300, 400, 500] arrNum3.indexOf(600) -1
4 [100, 200, 300, 400, 200] arrNum4.lastIndexOf(200) 4
5 [100, 200, 300, 400, 200] arrNum5.lastIndexOf(600) -1
6 [100, 200, 300, 400, 200] arrNum6.includes(600) false 
//01
const arrNum1 = [100, 200, 300, 400, 500];
const arrIndex = arrNum1.indexOf(200);

//02
const arrNum2 = [100, 200, 300, 400, 500];
const arrIndex2 = arrNum2.indexOf(300);
                
//03                
const arrNum3 = [100, 200, 300, 400, 500];
const arrIndex3 = arrNum3.indexOf(600);
                
//04                
const arrNum4 = [100, 200, 300, 400, 200];
const arrIndex4 = arrNum4.lastIndexOf(200);
                
//05                
const arrNum5 = [100, 200, 300, 400, 200];
const arrIndex5 = arrNum5.lastIndexOf(600);
                
//06      
const arrNum6 = [100, 200, 300, 400, 200];
const arrIndex6 = arrNum6.includes(600);

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

find()메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.
findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

번호 기본값 메서드 리턴값
1 [100, 200, 300, 400, 500] arrNum1.find((e) => e === 300) 300
2 [100, 200, 300, 400, 500] arrNum2.find((e) => e === 600) undefined
3 ['javascript', 'jquery', 'react'] arrText.find((e) => e === 'javascript'); javascript
4 ['javascript', 'jquery', 'react'] arrText.findIndex((e) => e === 'javascript') 0
5 ['javascript', 'jquery', 'react'] arrNum5.findIndex((e) => e === 'html') -1 
//01
const arrNum1 = [100, 200, 300, 400, 500];
const result1 = arrNum1.find((e) => e === 300);
                          
//02
const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.find((e) => e === 600);
                
//03               
const arrText = ["javascript", "jquery", "react"];
const result3 = arrText.find((e) => e === "javascript");
                
//04               
const result4 = arrText.findIndex((e) => e === "javascript");
                
//05            
const result5 = arrText.findIndex((e) => e === "html");

12. 배열 메서드 : filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

번호 기본값 메서드 리턴값
1 [100, 200, 300, 400, 500] arrNum1.filter((e) => e === 300) 300
1 [100, 200, 300, 400, 500] arrNum2.filter((e) => e === 600)
1 [100, 200, 300, 400, 500] arrNum3.filter((e) => e >= 300) 300,400,500 
//01
 const arrNum1 = [100, 200, 300, 400, 500];
 const result1 = arrNum1.filter((e) => e === 300);
                
 //02                              
 const arrNum2 = [100, 200, 300, 400, 500];
 const result2 = arrNum2.filter((e) => e === 600);
                
 //03            
 const arrNum3 = [100, 200, 300, 400, 500];
 const result3 = arrNum3.filter((e) => e >= 300);

13. 배열 메서드 : map()

map() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

번호 기본값 메서드 리턴값
1 [100, 200, 300, 400, 500] arrNum1.forEach((e) => e) 100,200,300,400,500
2 [100, 200, 300, 400, 500] arrNum2.forEach((e) => e + 'j') 100j,200j,300j,400j,500j
3 [100, 200, 300, 400, 500] arrNum3.forEach((e) => e + 100) 200,300,400,500,600
4 [{ a: 100 }, { a: 200 }, { a: 300 }] arrNum4.map((e) => e.a) 100,200,300 
//01
const arrNum1 = [100, 200, 300, 400, 500];
const result1 = arrNum1.map((e) => e);
 
//02
const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.map((e) => e + "j");
                
//03                
const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.map((e) => e + 100);

//04
const arrNum4 = [{ a: 100 }, { a: 200 }, { a: 300 }];
const result4 = arrNum4.map((e) => e.a);

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

Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다.

번호 기본값 메서드 리턴값
1 'javascript' Array.from(text) [j,a,v,a,s,c,r,i,p,t]
1 '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] 
//01
const text1 = "javascript";
const result1 = Array.from(text1);

//02
const text2 = "javascript";
const result2 = Array.from(text2, (el) => el + "10");

//03
const text3 = "javascript";
const result3 = [...text3].map((el) => el);