[TIL] 배열에서 자주 쓰이는 +7가지 메서드 (JavaScript)

Array.prototype.slice()

• slice() 메서드는 배열 내의 특정한 요소의 Index 범위에 따라 새로운 배열을 리턴한다.
  • splice() 메서드와는 다르게 slice 메서드는 원본 배열을 변형시키지 않는다.
  • 그렇기 때문에 이 메서드를 사용할 때는 slice() 메서드를 적용한 새로운 변수를 선언해주어야 한다.
• 위의 그림에서는 인자 2개가 들어갔지만, slice() 메서드는 필요에 따라 인자를 최소 1개만 쓸 수도 있다.
  • 첫 번째 인자: 배열의 Index의 시작점
  • 두 번째 인자: 배열의 Index의 끝점

let nums = [1, 2, 3, 4, 5];
let nums_new = nums.slice(1, 4);  // 인덱스 값이 1~3인 요소가 담긴 배열을 새로운 변수에 저장

console.log(nums);      // 원본 배열인 [1, 2, 3, 4, 5]가 그대로 출력
console.log(nums_new);  // slice를 사용한 결과인 [2, 3, 4]가 새롭게 선언된 변수에 할당된 다음 출력

• 첫 번째 인자에 음수가 들어가는 경우도 있다.
  • 음수가 들어갈 경우 끝에서부터 해당하는 숫자만큼의 요소를 배열에 담아 리턴하게 된다.

let nums = [1, 2, 3, 4, 5];
let nums_new = nums.slice(-2);  // 끝에서부터 2개 요소만이 담긴 배열을 새로운 변수에 저장

console.log(nums);      // 원본 배열인 [1, 2, 3, 4, 5]가 그대로 출력
console.log(nums_new);  // slice를 사용한 결과인 [4, 5]가 새롭게 선언된 변수에 할당된 다음 출력

---

Array.prototype.splice()

• splice() 메서드는 배열 내의 특정한 요소를 삭제하거나, 다른 요소로 대체하거나 새로운 요소를 추가할 때 사용한다.
  • slice() 메서드와는 다르게 splice() 메서드는 원본 배열을 변형시킨다.
• splice() 메서드를 쓸 때는 인자의 순서에 주의해야 한다.
  • 첫 번째 인자: 배열의 Index의 시작점
  • 두 번째 인자: 삭제할 요소의 개수
  • 세 번째 인자 이후: 삭제한 요소 대신 대체하고 싶은 요소

let nums = [1, 2, 3, 4, 5];

nums.splice(2, 1, 10);  // 인덱스가 2인 요소 3부터 1개를 삭제하고, 그 자리를 10으로 대체
console.log(nums);      // 3 대신 10이 새롭게 추가된 배열 [1, 2, 10, 4, 5]이 출력

---

Array.prototype.concat()

• concat() 메서드는 주어진 배열에 기존 배열을 합쳐서 새로운 배열을 반환한다.
• 원본 배열은 변하지 않으며, 새로운 배열이나 원본 배열을 수정해도 서로 영향을 받지 않는다.

let alphabet = ['a', 'b', 'c'];
let hangeul = ['ㄱ', 'ㄴ', 'ㄷ'];

alphabet.concat(hangeul);  // ['a', 'b', 'c', 'ㄱ', 'ㄴ', 'ㄷ'] 출력
                           // alphabet 배열 뒤에 hangeul 배열이 합쳐진 형태의 새로운 배열이 반환

const alpha = ['a', 'b', 'c'];
const arr = [1, [2, 3]];

// 1) 배열 2개 이어붙이기
alpha.concat(arr);        // ['a', 'b', 'c', 1, [ 2, 3 ]]

// 2) 배열 3개 이어붙이기
alpha.concat(1, [2, 3]);  // ['a', 'b', 'c', 1, 2, 3]
// 이 경우, 배열을 3개(alpha, 1, [2, 3])로 인식했기 때문에 3개의 배열이 하나의 배열로 합쳐져 반환

---

Array.prototype.filter()

• filter() 메서드는 array 관련 메서드로 조건에 맞는 요소들만 모아서 새로운 배열을 반환한다.
  • 만약 조건에 부합되는 요소가 아무것도 없다면 빈 배열을 반환한다.
• filter() 메서드는 크게 filter(callbackFunction, thisAgr) 2개의 인자를 가진다. 그리고 callbackFunction 안에서 3개의 인자(element, index, array)를 가지는데 첫 번째 부분인 element 인자만 필수로 지정되어야 하고 나머지는 선택적이다.

// Q. numbers라는 배열 중에서 'value > 10'이라는 조건에 맞는 요소들로만 이루어진 새로운 배열 만들기
let numbers = [10, 4, 32, 17, 5, 2];

// A1. filter()의 인자에서 바로 함수를 써주는 방법
let result = numbers.filter((value) => value > 10);
console.log(result);  // filter를 거쳐 조건에 맞는 요소들로 이루어진 새로운 배열 [32, 17] 출력

// A2. 밖에서 함수를 선언하고 filter()의 인자에서 callback하는 방법
function isBiggerThanTen(value) {
  return value > 10;
}

let result = numbers.filter(isBiggerThanTen);
console.log(result);  // 마찬가지로 filter를 거친 새로운 배열 [32, 17] 출력

// Assignment 1. fruits 라는 배열이 있습니다.
// 'ap'가 들어간 과일들로 이루어진 새로운 배열을 filter()를 이용하여 반환해주세요.
let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

// 아래의 함수를 완성해주세요.
function filtered() {
  return fruits.filter((value) => value.includes('ap'))
}

console.log(filtered());  // ['apple', 'grapes'] 출력

// Assignment 2. courses 라는 배열이 있습니다.
// level이 'hard'인 과목들로만 이루어진 새로운 배열을 filter()를 이용하여 반환해주세요.
let courses = [
  {level:'easy', subject: 'English'}, 
  {level:'hard', subject: 'Mathmatic'}, 
  {level:'medium', subject: 'Literature'}, 
  {level:'hard', subject: 'Science'}, 
  {level:'medium', subject: 'Socialogy'}
];

// 아래 함수를 작성해주세요. 
function filtered() {
  return courses.filter((value) => value['level'] === 'hard')
}

console.log(filtered());
// [{ level: 'hard', subject: 'Mathmatic'}, {level: 'hard', subject: 'Science'}] 출력

---

Array.prototype.sort() & Array.prototype.reverse()

• sort() 메서드는 배열 안의 원소들을 오름차순으로 정렬한다.
• reverse() 메서드는 배열의 순서를 뒤집는다.

let arr1 = [6, 4, 3, 2, 0];

arr1.sort();        // 배열 안의 원소들을 오름차순으로 정렬
console.log(arr1);  // [0, 2, 3, 4, 6] 출력

let arr2 = [0, 2, 3, 4, 6];

arr2.reverse();     // 배열의 순서를 뒤집어서 재배치
console.log(arr2);  // [6, 4, 3, 2, 0] 출력

---

Array.prototype.indexOf()

• indexOf() 메서드는 배열 안에서 찾으려는 값과 정확하게 일치(===)하는 첫 번째 요소의 Index를 리턴한다.
  • 만약, 찾으려는 값이 배열에 없으면 -1을 리턴한다.
• 배열 안에서 찾으려는 값과 일치하는 마지막 요소의 Index를 리턴하려면, indexOf() 대신 lastIndexOf() 메서드를 사용해야 한다.

let arr3 = [1, 2, 3, 1, 2, 3];
// arr3[1] = 2;
// arr3[4] = 2;

console.log(arr3.indexOf(2));      // 1 출력
console.log(arr3.lastIndexOf(2));  // 4 출력