예비 개발자

const fifthStudyLog = "배열 메서드(1)";

3.배열 메서드

Javascript에는 다양한 빌트인 메서드가 있다. 이를 적재적소에 사용하는 것이 중요한 것 같다.

아래의 메서드에는 어떤 때 .prototype이라고 프로토타입 메서드를 사용하는 것도 있다. 정적 메서드와 프로토타입 메서드에 대한 설명은 아직 이해를 못해서 (…) 설명할 수 있는 단계까지 올라가는 순간 작성하겠다. 그 전에는 일단 이러이러한 메서드가 있다는 것을 알아두는 정도에 만족하도록 하겠다! 🤣

어떤 메서드를 어떨 때 사용하는 게 좋을까?

아직까지는 나도 잘 모르겠지만, 어쨌든 기존 배열을 가공하지 않는 방향을 우선으로 생각하는 게 좋을 듯하다. (잘못되면 되돌리기가 힘들다…)

3-1. Array.isArray

true or fale을 반환한다.

  • 전달된 인수가 배열이면 true
  • 배열이 아니면 false
Array.isArray([1, 2]); //true

Array.isArray(1); //false. 1은 number.

3-2. Array.prototype.indexOf

인수로 전달된 요소의 인덱스를 반환한다.

  • 중복으로 있을 때는 첫번째로 검색되는 인덱스를 반환
  • 없을 때는 -1 반환
const arr = [1, 2, 3, 2];

arr.indexOf(2); // 1
arr.indexOf(4); // -1

3-3. Array.prototype.push

인수로 전달받은 값을 원본 배열의 마지막 요소로 추가하고, 변경된 length 프로퍼티 값을 반환한다.

const arr = [1, 2];

let result = arr.push(3, 4);
console.log(result); // 4(변경된 length)
  • 성능 면에서 좋지 않다.
  • 추가할 요소가 하나 이상일 때만 사용하는 것이 좋다.
  • 원본 배열을 직접 변경한다는 단점이 있다.

3-4. Array.prototype.pop

원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다. 원본 배열이 빈 배열이면 undefined를 반환한다.

const arr = [1, 2];

let result = arr.pop();
console.log(result); // 2(삭제한 요소)

3-5. Array.prototype.unshift

인수로 받은 모든 값을 원본 배열 앞에 추가하고 변경된 length 프로퍼티를 반환한다.

const arr = [1, 2];

let result = arr.unshift(3, 4);
console.log(result); // 4 (변경된 length)

3-6. Array.prototype.shift

원본 배열에서 첫번째 요소를 제거하고 제거한 요소를 반환한다. 원본 배열이 비어 있으면 undefined를 반환.

const arr = [1, 2];

let result = arr.shift();
console.log(result); // 1(삭제한 요소)

3-7. Array.prototype.concat

인수로 받은 값들을 원본 배열의 마지막에 추가한 후 새로운 배열을 반환한다.

  • 원본 배열이 변경되지 않는다.
  • 인수로 전달된 값이 배열이면 배열을 해체해서 요소만 새로운 배열로 추가한다.
const arr1 = [1, 2];
const arr2 = [3, 4];

let result = arr1.concat(arr2);
console.log(result); //[1,2,3,4]
console.log(arr1); // [1,2] 원본배열은 변경되지 않는다.

3-8. Array.prototype.splice

원본 배열의 중간에 요소를 추가하거나 제거하는 경우 사용한다. 원본 배열을 직접 변경한다. 제거한 요소가 배열로 반환된다.

3개의 매개변수가 있다.

  • start: 제거를 시작할 인덱스. start만 있는 경우에는 그 인덱스부터 마지막까지 제거된다. 음수로 나타낼 수도 있다.
  • deleteCount: start 인덱스포함. 제거할 요소의 개수. 0인 경우 아무런 요소도 제거하지 않는다.
  • item: 제거할 위치에 삽입할 요소.
//start만 지정
const arr = [1, 2, 3, 4];

const result = arr.splice(1);
console.log(result); //[2,3,4]
console.log(arr); // [1]

//start와 deleteCount 지정
const arr = [1, 2, 3, 4];

const result = arr.splice(1, 2);
console.log(result); //[2,3]
consoel.log(arr); //[1,4]

//start, deleteCount, item 모두 지정

const arr = [1, 2, 3, 4];

const result = arr.splice(1, 2, 100, 500);

console.log(result); //[2, 3]
console.log(arr); // [1, 100, 500, 4];

3-9. Array.prototype.slice

인수로 전달된 범위의 요소들을 복사하여서 배열로 반환한다. 원본 배열은 변경되지 않는다.

두개의 매개변수를 갖는다.

  • start: 복사를 시작할 인덱스. 해당 인덱스가 포함된다. 음수도 가능. 생략시 0.
  • end: 복사를 종료할 인덱스. 해당 인덱스가 포함되지 않는다. 생략 가능하며, 생략시에는 length 프로퍼티 값이 들어간다.
const arr = [1, 2, 3];

arr.slice(); // [1,2,3], ==! arr, arr의 복사본이다.

arr.siice(1); // [2,3]

arr.slice(0, 1); // [1]

arr.siice(1, 2); // [2]

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

3-10. Array.prototype.join

원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 문자열, 즉 구분자로 연결한 문자열을 반환한다. 구분자는 생략가능, 기본으로는 콤마다.

const arr = [1, 2, 3, 4];

arr.join(); // '1,2,3,4' -> 기본 구분자 콤마로 반환됨
arr.join(""); // '1234' -> 빈칸('')으로 반환됨
arr.join("/"); // '1/2/3/4/"

3-11. Array.prototype.reverse

원본 배열의 순서를 반대로 뒤집어서 반환한다. 원본 배열이 변경된다.

const arr = [1, 2, 3];
const result = arr.reverse();
// console-> arr [3,2,1] ,result [3,2,1]

3-12. Array.prototype.fill

인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채워서 반환한다. 원본배열이 직접 변경된다.

3개의 매개변수가 있다.

  • 첫번째: 전달받은 값으로 채운다.
  • start: 요소 채우기 시작 인덱스. 해당 인덱스를 포함한다.
  • end: 요소 채우기 멈추는 인덱스. 해당 인덱스는 포함되지 않는다.
//매개변수 1개
const arr = [1, 2, 3];
arr.fill(0);
console.log(arr); //[0,0,0]

//매겨변수 2개
const arr = [1, 2, 3];
arr.fill(0, 1);
console.log(arr); //[1,0,0]

//매개변수 3개
const arr = [1, 2, 3];
arr.fill(0, 1, 2);
console.log(arr); //[1,0,3]

정리

메서드가 워낙 다양해서 아직도 반정도 남았다. 다음 글에서는 배열 메서드 파트를 마무리하고 싶다. 메서드 자체를 외우는 것은 중요하지 않아보인다. 검색하면 언제든지 찾을 수 있기에, 그냥 그런게 있구나! 정도만 기억해도 될 것 같다.

진짜 문제는 정적 메서드, 프로퍼티 메서드, 인스턴스 등등… 새롭게 배워야할 내용들이 넘친다는 것이다. 열심히 이해해보고, 자료구조에 대해서도 배우며 더욱 효율적이고 적절한 코드를 생각해내고 싶다.

2022-02-09

오후 5: 22

참고