[JS] 배열 메서드 정리

Minyoung's Conference·2022년 10월 19일
0

JavaScript

목록 보기
19/28
post-thumbnail

원본 배열 데이터 수정 메서드

**shift() : 배열 첫번째 요소 삭제, 결괏값으로 삭제된 원소 반환**
const arr = [1,2];
console.log(arr.shift()); // 1
console.log(arr) // [2] 

**unshift() : 배열 첫 번째 인덱스에 원소 추가, 결괏값으로 배열의 새로운 길이 반환**
const arr = [1,2];
console.log(arr.unshift(-1,0)); // 4
console.log(arr); // [-1, 0, 1, 2]

**push() : 배열 마지막 인덱스에 하나 이상의 원소 추가, 결괏값으로 배열의 새로운 길이 반환**
const arr = [1];
console.log(arr.push(2,3)); // 3
console.log(arr); // [1,2,3]

**pop() : 배열 마지막 인덱스에 해당 원소 삭제, 그 값을 결과값으로 반환**
const arr = [1,2];
console.log(arr.pop()); // 2 
console.log(arr); // [1]

**splice(a,b,c) : 배열 원소 추가, 교체 또는 삭제해 배열 데이터를 변경
								결괏값으로 삭제된 원소 배열 반환 (a:index, b:지울갯수, c:추가요소)**
const arr = [1,2,3];
console.log(arr.splice(1,2, 'a')); // [2,3]
console.log(arr); //[1, a]

arr.**sort(compareFunction) : 정렬 순서를 정의하는 비교 함수를 사용해 정렬.
비교 함수 생략 시, 문자 유니코드 포인트값 따름.** 
const arr = [3,2,4,21,55];
arr.sort();
console.log(arr); // [2, 21, 3, 4, 55]

오름차순 : [1,2,3].sort((a,b) => a - b); // [1,2,3]
내림차순 : [1,2,3].sort((a,b) => b - a); // [3,2,1]

새로운 배열 생성 메서드

**concat() : 인자로 넘긴 배열 또는 값들을 기존 배열에 합쳐 새로운 배열 생성 반환**
const arr = [1,2,3];
const newArr = arr.concat([4,5]);
console.log(arr); // [1,2,3]
console.log(newArr); // [1,2,3,4,5]

**arr.slice(begin,end) : 배열에서 특정 범위의 원소를 복사해 새로운 배열을 생성 반환.
				(, 얕은 복사를 수행 -> 배열 원소가 객체면 참조 유지)**
const obj = {};
const arr = [1, obj, 3];
const newArr = arr.slice(1,2); // (1, 2-1) 즉, (1,1)까지
// slice() 메서드는 얕은 복사를 하기 때문에 배열 내에 중첩된 객체의 참조가 유지됨.
console.log(newArr[0] === obj); // true

* 배열 복사 하는 또 다른 방법 -> 전개 연산자 사용 (Spread Operator)
	- slice() 메서드와 마찬가지로 얕은 복사 수행
const arr = [1,2,3];
const newArr = [...arr];
console.log(newArr); // [1,2,3];

**map() : 배열의 모든 원소를 인자로 받은 함수를 실행, 특정한 형식으로 변경, 
				변경한 원소들로 새로운 배열을 생성해 반환**
const arr = [1,2,3];
const newArr = arr.map(x => x+1);
console.log(newArr); // [2,3,4]

**forEach() : 인자로 받은 함수를 배열의 모든 원소를 대상으로 실행**
  			 undefined반환 ( map과의 차이 )
const arr = [1,2,3];
const newArr = arr.forEach(x => console.log(x)); // 1, 2, 3
// 굳이 배열을 반환하지 않는다면 forEach를 사용
// 내부에 if문 등을 활용해 배열의 원소 수정 가능 

**filter() : 인자로 받은 함수의 테스트를 통과하는 원소들로 새로운 배열을 생성해 반환**
const arr = [1,2,3]; 
const newArr = arr.filter(x => x !== 1);
console.log(newArr); // [2,3]
profile
안녕하세요, FE 개발자 김민영입니다.

0개의 댓글