JavaScript | Array에서 쓰이는 유용한 Method (1)

1. push

arr.push(element1[, ...[, elementN]])
// elementN: 배열의 끝에 추가할 요소

let arr1 = [1, 2, 3, 4];
let arr2 = arr1.push(5, 6, 7, 8);
let arr3 = [];
let arr4 = arr3.push(1, 3, 5, 7);

console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr4); // [1, 3, 5, 7]

배열의 끝에 n개의 값을 추가할 수 있는 method, arr4처럼 값이 없는 빈 배열에도 추가할 수 있다.

2. pop

arr.pop()

let arr1 = [1, 2, 3, 4];
arr1.pop();

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

배열의 마지막 요소를 제거하는 method, 빈 배열에 pop()을 사용하면 undifined를 반환한다.

3. shift/unshift

arr.shift()
arr.unshift([...elementN]) // elementN: 배열의 앞에 추가할 요소

let arr1 = [1, 2, 3];
arr1.shift;

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

arr1.unshift(4, 5);

console.log(arr1); // [4, 5, 2, 3]

shift()는 배열의 가장 앞 요소를 제거, unshift()는 배열의 가장 앞에 새로운 요소를 추가하는 method이다.
배열의 앞을 수정하는 것이라 다른 method보다 처리속도가 느리다고해서 왠만하면 사용하기를 지양하는게 좋다고한다.

4. splice

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
// start: 배열의 변경을 시작할 index
// deleteCount: 배열에서 제거할 요소의 수 (optional),
// 생략하거나 수정하는 배열의 값의 길이보다 크게 지정하면 start 이후의 모든 요소를 제거
// itemN: 배열에 추가할 요소, 아무것도 지정하지않으면 요소를 제거하기만 함 (optional)

let arr1 = [1, 2, 3, 4, 5, 6];
arr1.splice(2, 2, 'good');

console.log(arr1);
// arr1 is [1, 2, 'good', 5, 6]
// removed [3, 4]

splice()는 배열의 기존 요소를 삭제나 교체하는 method이다.
start는 배열의 index값을 기준으로 기입하면 된다.
음수를 기입하면 배열의 제일 뒤부터 카운트가 된다.

5. concat

array.concat([value1[, value2[, ...[, valueN]]]])
// valueN: 이어 붙일 배열이나, 값

let arr1 = [1, 2, 3];
let arr2 = ['a', 'b', 'c'];

console.log(arr1.concat(arr2, 7, 8 ,9)); // [1, 2, 3, 'a', 'b', 'c', 7, 8, 9]
console.log(arr1) // [1, 2, 3]

concat()은 인자로 주어진 배열이나 값을 기존 배열에 합쳐서 새 배열을 반환한다.
기존 배열을 변경하지는 않고, 새 배열 혹은 원본 배열을 수정해도 서로 영향을 받지 않는다.

6. indexOf/lastIndexOf

arr.indexOf(searchElement[, fromIndex])
arr.lastIndexOf(searchElement[, fromIndex])
// searchElement: 배열에서 찾을 요소
// fromIndex: 검색을 시작할 index값, 값을 지정하지 않을 경우 전체 배열을 검색

let arr1 = [1, 2, 3, 4, 5, 1]

console.log(arr1.indexOf(1)) // 0
console.log(arr1.lastIndexOf(1)) // 5

indexOf()는 배열에서 지정된 요소를 찾을 수 있는 '첫 번째' index를 반환하고,
lastIndexOf()는 반대로 찾을 수 있는 '마지막' index를 반환한다.
존재하지 않으면 -1을 반환한다.

7. includes

arr.includes(valueToFind[, fromIndex])
// valueToFind: 탐색할 요소, 문자나 문자열을 비교할 때는 대소문자를 구분한다
// fromIndex: 검색을 시작할 위치, 기본 값은 0이다 (optional)

let arr1 = ['apple', 'orange', 'banana']

console.log(arr1.includes('orange')) // true
console.log(arr1.includes('orange', 2)) // false

includes()는 배열이 특정 요소를 포함하고 있는지 판별하는 method이다.
Boolean값을 반환한다.

8. join

arr.join([separator])
// separator: 배열의 각 요소를 구분할 문자열, 생략하면 배열의 요소들이 쉼표로 구분된다.

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.join()) // apple,banana,orange
console.log(fruits.join('')) // applebananaorange
console.log(fruits.join('-')) // apple-banana-orange

join()은 배열의 모든 요소를 연결해 하나의 string으로 만드는 method이다.

9. split

str.split([separator[, limit]])
// separator: 배열의 각 요소를 구분할 문자열, 생략하면 문자열 전체를 배열에 할당한다
// limit: 쪼개진 문자열의 최대 개수를 정할 수 있다

let str = 'camelCase is comfortable'
let split1 = str.split()
let split2 = str.split('')
let split3 = str.split(' ')
let split4 = str.split(' ', 2)

console.log(split1) // ['camelCase is comfortable']
console.log(split2) // ['c', 'a', 'm', 'e', 'l', 'C', 'a', 's', 'e', ' ', 'i', 's', ' ', 'c', 'o', 'm', 'f', 'o', 'r', 't', 'a', 'b', 'l', 'e']
console.log(split3) // ['camelCase', 'is', 'comfortable']
console.log(split4) // ['camelCase', 'is']

split()은 지정한 separator를 이용해 문자열을 배열로 쪼개는 method이다.
separator를 어떻게 부여하느냐에 따라 단어단위 혹은 글자단위로 문자열을 쪼갤 수 있다.

10. reverse

arr.reverse()

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

console.log(array.reverse()); // [5, 4, 3, 2, 1]

reverse()는 배열의 순서를 말그대로 뒤집는 method이다.