[Javascript] Simple Array Methods( .join() .slice() .splice() .reverse() .concat())

.join()

---

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다.

 

 

구문

arr.join([separator])

 

 

예제

let a = ['바람', '비', '불'];
let mylet1 = a.join();      // mylet1에 '바람,비,불'을 대입
let mylet2 = a.join(', ');  // mylet2에 '바람, 비, 불'을 대입
let mylet3 = a.join(' + '); // mylet3에 '바람 + 비 + 불'을 대입
let mylet4 = a.join('');    // mylet4에 '바람비불'을 대입

 

 

 

.slice()

---

slice() 함수는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용한다.

첫번째 인자로 시작 인덱스(index), 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환한다. 이 함수는 원본배열을 훼손하지 않는다.

 

 

구문

arr.slice([begin[, end]])

 

 

예제

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

 

 

 

.splice()

---

splice() 함수는 배열로 부터 특정 범위를 삭제하거나 새로운 값을 추가 또는 기존 값을 대체할 수 있다.

첫번째 인자로 시작 인덱스(index), 두번째 인자로 몇개의 값을 삭제할지, 그리고 세번째 인자부터는 추가할 값을 가변 인자로 넘길 수 있으며, 삭제된 값을 담고 있는 배열을 반환한다. 이 함수는 원본배열을 훼손한다.

 

 

구문

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

 

 

예제

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

 

 

 

- 하나도 제거하지 않고 2번 인덱스에 "drum" 추가

let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
let removed = myFish.splice(2, 0, 'drum');

// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed is [], no elements removed

 

 

- 하나도 제거하지 않고 2번 인덱스에 "drum",과 "guitar" 추가

let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
let removed = myFish.splice(2, 0, 'drum', 'guitar');

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed

 

 

- 2번 인덱스에서 한 개요소 제거하고 "trumpet" 추가

let myFish = ['angel', 'clown', 'drum', 'sturgeon'];
let removed = myFish.splice(2, 1, 'trumpet');

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]

 

 

 

- 0번 인덱스에서 두 개 요소 제거하고 "parrot", "anemone", "blue" 추가

let myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
let removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');

// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed is ["angel", "clown"]

 

 

 

.slice() vs .splice()

---

.slice() 와 splice()는 이름도 비슷하고 실제로 동일한 목적을 위해서 두 함수 중에 아무거나 사용해도 무방한 경우가 있기 때문에 헷갈린다.

 

두 함수의 차이점이라고 하면 두번째 인자로 slice() 함수는 종료 인덱스, splice() 함수는 몇개의 값을 때어낼지를 넘긴다는 것 뿐이다.

 

하지만 이 두 함수를 동일한 배열을 대상으로 여러 번 호출할 수 있는 상황에서는 항상 같은 배열을 반환하는 slice() 함수와 달리 splice() 함수는 계속해서 원본 배열을 깎아먹기 때문에 동일한 인자로 여러 번 함수를 호출 시 매번 다른 배열이 반환되게 된다.

 

 

 

.reverse()

---

reverse() 메서드는 배열의 순서를 반전한다. (첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 된다.) 이 함수는 원본 배열을 훼손한다.

 

 

 

구문

a.reverse()

 

 

예제

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// expected output: "array1:" Array ["three", "two", "one"]

 

 

 

.concat()

---

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다. 이 함수는 원본 배열을 훼손하지 않는다.

 

 

 

구문

array.concat([value1[, value2[, ...[, valueN]]]])

 

 

예제

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

 

 

 

- 배열 세 개 이어 붙이기

const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

num1.concat(num2, num3);
// 결과: [1, 2, 3, 4, 5, 6, 7, 8, 9]