자바스크립트 Javascript 배열에 사용하는 여러 함수들 모음

JavaScript 배열은 여러 개의 값 또는 항목을 하나의 변수에 저장하고 관리하는 데 사용됩니다. 이를 통해 데이터를 구조화하고 효율적으로 다룰 수 있으며, 배열을 사용하는 주요 이유는 데이터 그룹화와 반복 처리를 단순화하고 코드의 가독성을 향상시키기 위함입니다. 배열을 사용하면 동일한 종류의 데이터를 저장하고 접근하는 데 효과적이며, 다양한 배열 메서드와 반복문을 활용하여 데이터 처리 작업을 간단하게 수행할 수 있습니다.

 

 

 

◎ 1. push()

 

push() 함수는 배열의 끝에 하나 이상의 요소를 추가합니다. fruits 배열은 ['사과', '바나나', '딸기', '오렌지']로 업데이트됨

 

array.push(element1, element2, ..., elementN)   l  element1, element2, ... elementN은 배열에 추가할 요소입니다.

 

const fruits = ['사과', '바나나'];
fruits.push('딸기', '오렌지');

 

 

◎ 2. pop()

 

pop() 함수는 배열의 끝에서 요소를 제거하고 해당 요소를 반환합니다. removedFruit는 '딸기'이고, fruits 배열은 ['사과', '바나나']로 업데이트됩니다.

 

array.pop() l  pop() 함수는 인수를 사용하지 않습니다.

 

const fruits = ['사과', '바나나', '딸기'];
const removedFruit = fruits.pop();

 

 

◎ 3. unshift()

 

unshift() 함수는 배열의 시작 부분에 하나 이상의 요소를 추가합니다. fruits 배열은 ['딸기', '오렌지', '사과', '바나나']로 업데이트됨

 

array.unshift(element1, element2, ..., elementN) l  element1, element2, ... elementN은 배열의 시작에 추가할 요소입니다.

 

const fruits = ['사과', '바나나'];
fruits.unshift('딸기', '오렌지');

 

 

◎ 4. shift()

 

shift() 함수는 배열의 시작에서 요소를 제거하고 해당 요소를 반환합니다. removedFruit는 '딸기'이고, fruits 배열은 ['사과', '바나나']로 업데이트가 됩니다.

 

array.shift() l  shift() 함수는 인수를 사용하지 않습니다.

 

const fruits = ['딸기', '사과', '바나나'];
const removedFruit = fruits.shift();

 

 

◎ 5. concat()

 

concat() 함수는 배열과 다른 배열들을 결합하여 새 배열을 생성합니다. combinedArray는 [1, 2, 3, 4]입니다.

 

array.concat(array1, array2, ..., arrayN) l  array1, array2, ... arrayN은 현재 배열에 결합할 다른 배열입니다.

 

const arr1 = [1, 2];
const arr2 = [3, 4];
const combinedArray = arr1.concat(arr2);

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 자바스크립트 정규표현식으로 ltrim, rtrim 공백 제거 함수 구현하는 방법 ▶ 자바스크립트 parseFloat 함수 이용해서 문자열을 실수로 변환하는 방법 ▶ 자바스크립트 내장 객체 Array 의 concat 함수 알아보기 – 2회 ▶ 자바스크립트 display 속성 이용해서 접거나 펴는 방법 ▶ 자바스크립트 내장함수 eval() 문자열을 수식으로 바꾸는 방법

 

 

◎ 6. splice()

 

splice() 함수는 배열에서 요소를 추가, 제거 또는 교체합니다. 인덱스 1의 요소 '바나나'를 '오렌지'로 교체, fruits 배열은 ['사과', '오렌지', '딸기']로 업데이트 됩니다.

 

array.splice(start, deleteCount, item1, item2, ...) l  start: 수정을 시작할 인덱스 l  deleteCount: 삭제할 요소의 수 l  item1, item2, ...: 추가할 요소들

 

const fruits = ['사과', '바나나', '딸기'];
fruits.splice(1, 1, '오렌지');

 

 

◎ 7. slice()

 

slice() 함수는 배열의 일부를 복사하여 새 배열을 반환합니다. 인덱스 1부터 2까지의 요소를 복사하여 새 배열 반환, slicedArray는 ['바나나', '딸기']입니다.

 

array.slice(begin, end) l  begin: 복사를 시작할 인덱스 (포함) l  end: 복사를 종료할 인덱스 (제외)

 

const fruits = ['사과', '바나나', '딸기', '오렌지'];
const slicedArray = fruits.slice(1, 3);

 

 

◎ 8. filter()

 

filter() 함수는 주어진 조건을 만족하는 요소로 이루어진 새 배열을 반환합니다. evenNumbers는 [2, 4, 6]입니다.

 

array.filter(callback(element, index, array)) * callback은 각 요소를 평가하는 함수입니다.

 

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);

 

 

◎ 9. map()

 

map() 함수는 배열의 각 요소에 대해 주어진 함수를 호출한 결과로 이루어진 새 배열을 반환합니다. squaredNumbers는 [1, 4, 9, 16, 25]입니다.

 

array.map(callback(element, index, array)) * callback은 각 요소를 변환하는 함수입니다.

 

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);

 

 

◎ 10. reduce()

 

reduce() 함수는 배열 요소를 하나로 줄여 값을 반환합니다. sum은 15입니다.

 

array.reduce(callback(accumulator, currentValue, index, array), initialValue) l  callback: 각 요소와 누산기를 결합하여 단일 값을 생성하는 함수 l  accumulator: 누산기로 사용할 초기 값 l  currentValue: 현재 처리 중인 요소 l  index: 현재 요소의 인덱스 l  array: 현재 배열

 

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 자바스크립트 정규표현식으로 ltrim, rtrim 공백 제거 함수 구현하는 방법 ▶ 자바스크립트 parseFloat 함수 이용해서 문자열을 실수로 변환하는 방법 ▶ 자바스크립트 내장 객체 Array 의 concat 함수 알아보기 – 2회 ▶ 자바스크립트 display 속성 이용해서 접거나 펴는 방법 ▶ 자바스크립트 내장함수 eval() 문자열을 수식으로 바꾸는 방법