DevelopJavascript

배열 메소드

Array, Array Method, Method, Web, coding, develop, javascript

ARRAY

JavaScript 배열 메소드


배열 메소드

  1. 원본 배열(this)를 직접 변경하는 메소드(mutator method)

    mutator method 를 사용하려면 반드시 배열을 담고있는 변수를 필요로 한다. ( [1,2].push(3) ➤ 의미없는 코드 )

  2. 원본 배열은 영향을 안주고 결과값을 새로운 배열로 return하는 메소드(accessor method)

    accessor method는 반드시 결과 값을 받을 변수를 필요로 한다. ( const result = [1,2].concat[3,4] ➤result가 필요함. )

가급적으로 mutator method를 사용하지 않도록 한다.
이유 : 각 method를 쓰면 예측이 불가능 하기 떄문이고 직접 변경 시키는 것은 차후에 변경 시켰는지 모를 수 있기 때문이다.


Array.isArray

Array.isArray는 주어진 인수가

  • 배열이면 true를 반환.
  • 배열이 아니면 false를 반환.

Array.prototype.push

  • 전달받은 인수를 원본 배열(this)의 마지막 요소로 추가.
  • 변경된 length 값을 반환.
  • 원본 배열(this)을 직접 변경
  • 스택 구조 와 큐 구조에서 사용.
1
2
3
4
5
6
7
8
const arr = [1, 2];

// 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 값을 반환한다.
let result = arr.push(3, 4);
console.log(result); // 4 //  [...arr, 3, 4 ]; ES6 Spread 문법

// push 메소드는 원본 배열을 직접 변경한다.
console.log(arr); // [1, 2, 3, 4]

Array.prototype.pop

  • 원본 배열(this)에서 마지막 요소를 제거.
  • 제거한 요소를 반환. / 원본 배열(this)이 빈 배열이면 undefined를 반환.
  • 원본 배열(this)을 직접 변경한다.
  • 스택 구조에서 사용.
1
2
3
4
5
6
7
8
const arr = [1, 2];

// 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.
let result = arr.pop();
console.log(result); // 2

// pop 메소드는 원본 배열을 직접 변경한다.
console.log(arr); // [1]

push 와 pop을 사용하여 stack 구현 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const Stack = (function () {
  function Stack(array = []) {
    if (!Array.isArray(array)) {
      throw new TypeError(`${array} is not an array.`);
    }
    this.array = array;
  }

  // 스택의 가장 마지막에 데이터를 밀어 넣는다.
  Stack.prototype.push = function (value) {
    return this.array.push(value);
  };

  // 스택의 가장 마지막 데이터, 즉 가장 나중에 밀어 넣은 최신 데이터를 꺼낸다.
  Stack.prototype.pop = function () {
    return this.array.pop();
  };

  return Stack;
}());

const stack = new Stack([1, 2]);
console.log(stack); // [1, 2]

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

stack.pop(); // -> 3
console.log(stack); // [1, 2]

Array.prototype.unshift

  • 인수로 전달받은 모든 값을 원본 배열(this)의 선두에 요소로 추가
  • 변경된 length 값을 반환.
  • 원본 배열(this)을 직접 변경한다.
1
2
3
4
5
6
7
8
const arr = [1, 2];

// 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 값을 반환한다.
let result = arr.unshift(3, 4); // [3, 4 , ...arr]; // ES6 Spread 문법
console.log(result); // 4

// unshift 메소드는 원본 배열을 직접 변경한다.
console.log(arr); // [3, 4, 1, 2]

Array.prototype.shift

  • 원본 배열(this)에서 첫번째 요소를 제거.
  • 제거한 요소를 반환. / 원본 배열(this)이 빈 배열이면 undefined를 반환.
  • shift 메소드는 원본 배열(this)을 직접 변경.
  • 큐 구조에서 사용.
1
2
3
4
5
6
7
8
const arr = [1, 2];

// 원본 배열에서 첫번째 요소를 제거하고 제거한 요소를 반환한다.
let result = arr.shift();
console.log(result); // 1

// shift 메소드는 원본 배열을 직접 변경한다.
console.log(arr); // [2]

shift 와 pop을 사용하여 queqe 구현 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const Queue = (function () {
  function Queue(array = []) {
    if (!Array.isArray(array)) {
      throw new TypeError(`${array} is not an array.`);
    }
    this.array = array;
  }

  // 큐의 가장 마지막에 데이터를 밀어 넣는다.
  Queue.prototype.push = function (value) {
    return this.array.push(value);
  };

  // 큐의 가장 처음 데이터, 즉 가장 먼저 밀어 넣은 데이터를 꺼낸다.
  Queue.prototype.shift = function () {
    return this.array.shift();
  };

  return Queue;
}());

const queue = new Queue([1, 2]);
console.log(queue); // [1, 2]

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

queue.shift(); // -> 1
console.log(queue); // [2, 3]

Array.prototype.concat

  • 인수로 전달된 값들(배열 또는 값)을 원본 배열(this)의 마지막 요소로 추가.
  • 추가된 요소 새로운 배열을 만들어 반환.
  • 인수로 전달한 값이 배열인 경우, 배열을 해체하여 새로운 배열의 요소로 추가.
  • 원본 배열(this)은 변경되지 않음.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const arr1 = [1, 2];
const arr2 = [3, 4];

// 배열 arr2를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환
// 인수로 전달한 값이 배열인 경우, 배열을 해체하여 새로운 배열의 요소로 추가한다.
let result = arr1.concat(arr2);  // [...[1, 2], ...[3, 4]];
console.log(result); // [1, 2, 3, 4]

// 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환
result = arr1.concat(3);
console.log(result); // [1, 2, 3]

//  배열 arr2와 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환
result = arr1.concat(arr2, 5);
console.log(result); // [1, 2, 3, 4, 5]

// 원본 배열은 변경되지 않는다.
console.log(arr1); // [1, 2]

Array.prototype.splice

  • 원본 배열(this)의 중간에 요소를 추가하거나 중간에 있는 요소를 제거.

  • 원본 배열을 직접 변경한다.

  • splice 메소드는 3개의 매개변수를 갖는다.

    1. start : 원본 배열의 요소를 제거하기 시작할 인덱스. start 만을 지정하면 원본 배열의 start부터 모든 요소를 제거.

    2. deleteCount : 원본 배열의 요소를 제거하기 시작할 인덱스인 start부터 제거할 요소의 개수. [deleteCount가 0인 경우, 아무런 요소도 제거]

    3. items : 제거한 위치에 삽입될 요소들의 목록. [ 생략할 경우, 원본 배열에서 지정된 요소들을 제거 ]

1
2
3
4
5
6
7
8
9
const arr = [1, 2, 3, 4];

// 원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새로운 요소 20, 30을 삽입한다.
const result = arr.splice(1, 2, 20, 30);

// 제거한 요소가 배열로 반환된다.
console.log(result); // [2, 3]
// splice 메소드는 원본 배열을 직접 변경한다.
console.log(arr); // [1, 20, 30, 4]

Array.prototype.slice

  • slice 메소드는 인수로 전달된 범위의 요소들을 복사하여 반환.
  • 원본 배열은 변경되지 않음.
  • slice 메소드는 2개의 매개변수를 갖는다.
    1. start : 복사를 시작할 인덱스. 음수인 경우, 배열의 끝에서의 인덱스를 나타냄. ex) slice(-2)는 배열의 마지막 2개 요소를 반환.
    2. end : 복사를 종료할 인덱스. 이 인덱스에 해당하는 요소는 복사되지 않는다. 기본값은 length 값.
  • start / end 전부 생략 시 다 뜯어냄. end만 생략시 start부터 전부 뜯어냄.
  • slice로 복사한 내용은 얕은복사로 취급. (깊은 복사를 하고 싶다면 lodash 의 deep copy로 구현)
1
2
3
4
5
6
7
8
9
10
11
12
const arr = [1, 2, 3];

// arr[0]부터 arr[1] 이전(arr[1] 미포함)까지 복사하여 반환한다.
let result = arr.slice(0, 1);
console.log(result); // [1]

// arr[1]부터 arr[2] 이전(arr[2] 미포함)까지 복사하여 반환한다.
result = arr.slice(1, 2);
console.log(result); // [2]

// 원본은 변경되지 않는다.
console.log(arr); // [1, 2, 3]

slice를 이용한 유사 배열 객체를 배열로 변환 

1
2
3
4
5
6
7
8
9
10
11
12
function sum() {
  // 유사 배열 객체를 배열로 변환(ES5)
  var arr = Array.prototype.slice.call(arguments);
  // const arr = [...arguments ]; (ES6 Spread 문법)
  console.log(arr); // [1, 2, 3]

  return arr.reduce(function (pre, cur) {
    return pre + cur;
  }, 0);
}

console.log(sum(1, 2, 3)); // 6

Array.prototype.indexOf

  • 원본 배열(this)에서 인수로 전달된 요소를 검색하여 인덱스를 반환.
    • 중복되는 요소가 있는 경우, 첫번째 인덱스를 반환.
    • 해당하는 요소가 없는 경우, -1을 반환.
1
2
3
4
5
6
7
8
const arr = [1, 2, 2, 3];

// 배열 arr에서 요소 2를 검색하여 첫번째 인덱스를 반환
arr.indexOf(2);    // -> 1
// 배열 arr에서 요소 4가 없으므로 -1을 반환
arr.indexOf(4);    // -1
// 두번째 인수는 검색을 시작할 인덱스이다. 두번째 인수를 생략하면 처음부터 검색한다.
arr.indexOf(2, 2); // 2

Array.prototype.join

  • 원본 배열(this)의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 값, 즉 구분자(separator)로 연결한 문자열을 반환.
  • 구분자는 생략 가능하며 기본 구분자는 ‘,’이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const arr = [1, 2, 3, 4];

// 기본 구분자는 ','이다.
// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 기본 구분자 ','로 연결한 문자열을 반환
let result = arr.join();
console.log(result); // '1,2,3,4';

// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 빈문자열로 연결한 문자열을 반환
result = arr.join('');
console.log(result); // '1234'

// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 구분자 ':'로 연결한 문자열을 반환
result = arr.join(':');
console.log(result); // '1:2:3:4'

Array.prototype.reverse

  • 원본 배열(this)의 요소 순서를 반대로 변경한다.
  • 원본 배열이 변경된다.
  • 반환값은 변경된 배열이다.
1
2
3
4
5
6
7
const arr = [1, 2, 3];
const result = arr.reverse();

// reverse 메소드는 원본 배열을 직접 변경한다.
console.log(arr); // [3, 2, 1]
// 반환값은 변경된 배열이다.
console.log(result); // [3, 2, 1]

Array.prototype.fill

  • ES6에서 새롭게 도입된 fill 메소드는 인수로 전달 받은 값을 배열의 처음부터 끝까지 채움.
  • 원본 배열이 변경된다.
  • 두번째 인수로 요소 채우기를 시작할 인덱스를 전달할 수 있다.
  • 세번째 인수로 요소 채우기를 멈출 인덱스를 전달할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const arr = [1, 2, 3];

// 인수로 전달 받은 값 0을 요소로 배열의 처음부터 끝까지 채운다.
arr.fill(0);

// fill 메소드는 원본 배열을 직접 변경한다.
console.log(arr); // [0, 0, 0]

const arr2 = [1, 2, 3];

// 인수로 전달 받은 값 0를 요소로 배열의 인덱스 1부터 끝까지 채운다.
arr2.fill(0, 1);

// fill 메소드는 원본 배열을 직접 변경한다.
console.log(arr2); // [1, 0, 0]

const arr3 = [1, 2, 3, 4, 5];

// 인수로 전달 받은 값 0를 요소로 배열의 인덱스 1부터 3 이전(인덱스 3 미포함)까지 채운다.
arr3.fill(0, 1, 3);

// fill 메소드는 원본 배열을 직접 변경한다.
console.log(arr3); // [1, 0, 0, 4, 5]

fill vs Array.from

  • fill은 하나의 값만으로 채운다.
  • 동적인 값을 채운다면 Array.from을 이용하면 값을 만들어 내면서 요소를 채운다.
1
2
3
4
5
6
// 인수로 전달받은 정수만큼 요소를 생성하고 0부터 1씩 증가하면 요소를 채운다.
function generateSequences(length = 0) {
  return Array.from(new Array(length), (v, i) => i);
}

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

Array.prototype.includes

  • ES7에서 새롭게 도입된 includes 메소드는 배열 내에 특정 요소가 포함되어 있는지 확인
  • true 또는 false를 반환.
  • 두번째 인수로 검색을 시작할 인덱스를 전달할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const arr = [1, 2, 3];

// 배열에 요소 2가 포함되어 있는지 확인한다.
let result = arr.includes(2);
console.log(result); // true

// 배열에 요소 100이 포함되어 있는지 확인한다.
result = arr.includes(100);
console.log(result); // false

// 두번째 인수로 검색을 시작할 인덱스를 전달할 수 있다.
// 배열에서 요소 1가 포함되어 있는지 인덱스 1부터 확인한다.
result = arr.includes(1, 1);
console.log(result); // false

Share