[자바스크립트] 배열 - 메소드1

이번 포스팅에서는 배열이 가지고 있는 메소드들 중 많이 사용하는 몇가지 메소드들에 대해서 알아보겠다. 자바스크립트의 배열의 개념에 대해서 먼저 알고싶으신 분들은 아래의 링크를 참고하기 바란다.

 

https://codingralro.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B0%EC%97%B4-%EA%B0%9C%EB%85%90

[자바스크립트] 배열 - 개념

 

 

배열 원소 추가, 제거 메소드

push() / pop()

배열의 뒷 부분에 요소를 추가하고 삭제하는 메소드이다.

// push()
// 배열의 끝 부분에 원소를 추가
// length값 갱신 후 반환
const arr = [];
console.log(arr.length); //0

arr.push(1);
arr.push('hi');
console.log(arr.length); //2
console.log(arr.push(3)); //3


// pop()
// 배열의 끝 부분에 있는 원소 제거
// delete 연산자와 달리 완전 제거 -> length값 갱신
// 추출한 원소를 리턴
// 추출할 원소가 없으면 undefined
console.log(arr); //[1, 'hi', 3]
console.log(arr.pop()); //3
console.log(arr.length); //2

 

shift() / unshift()

배열의 첫 원소를 추가하고 삭제하는 메소드이다. push(), pop() 보다 성능이 느리다.

// unshift()
// 배열의 첫 원소 추가
// 갱신한 length 값 리턴
const arr = [1, 2, 3];
console.log(arr.unshift(0)); //4
console.log(arr[0]); //0


// shift()
// 배열의 첫 원소를 추출 후 반환
// 배열에서 완전 제거 -> length 갱신
// 추출할 원소가 없으면 undefined
console.log(arr.shift()); //0

 

concat()

concat 메소드는 배열에 배열을 합칠 수 있는 메소드이다. 이때에 새로운 배열을 반환하기 때문에 원본 배열을 유지된다.

// concat()
// 주어진 배열의 원소들을 추가한 새로운 배열 반환
// 원본변화 안함
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

console.log(arr1.concat(arr2)); //[1, 2, 3, 4, 5, 6]
console.log(arr1); //[1, 2, 3]

 

 

데이터 삭제 / 삽입 메소드

splice()

splice는 많이 사용되는 배열의 메소드 중 하나이다. splice 메소드를 통해 배열의 요소를 원하는 만큼 삭제하는 것도 가능하고 원하는 위치에 데이터를 삽입하는 것도 가능하다.

// splice()
// 첫번째 매개변수 : 삭제할 데이터 위치 (start)
// 두번째 매개변수 : optional, 삭제될 데이터 개수 (deleteCount)
// 세번째 이후 .. : optional, 삽입될 데이터 들을 받음
// 리턴값 : 삭제된 원소들의 배열. 원본변화됨
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1, 2);
console.log(fruits); //["Banana", "Mango"]

fruits.splice(1, 0, "Peach", "Jujube", "Orange", "Mango");
console.log(fruits); //["Banana", "Peach", "Jujube", "Orange", "Mango", "Mango"]

fruits.splice(2, 2, "Banana");
console.log(fruits); //["Banana", "Peach", "Banana", "Mango", "Mango"]

fruits.splice(3);   // 3부터 끝까지 삭제
console.log(fruits); //["Banana", "Peach", "Banana", "Mango"]

 

 

 

배열의 부분 추출 메소드

slice()

배열의 일부분을 추출하는 메소드로서, 추출한 부분을 새로운 배열로 반환하기 때문에 원본에는 영향을 주지 않는다.

// slice()
// 첫번째 매개변수 : 해당 변수부터 추출
// 두번째 매개변수 : optional, 해당 변수 직전까지만 추출
const arr = [1, 2, 3, 4, 5];

console.log(arr.slice(2)); //[3, 4, 5]
console.log(arr.slice(2, 3)); //[3]
console.log(arr); //[1, 2, 3, 4, 5]

 

 

원소 검색 메소드

배열 안에 특정 요소가 있는지에 대한 검색 메소드이다.

 

indexOf() / lasIndexOf()

해당 요소를 배열에서 찾은 뒤, 요소의 인덱스 값을 반환한다.

// indexOf()
// 찾으면 index 리턴
// 없으면 -1 리턴
// 배열의 첫부분부터 탐색 시작 => 가장 먼저 발견한 위치의 인덱스 반환
const arr = [1, 2, 3, 3, 5];

console.log(arr.indexOf(3)); //2
console.log(arr.indexOf(-1)); //-1

// lastIndexOf()
// indexOf와 같지만, 배열의 끝부분부터 탐색 시작
console.log(arr.lastIndexOf(3)); //3

 

includes()

indexOf, lastIndexOf와 같이 원소 검색 메소드이지만 해당 메소드는 boolean값을 리턴한다.

// includes()
// 찾으면 true
// 없으면 false
// ES2016에서 등장
const arr = [1, 2, 3, 4, 5];

console.log(arr.includes(3)); //true
console.log(arr.includes(-1)); //false

 

 

문자열 변환 메소드

join()

구분자(delimeter)를 이용하여 문자열로 변환할 수 있다.

// join(delimeter)
// 배열의 원소를 delimeter로 엮은 문자열을 반환
// delimeter의 optional은 콤마(,)
const arr = [1, 2, 3];

console.log(arr.join()); //1,2,3
console.log(arr.join('')); //123
console.log(arr.join(' ')); //1 2 3
console.log(arr.join('**')); //1**2**3


// split(delimeter)
// split은 반대로 문자열을 delimeter 기준으로 잘라서 배열로 반환
const str = '1**2**3';
console.log(str.split('**')); //['1', '2', '3']

 

toString()

join과 비슷하지만 toString은 구분자를 이용할 수 없다.

// toString()
// 배열을 문자열로 변환
// ', '로 구분하여 변환해준다.
// 다른 구분자는 사용X
const arr = [1, 2, 3, 4, 5]
console.log(arr.toString()); // 1, 2, 3, 4, 5

 

 

배열 역순 메소드

reverse()

배열의 순서를 역순으로 변환해주는 메소드이다.

// reverse()
// 배열 역순
// 원본 변함!!
const arr = [1, 2, 3, 4, 5];
console.log(arr.reverse); //[5, 4, 3, 2, 1]
console.log(arr); //[5, 4, 3, 2, 1]

 

 

배열 정렬 메소드

sort()

배열의 요소를 오름차순으로 정렬하는 메소드이다.

// sort()
// 배열의 원소를 오름차순으로 정렬
// 원본 변함!!
const arr = [1, 5, 3, 4, 2];
console.log(arr.sort()); //[1, 2, 3, 4, 5]


// 내림차순으로 정렬
// reverse 함수 활용
const rev_arr = [1, 5, 3, 4, 2];
console.log(rev_arr.sort().reverse()); //[5, 4, 3, 2, 1]


//callback 함수 활용
const call_arr = [1, 5, 3, 4, 2];
console.log(call_arr.sort((a, b) => b - a); //[5, 4, 3, 2, 1]

(callback 함수에 대해서는 추후 포스팅에서...)

 

 

주의할 점

mutation(상태변경) 하는 메소드는 일반적으로 리턴값을 설정하지 않도록 설계하는 것이 좋으나, JS는 mutation하고 리턴하는 메소드 설계가 많다. (위의 reverse() 처럼) 또한 JS는 mutation에 대해 일관적이지 않은 부분이 많기 때문에 이러한 부분에서 자바스크립트로 프로그래밍을 할 때에는 주의를 기울어야 한다.

const x = [1, 2, 3];
const y = x.reverse();  // x 원본변환, 그리고 그 x 를 리턴 (참조 리턴)
y.push(0);
console.log('y =', y);

// 과연 x 값은?
// [1, 2, 3] ?
// [3, 2, 1] ?
console.log('x =', x);  // [3, 2, 1, 0] !!!

// ↑ 얼핏보면 y.push() 는 x 와 관계 없어 보이나
// x 와 y 는 동일 참조를 하고 있다!