본문 바로가기

FrontEnd/Vanilla JS

[JS] 배열에 쓸수있는 여러 함수들

.revers()

대상 배열의 순서가 변경된다.

const arr =['a', 'b', 'c'];

const reversedArr = arr.reverse();

console.log(reversedArr);
//['c', 'b', 'a']

 

  • 순서 뒤집기: 사용자 인터페이스에서 리스트나 데이터를 역순으로 표시할 때 사용.
    • EX) 데이터의 정렬을 오래된순 > 최신순  으로 정렬할때 유용.
  • 스택 구현: 자바스크립트 배열을 이용해 스택을 구현할 때, .reverse 메서드를 사용하여 스택의 순서를 뒤집을 수 있음.
    • 이는 후입선출(LIFO: Last In First Out) 원칙에 따른 데이터 처리나 표시에 적합.

 

.shift()

대상 배열에서 첫번째 요소(Element)를 제거하고 제거한 요소를 반환한다.

첫번째 값이 아예 떨어져 나가는 것 이므로 원본 배열도 달라진다.

 

const arr = ['a', 'b', 'c']
const shiftArr = arr.shift();

console.log(shiftArr);
// a

//원본배열 확인하기
console.log(arr);
//['b', 'c']

 

  • 큐 구현: 데이터가 들어오고 나가는 순서가 중요한 경우,  작업 대기열이나 이벤트 처리 큐 등을 구현할 때 사용.
  • 순차적 처리: 배열의 요소를 순차적으로 처리하고 제거해야 할 때, 명령어의 리스트를 순차적으로 실행하거나 데이터 패킷을 순서대로 처리해야 하는 상황입니다.
  • 리스트 관리: 리스트의 첫 번째 요소를 주기적으로 업데이트하거나 제거해야 할 때 사용.

.slice()

인수를 두개 받을수 있으며, 대상 배열의 일부를 추출해 배열로 반환한다.

  • 첫번째 인수는 추출을 할 요소의 순서 를 가르키며, 배열은 제로 베이스드 넘버링이기 때문에 0 부터 지정해준다.
  • 두번째 인수는 추출 할  요소의 갯수 를 가르키며 0부터 시작한다.
    • 지정해주지 않으면 첫번째 인수가 지정한 순서부터 그 배열의 끝까지 추출한다. 
const arr = ['a', 'b', 'c']

//arr 배열의 1[0]번째 부터 1개의 갯수를 배열로 리턴
const sliceArr1 = arr.slice(0, 1);
//[a]
console.log(sliceArr1);

//arr 배열의 1[0]번째 부터 2개의 갯수를 배열로 리턴
const sliceArr2 = arr.slice(0, 2);
//[a, b]
console.log(sliceArr2);

//배열의 요소를 변하게 하는 함수가 아니므로 원본 함수는 유지된다.
console.log(arr);

 

 

'FrontEnd > Vanilla JS' 카테고리의 다른 글

[JS] 포켓몬 API활용하기  (0) 2024.03.14
[JS] 과제 준비하기  (0) 2024.03.13
[JS]객체지향 프로그래밍 과 생성자  (0) 2024.03.05
[JS] this  (1) 2024.03.05
[JS] 클로저 - closures  (0) 2024.03.05