[JavaScript] Array Method

2024. 3. 18. 00:35FE/JavaScript

 

 

Array - JavaScript | MDN

다른 프로그래밍 언어의 배열과 마찬가지로, Array 객체는 여러 항목의 컬렉션을 단일 변수 이름 아래 저장할 수 있고, 일반적인 배열 연산을 수행하기 위한 멤버가 있습니다.

developer.mozilla.org

 

메소드 설명
push() 배열의 끝에 요소 추가
pop() 배열의 마지막 요소 제거
shift() 배열의 첫 번째 요소 제거
unshift() 배열의 시작 부분에 요소 추가
splice() 배열의 요소를 삭제, 교체, 추가
slice() 배열의 일부를 새 배열로 반환
map() 배열의 각 요소에 함수를 적용한 새 배열 반환
filter() 함수의 테스트를 통과하는 요소로 새 배열 반환
reduce() 배열의 각 요소에 대해 함수를 실행하고, 하나의 출력값 반환
reverse() 배열의 순서를 반대로 뒤집음
sort() 배열의 요소를 정렬
toString() 배열을 문자열로 변환
join() 배열의 모든 요소를 연결해 하나의 문자열로 만듦
every() 배열의 모든 요소가 주어진 함수를 만족하는지 확인
some() 배열의 어떤 요소라도 주어진 함수를 만족하는지 확인
concat() 배열이나 값들을 기존 배열에 합쳐 새 배열을 반환

 


push()

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 변형된 배열의 새로운 길이를 반환합니다.

const fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'orange']

 

pop()

pop() 메소드는 배열에서 마지막 요소를 제거하고 제거된 요소를 반환합니다.

const fruits = ['apple', 'banana', 'orange'];
const last = fruits.pop();
console.log(last); // 'orange'

 

shift()

shift() 메소드는 배열에서 첫 번째 요소를 제거하고 제거된 요소를 반환합니다.

const fruits = ['apple', 'banana', 'orange'];
const first = fruits.shift();
console.log(first); // 'apple'

 

unshift()

unshift() 메소드는 배열의 시작 부분에 하나 이상의 요소를 추가하고, 변형된 배열의 새로운 길이를 반환합니다.

const fruits = ['apple', 'banana'];
fruits.unshift('orange');
console.log(fruits); // ['orange', 'apple', 'banana']

 

splice()

splice() 메소드는 배열의 기존 요소를 삭제, 교체, 또는 새 요소를 추가하여 배열의 내용을 변경합니다.

const fruits = ['apple', 'banana', 'orange'];
let start = 1; let deleteCount = 0;
fruits.splice(start, deleteCount, 'kiwi');
console.log(fruits); // ['apple', 'kiwi', 'banana', 'orange']

 

slice()

slice() 메소드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 새로운 배열을 반환합니다.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

 

map()

map() 메소드는 배열 내의 모든 요소 각각에 대하여 제공된 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환합니다.

const numbers = [1, 2, 3, 4];
const squares = numbers.map(num => num ** 2);
console.log(squares); // [1, 4, 9, 16]

 

filter()

filter() 메소드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

const numbers = [1, 2, 3, 4];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

 

reduce()

reduce() 메소드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 하나의 출력값을 반환합니다.

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue,
);

console.log(sumWithInitial);
// Expected output: 10

 

reduceRight()

reduceRight() 메소드는 오른쪽에서 왼쪽으로 누적한다.

const array1 = [
  [0, 1],
  [2, 3],
  [4, 5],
];

const result = array1.reduceRight((accumulator, currentValue) =>
  accumulator.concat(currentValue),
);

console.log(result);
// Expected output: Array [4, 5, 2, 3, 0, 1]

 

concat()

concat() 메소드는 매개변수로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.

const numbers1 = [1, 2];
const numbers2 = [3, 4];
const numbers3 = numbers1.concat(numbers2);
console.log(numbers3); // [1, 2, 3, 4]

 

reverse()

reverse() 메소드는메서드는 배열의 순서를 반대로 뒤집습니다. 이 메서드는 배열 자체를 변경하고, 변경된 배열을 반환합니다.

const numbers = [1, 2, 3, 4];
numbers.reverse();
console.log(numbers); // [4, 3, 2, 1]

 

toReversed()

reverse()에 대응되는 복사 메서드입니다. 원본을 변경하지 않고 복사본을 반환한다.

const numbers = [1, 2, 3, 4];
console.log(numbers.toRevered()); // [4, 3, 2, 1]
console.log(numbers); // [1, 2, 3, 4]

 

sort()

sort() 메소드는 배열의 요소를 적절한 위치에 정렬하고 배열을 반환합니다. 원본 자체를 정렬한다. 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// Expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// Expected output: Array [1, 100000, 21, 30, 4]

 

toSorted()

toSorted() 메소드는 배열의 요소를 적절한 위치에 정렬한 새 배열을 반환합니다. 원본은 변경하지 않습니다. 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

const months = ["Mar", "Jan", "Feb", "Dec"];
const sortedMonths = months.toSorted();
console.log(sortedMonths); // ['Dec', 'Feb', 'Jan', 'Mar']
console.log(months); // ['Mar', 'Jan', 'Feb', 'Dec']

const values = [1, 10, 21, 2];
const sortedValues = values.toSorted((a, b) => a - b);
console.log(sortedValues); // [1, 2, 10, 21]
console.log(values); // [1, 10, 21, 2]

 

toString()

toString() 메소드는 배열을 문자열로 변환하고 그 결과를 반환합니다.

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.toString()); // 'apple,banana,orange'

 

join()

join() 메소드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.join('-')); // 'apple-banana-orange'

 

every()

every() 메소드는 배열 안의 모든 요소가 주어진 판별 함수를 만족하는지 확인합니다.

const numbers = [1, 2, 3, 4];
const allAboveZero = numbers.every(num => num > 0);
console.log(allAboveZero); // true

 

some()

some() 메소드는 배열 안의 하나의 요소라도 주어진 판별 함수를 만족하는지 확인합니다.

const numbers = [1, 2, 3, 4];
const someAboveTwo = numbers.some(num => num > 2);
console.log(someAboveTwo); // true

 


'FE > JavaScript' 카테고리의 다른 글

[JavaScript] Ajax  (0) 2024.03.31
[JavaScript] XML, JSON, WebStorage  (0) 2024.03.18
[JavaScript] 리다이렉션, 새 창 열기  (0) 2024.03.18
[JavaScript] Event  (0) 2024.03.18
[JavaScript] FOR문  (0) 2024.03.18