sort(compareFunction)
정렬 순서를 정의하는 함수.
원본 배열을 정렬해서 반환.
compareFunction을 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬.
const arr = [2, 10, 5, 11, 1];
arr.sort();
// arr = [1, 10, 11, 2, 5];
// compareFunction을 생략해서 문자로 취급 후 정렬
arr.sort((a, b) => a - b);
// arr = [1, 2, 5, 10, 11];
// 숫자로 취급해서 정렬find(callback(element, index, array))
callback 함수의 조건을 만족하는 첫 번째 요소의 값을 반환.
만족하는 요소가 없으면 undefined를 반환.
element : 콜백함수에서 처리할 현재 요소
index (선택) : 현재 요소의 인덱스
array (선택) : find 함수를 호출한 배열
const array = [5, 12, 8, 130, 44];
const found = array.find(el => el > 10);
console.log(found); // 12 출력findIndex()
callback 함수의 조건을 만족하는 첫 번째 요소의 인덱스를 반환.
만족하는 요소가 없으면 -1을 반환.
element : 콜백함수에서 처리할 현재 요소
index (선택) : 현재 요소의 인덱스
array (선택) : findIndex 함수를 호출한 배열
const array = [5, 12, 8, 130, 44];
const found = array.findIndex(el => el > 10);
console.log(found); // 1 출력concat(Array)
두 개의 배열 데이터를 병합해서 새로운 배열을 반환.
원본 배열은 훼손되지 않는다.
const numbers = [1, 2, 3, 4];
const fruits = ['Apple', 'Banana', 'Orange'];
console.log(numbers.concat(fruits));
// [1, 2, 3, 4, Apple', 'Banana', 'Orange'] 반환
console.log(numbers);
// [1, 2, 3, 4] 반환
console.log(fruits);
// ['Apple', 'Banana', 'Orange'] 반환forEach(callback(element, index, array))
배열데이터의 아이템의 개수만큼 콜백함수를 반복적으로 실행.
반환되는 값은 없음.
원본 배열은 훼손되지 않는다.
element : 콜백함수에서 처리할 현재 요소
index (선택) : 현재 요소의 인덱스
array (선택) : forEach 함수를 호출한 배열
const fruits = ['Apple', 'Banana', 'Orange'];
fruits.forEach((fruit, i) => {
console.log(i+1 + '. I like ' + fruit);
});
// 1. I like Apple
// 2. I like Banana
// 3. I like Orange
// 출력
map(callback(element, index, array))
콜백에서 반환된 특정한 데이터들의 모음인 새로운 배열을 반환.
원본 배열은 훼손되지 않는다.
element : 콜백함수에서 처리할 현재 요소
index (선택) : 현재 요소의 인덱스
array (선택) : map 함수를 호출한 배열
const fruits = ['Apple', 'Banana', 'Orange'];
const result = fruits.map((fruit, i) => {
return i+1 + '. I like ' + fruit;
});
console.log(result);
// ['1. I like Apple', '2. I like Banana', '3. I like Orange'] 반환
const resultObj = fruits.map((fruit, i) => ({
id: i + 1,
name: fruit
}));
console.log(resultObj);
// [{id: 1, name: 'Apple'}, {id: 2, name: 'Banana'}, {id: 3, name: 'Orange'}] 반환
"그럼 map을 이용해서 조건에 맞는 새 배열을 만들 수 있을까? 호호호?"
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.map(el => el % 0);
console.log(evenNumbers);
// [false, true, false, true, false, true, false, true, false, true] 출력
"헤엥? 조건의 결과인 boolean의 배열이 반환됐잖아?"
filter(callback(element, index, array))
배열 데이터를 주어진 기준에 의해서 걸러내고, 조건에 해당하는 데이터만 걸러낸 배열을 반환.
원본 배열은 훼손되지 않는다.
element : 콜백함수에서 처리할 현재 요소
index (선택) : 현재 요소의 인덱스
array (선택) : filter 함수를 호출한 배열
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter(el => el % 0);
console.log(evenNumbers);
// [2, 4, 6, 8, 10]; // 짝수 조건에 해당하는 데이터의 배열을 출력includes(valueToFind, fromIndex)
배열에 특정 요소가 포함되어있는지의 여부를 판단하여 boolean을 반환.
valueToFind : 탐색할 요소
fromIndex (선택) : 해당 인덱스부터 검색 시작
const fruits = ['Apple', 'Banana', 'Orange'];
const a = fruits.includes('Potato');
console.log(a); // false 반환
const b = fruits.includes('Orange', 3);
console.log(b); // false 반환
const c = fruits.includes('Orange', -1);
console.log(c); // true 반환push(a)
배열의 맨 뒤에 a데이터를 삽입.
원본 배열이 수정된다.
const numbers = [1, 2, 3, 4];
numbers.push(5);
console.log(numbers); // [1, 2, 3, 4, 5] 반환unshift(a)
배열의 맨 앞에 a데이터를 삽입.
원본 배열이 수정된다.
const numbers = [1, 2, 3, 4];
numbers.unshift(5);
console.log(numbers); // [5, 1, 2, 3, 4] 반환reverse()
배열의 아이템의 순서를 거꾸로 뒤집음.
원본 배열이 수정된다.
const numbers = [1, 2, 3, 4];
numbers.reverse();
console.log(numbers); // [4, 3, 2, 1] 반환splice(index, number, element)
배열의 'index'에 위치한 요소부터 'number'의 개수만큼 제거하고 해당 위치에 element를 추가한다.
원본 배열이 수정된다.
index : 요소를 삭제 또는 추가할 위치
number : 삭제할 요소의 개수. 추가하기 위해 쓰일 때에는 0 삽입.
element (선택) : 추가할 요소
// 요소 삭제
const words = ['가', '나', '차', '다'];
words.splice(2, 1);
console.log(words); // ['가', '나', '다'] 반환
// 요소 추가
const words = ['가', '나', '라'];
words.splice(2, 0, '다');
console.log(words); // ['가', '나', '다', '라'] 반환
// 요소 대체
const words = ['가', '나', '차', '라'];
words.splice(2, 1, '다');
console.log(words); // ['가', '나', '다', '라'] 반환