Array Method for Basic

1. Array.prototype.indexOf()


arr.indexOf(searchElement, fromIndex): arr에서 찾아야할 값(searchElement)이 몇번째 인덱스부터(fromIndex) 시작해서 그 찾아야할 값에 대한 index를 찾을 때 사용

indexOf 메소드의 인자로 지정된 요소를 배열에서 검색하여 인덱스를 반환한다. 중복되는 요소가 있는 경우 첫번째 인덱스만 반환된다. 만일 해당하는 요소가 없는 경우, -1을 반환한다.

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


2. Array.prototype.concat()


concat 메소드의 인수로 넘어온 값들(배열 또는 값)을 자신의 복사본에 요소로 추가하고 반환한다. 이때 원본 배열은 변경되지 않는다.

1
2
3
4
5
6
7
8
9
10
11
const arr1 = ['a', 'b', 'c'];
const arr2 = ['x', 'y', 'z'];

const c = arr1.concat(arr2);
console.log(c); // ['a', 'b', 'c', 'x', 'y', 'z']

const d = arr1.concat('hello');
console.log(d); // ['a', 'b', 'c', 'hello']

// 원본 배열은 변하지 않는다.
console.log(arr1); // [ 'a', 'b', 'c' ]


3. Array.prototype.join()


배열 요소 전체를 연결하여 생성한 문자열을 반환한다. 구분자(separator)는 생략 가능하며 기본 구분자는 ,이다. 이때, 원본 배열은 유지된다.

1
2
3
4
5
6
7
8
9
10
11
12
const arr = ['a', 'b', 'c', 'd'];

const x = arr.join();
console.log(x); // 'a,b,c,d';

const y = arr.join('');
console.log(y); // 'abcd'

const z = arr.join(':');
console.log(z); // 'a:b:c:d'

console.log(arr); // [ 'a', 'b', 'c', 'd' ]


4. Array.prototype.reverse()


배열 요소의 순서를 반대로 변경한다. 이때 원본 배열이 변경된다. 반환값은 변경된 배열이다.

1
2
3
4
5
6
const arr1 = ['a', 'b', 'c'];
const arr2 = arr1.reverse();

// 원본 배열이 변경된다
console.log(arr1); // [ 'c', 'b', 'a' ]
console.log(arr2); // [ 'c', 'b', 'a' ]


5. Array.prototype.slice(start, end)


인자로 지정된 배열의 부분을 복사하여 반환한다. 원본 배열은 변경되지 않는다. 첫번째 매개변수 start에 해당하는 인덱스를 갖는 요소부터 매개변수 end에 해당하는 인덱스를 가진 요소 전까지 복사된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const arr = ['a', 'b', 'c', 'd', 'e'];

// items[1]부터 items[2] 이전(items[2] 미포함)까지 반환
const res2 = arr.slice(1, 2);
console.log(res2); // [ 'b' ]

// items[1]부터 이후의 모든 요소 반환
const res3 = arr.slice(1);
console.log(res3); // [ 'b', 'c', 'd', 'e' ]

// 인자가 음수인 경우 배열의 끝에서 2개의 요소를 반환
const res4 = arr.slice(-2);
console.log(res4); // [ 'd', 'e' ]

// 모든 요소를 반환 (= 복사본 생성)
const res5 = arr.slice();
console.log(res5); // [ 'a', 'b', 'c', 'd', 'e' ]

// 원본은 변경되지 않는다.
console.log(arr); // [ 'a', 'b', 'c', 'd', 'e' ]


6. Array.prototype.splice(start, end)


기존의 배열의 요소를 제거하고 그 위치에 새로운 요소를 추가한다. 배열 중간에 새로운 요소를 추가할 때도 사용되고, 삭제만 할 때도 사용된다.

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

// items[1]부터 2개의 요소를 제거하고 제거된 요소를 배열로 반환
const res = arr.splice(1, 2);

// 원본 배열이 변경된다.
console.log(arr); // [ 1, 4, 5, 6 ]
// 제거한 요소가 배열로 반환된다.
console.log(res); // [ 2, 3 ]


7. Array.prototype.push()/pop()/shift()/unshift()


4가지 메소드는 모두 원본을 변경한다.

Array push/pop/shift/unshift
출처: Array push/pop/shift/unshift


8. Array.prototype.includes()


arr.includes(searchElement, fromIndex): 배열에 특정 요소가 포함되어 있는지 여부를 확인할 때 사용

1
2
3
4
5
6
7
const arr = [1,2,3,4];
const result1 = arr.includes(3);
const result2 = arr.includes(1, 1);
console.log(result1); // true
console.log(result2); // false
// 원본 배열이 유지된다.
console.log(arr); // [1,2,3,4]


9. Array.prototype.toString()


arr.toString(): 배열에 있는 원소를 문자열로 반환할 때 사용

1
2
3
4
5
const arr = [1,2,3];
const result = arr.toString();
console.log(result); // "1,2,3"
// 원본 배열이 유지된다.
console.log(arr); // [1,2,3]