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

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

번호 기본값 메서드 리턴값 
//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() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

번호 기본값 메서드 리턴값 
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()매서드는 마지막 요소를 제거하고 그 요소를 반환합니다.

번호 기본값 메서드 리턴값 결과값 
//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() 메서드는 배열 처음 요소에 삭제

번호 기본값 메서드 리턴값 결과값 
// 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 메서드는 배열 정렬

번호 기본값 메서드 리턴값 
// 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() 매서드는 배열요소를 결합시킵니다.

번호 기본값 메서드 리턴값 
//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 함수를 실행하고, 하나의 결과값을 반환합니다.

번호 기본값 메서드 리턴값 
//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 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

번호 기본값 메서드 리턴값 
//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() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

번호 기본값 메서드 리턴값 결과값 
//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()메서드는 문자열에서 특정 문자의 위치를 찾고 숫자를 반환합니다.

번호 기본값 메서드 리턴값 
//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을 반환합니다.

번호 기본값 메서드 리턴값 
//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() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

번호 기본값 메서드 리턴값 
//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() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

번호 기본값 메서드 리턴값 
//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 객체를 만듭니다.

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