[JavaScript] 배열의 메서드

요소 조작 메서드

push

• 배열의 맨 뒤에 새로운 요소를 추가, 변환 된 배열의 길이를 반환
• 추가된 길이 = 배열.push(추가 할 요소들);
• 추가 할 요소를 ,로 구분해서 여러개 추가 가능

let arr1 = [1, 2, 3];
arr1.push(4);
const newLength = arr1.push(5, 6, 7);

console.log(newLength, arr1); // 7 [1, 2, 3, 4, 5, 6, 7]

 

pop

• 배열의 맨 뒤에 있는 요소를 제거, 제거 된 요소 반환
• 제거 된 요소 = 배열.pop();

let arr2 = [1, 2, 3];
const popedItem = arr2.pop();

console.log(popedItem, arr2); // 3 [1, 2]

 

shift

• 배열의 맨 앞에 있는 요소를 제거, 제거 된 요소 반환
• pop보다 느림
• 제거 된 요소 = 배열.shift();

let arr3 = [1, 2, 3];
const shitedItem = arr3.shift();

console.log(shitedItem, arr3); // 1 [2, 3]

 

unshift

• 배열의 맨 앞에 새로운 요소를 추가, 변환 된 배열의 길이를 반환
• push보다 느림
• 추가된 길이 = 배열.unshift(추가 할 요소들);
• 추가 할 요소를 ,로 구분하여 여러개 추가 가능

let arr4 = [1, 2, 3];
const newLength2 = arr4.unshift(-1, 0);

console.log(newLength2, arr4); // 5 [-1, 0, 1, 2, 3]

 

slice

• 배열의 특정 범위를 잘라내서 새로운 배열로 반환, 원본 배열은 그대로
• 잘라낸 배열 = 배열.slice(시작인덱스, 끝인덱스+1);

let arr5 = [1, 2, 3, 4, 5];
let sliced = arr5.slice(2, 5); // 인덱스 2부터 인덱스 4까지 잘라냄
let sliced2 = arr5.slice(3); // 인덱스 3부터 끝까지
let sliced3 = arr5.slice(-2); // 뒤에서 2개앞부터
console.log(sliced); // [3, 4, 5]
console.log(sliced2); // [4, 5]
console.log(sliced3); // [4, 5]
console.log(arr5); // [1, 2, 3, 4, 5]

 

concat

• 두 개의 서로 다른 배열을 이어 붙여서 새로운 배열로 반환
• 합쳐진 배열 = 배열1.concat(배열2);

let arr6 = [1, 2, 3];
let arr7 = [4, 5, 6];
let concatedArr = arr6.concat(arr7);
console.log(concatedArr); //[1, 2, 3, 4, 5, 6]

 

요소 순회와 탐색 메서드

forEach

• 모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드
• 배열.forEach(function(현재요소의값, 반복카운트, 전체배열의값){...});
• 화살표 함수 사용 가능

let arr1 = [1, 2, 3];
arr1.forEach(function (item, idx, arr) {
  console.log(idx, item * 2); 
  // 0 2
  // 1 4
  // 2 6
});

let doubledArr = [];
arr1.forEach((item) => {
  doubledArr.push(item * 2);
});
console.log(doubledArr); // [2, 4, 6]

 

includes

• 배열에 특정 요소가 있는지 확인 후 있으면 true, 없으면 false 반환
• boolean = 배열.incluedes(특정요소)

let arr2 = [1, 2, 3];
let isInclude = arr2.includes(19);
console.log(isInclude); // false

 

indexOf

• 특정 요소의 인덱스 찾아서 반환, 없을 경우 -1 반환
• 객체 값이 들어 있는 배열에서는 해당 프로퍼티를 정확히 찾을 수 없어서 -1반환 => 객체는 findIndex 사용해서 찾음
• index = 배열.indexOf(특정요소);

let arr3 = [1, 2, 3];
let index = arr3.indexOf(2);
console.log(index); // 1

let objectArr = [{ name: "luna" }, { name: "alex" }];
let index2 = objectArr.indexOf({ name: "alex" });
console.log(index2); // -1

 

findIndex

• 모든 요소를 순회하면서, 콜백함수를 만족하는 특정 요소의 인덱스 반환, 없을 경우 -1반환
• index = 배열.findIndex((현재요소)=>{만족해야할문장});

let arr4 = [1, 2, 3];
const findedIndex = arr4.findIndex((item) => item % 2 !== 1);
console.log(findedIndex); // 1

let objectArr = [{ name: "luna" }, { name: "alex" }];
let findedIndex2 = objectArr.findIndex((item) => item.name ==="alex" );
console.log(findedIndex2); // 1

 

find

• 모든 요소를 순회하면서 콜백함수를 만족하는 요소를 찾아 요소를 그대로 반환, 없을 경우 undefined
• 요소 = 배열.find((현재요소)=>{만족해야할문장});

let arr5 = [{ name: "luna" }, { name: "alex" }];
const finded = arr5.find((item)=> item.name === "alex");

console.log(finded); // {name: 'alex'}

 

배열 변형 메서드

filter

• 기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환, 원본은 그대로
• 새로운배열 = 배열.filter((현재요소)=>{만족해야할문장});

let arr1 = [
  { name: "key", hobby: "테니스" },
  { name: "min", hobby: "테니스" },
  { name: "tem", hobby: "독서" },
];
const tennisPeople = arr1.filter((item) => item.hobby === "테니스");
console.log(tennisPeople); // [{name: "key", hobby: "테니스"}, {name: "min", hobby: "테니스"}]

 

map

• 배열의 모든 요소를 순회하면서, 각각 콜백함수를 실행하고 그 결과값을 모아서 새로운 배열로 반환, 원본은 그대로
• 새로운배열 = 배열.map((현재요소, 반복횟수, 전체배열의값)=>{return 추가할 값});

let arr2 = [1, 2, 3];
const mapResult = arr2.map((item, idx, arr) => {
  return item * 2;
});
console.log(mapResult); // [2, 4, 6]

let arr1 = [
  { name: "key", hobby: "테니스" },
  { name: "min", hobby: "테니스" },
  { name: "tem", hobby: "독서" },
];
let names = arr1.map((item) => item.name);
console.log(names); // ['key', 'min', 'tem']

 

sort

• 배열을 사전순으로 정렬, 원본 배열에 정렬
• 기본적으로 사전순이기 때문에, 숫자의 대소 비교로 정렬되지 않음 => 원할 경우 조건을 만들어줘야 함
• 배열.sort();

let arr3 = ["b", "c", "a"];
arr3.sort();
console.log(arr3); // ['a', 'b', 'c']

let arr4 = [100, 300, 56];
arr4.sort((a, b) => {
  if (a > b) {
    // b가 a 앞에 배치
    return 1; // b, a 배치
  } else if (a < b) {
    // a가 b 앞에 배치
    return -1; // a, b 배치
  } else {
    // 두 값의 자리를 그대로 유지
    return 0;
  }
});
console.log(arr4); // [56, 100, 300]

 

toSorted

• 가장 최근에 추가된 최신 함수
• 정렬된 새로운 배열을 반환, 원본 배열은 그대로 유지
• 정렬된배열 = 배열.toSorted();

let arr6 = ["c", "a", "d"];
const sorted = arr6.toSorted();
console.log(arr6); // ['c', 'a', 'd']
console.log(sorted); // ['a', 'c', 'd']

join

• 배열의 모든 요소를 하나의 문자열로 합쳐서 반환
• 문자열 = 배열.join();
• 인자로 아무것도 주지 않으면 요소들 사이에 ,를 넣어주고, 원하는 기호를 인자에 넣어 줄 시 ,대신 해당 기호를 넣어줌

let arr7 = ["hi", "i", "am", "winter"];
const joined = arr7.join();
const joined2 = arr7.join(" ");
console.log(joined); // hi,i,am,winter
console.log(joined2); // hi i am winter