javaScript - 배열1 배열 메소드

자바스크립트의 대표적인 배열 메소드에 대해서 알아봅시다.

push, slice, splice, pop, shift, unshift, join, split, concat 등 여러 배열 메소드가 있지만 중요한 것 위주로 살펴 보겠습니다.

push는 배열의 요소를 뒤에서 부터 넣는다는 것을 알고 계실겁니다.

 

1. slice

const book = ['book1', 'book2', 'book3', 'book4', 'book5', 'book6'];
let bookset1 = book.slice(1, 2);
console.log(bookset1);		// ["book2"]

slice는 배열의 데이터를 지정한 인덱스 앞까지 가져오는 함수입니다.

첫번째 인자는 시작 위치이고 두번째 인자는 가져올 인덱스의 바로 다음 인덱스입니다.

즉, 두번째 인자는 해당 인자의 바로 앞까지의 인덱스 데이터를 가져옵니다.

slice는 함수는 기존의 배열을 수정하지 않습니다.

그래서 slice로 가져온 값을 받기 위한 변수가 필요합니다.

 

2. splice

const book = ['book1', 'book2', 'book3', 'book4', 'book5', 'book6'];
let bookset2 = book.splice(1, 2, 'addBook1', 'addBook2', 'addBook3');
console.log(bookset2);	// ["book2", "book3"]
console.log(book);	// ["book1", "addBook1", "addBook2", "addBook3", "book4", "book5", "book6"]

splice는 기존의 배열을 수정합니다.

그래서 단지 배열 데이터만 수정하고 싶으면 변수로 받을 필요가 없습니다.

splice 함수의 첫번째 인자는 잘라낼 인덱스이고 두번째 인자는 잘라낼 갯수를 의미합니다.

즉, 첫번째 인자부터 두번째 인자(수)까지 포함해서 배열의 데이터를 잘라냅니다.

splice를 변수로 받으면 잘라낸 값들을 받을 수 있으며, 기존의 배열은 수정되어 변경됩니다.

또한 splice함수는 잘라낸 데이터의 인덱스에 새로운 데이터(요소)를 추가할 수 있습니다. 

 

 

3. pop 

pop 함수는 맨뒤에 요소를 가져오는 것입니다.

본래 배열의 맨뒤 요소가 삭제되며 기존 배열 수정합니다.

 

 

4. shift
shift 함수는 pop과 반대로 맨 앞에 것을 가져옵니다.

본래 배열릐 맨앞 요소가 삭제되며 기존 배열 수정합니다.

 

 

5. unshift
unshift 함수는 모든 요소들의 인덱스 오른쪽으로 밀고 0 인덱스 위치부터 요소를 추가됩니다.

즉, 맨 앞부터 요소를 추가하고 싶은 때 사용하는 함수입니다.
예를들어 book.unshift("addBook")를 하면 맨앞에 "addBook" 요소가 추가됩니다.
비교하자면 push가 맨 뒤에 추가한다면 unshift는 맨 앞에 추가하는 것입니다.

 

6. join

const book = ['book1', 'book2', 'book3', 'book4', 'book5', 'book6'];

console.log(book.join());	// book1,book2,book3,book4,book5,book6
console.log(book.join(''));	// book1book2book3book4book5book6

join 함수는 배열을 문자열로 바꾸는 함수입니다.

인자는 배열을 문자열로 바꿀 때 구분자를 설정하면 됩니다.
인자를 생략하면 디폴트로 ','로 구분자로 설정됩니다.

구분자를 없애고 싶으면 join('')으로 호출하면 됩니다.

join 함수는 배열을 바꾸지 않으므로, join 함수의 결과값을 string 변수로 받아서 사용하시길 추천합니다.

 

7. split 

const bookStr = 'book1,book2,book3,book4,book5,book6';
console.log(bookStr.split('book'));	// ["book1,book2,book3,book4,book5,book6"]

split 함수는 문자열을 배열로 바꿉니다.

인자를 생략하면 디폴트 구분자가 ','입니다.

join과 마찬가지로 결과값은 배열 변수로 받아서 쓰는 것을 추천합니다.

8. concat

let bookArr = ['book1', 'book2', 'book3'];
let bookArr2 = ['book4', 'book5'];
bookArr = bookArr.concat(bookArr2);

console.log(bookArr);	// ["book1", "book2", "book3", "book4", "book5"]

concat 함수는 배열을 합치는 기능을합니다.
배열을 수정하는 것이 아니기에 결과값을 받아야합니다.

 

concat과 같은 기능을 하면서도 편리하게 사용할 수 있는 연산자가 있습니다.

전개 연산자를 이용하면 보다 쉽게 배열을 합칠 수 있습니다.

let bookArr = ['book1', 'book2', 'book3'];
let bookArr2 = ['book4', 'book5'];
bookArr3 = [...bookArr, ...bookArr2];

console.log(bookArr3);	// ["book1", "book2", "book3", "book4", "book5"]

전개 연사자를 이용하시면 가독성도 더 좋으며, 배열을 합치는 것외에도 파라미터로 요소를 계속해서 추가할 수 있으서 표현의 풍부함을 얻을 수 있습니다.

 

https://devbirdfeet.tistory.com/218