자바스크립트 배열 관련 문법에 대해 알아보자!
추가 / 삭제
push
배열 맨 뒤에 특정 원소를 추가할 때 (배열 자체를 바꿈)
arr.push(item)
unshift
배열 맨 앞에 특정 원소를 넣어줄 때 (배열 자체를 바꿈)
arr.unshift(item)
pop
배열에서 마지막 원소를 추출해서 밖으로 빼낸다. (배열 자체를 바꿈)
const numbers = [10, 20, 30, 40];
const num = numbers.pop();
console.log(num); // 40
console.log(numbers); // [10, 20, 30]shift
배열에서 첫 번째 원소를 추출해서 밖으로 빼낸다. (배열 자체를 바꿈)
const numbers = [10, 20, 30, 40];
const num = numbers.shift();
console.log(num); // 10
console.log(numbers); // [20, 30, 40]push-pop / unshift-shift
이렇게 짝이다!
concat
여러 배열을 하나의 배열로 합쳐준다. (기존 배열을 바꾸지 않고!!)
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6]splice
배열에서 특정 범위의 값을 추출하고, 그 자리에 새로운 값을 넣을 때. (배열 자체를 바꿈)
arr.splice(index, 뒤로 제거할 개수, 넣을 값1, 넣을 값2...)
// 추출만 할 때
const numbers = [10, 20, 30, 40];
numbers.splice(2, 2); // 2번째 인덱스부터 2개를 제거하겠다
console.log(numbers); // [10, 20]
// 추출 후 다른 값 넣기
const numbers = [10, 20, 30, 40];
numbers.splice(2, 2, 'ten', 'twenty'); // 2번째 인덱스부터 2개를 제거하고, 새 값을 넣겠다
console.log(numbers); // ['ten', 'twenty', 30, 40]slice
배열에서 특정 항목만 떠서 가져옴!! (기존 배열을 바꾸지 않음!!)
const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(1, 3); // 1번째 안덱스부터 3번째 전까지
console.log(sliced); // [20, 30]
console.log(numbers); // [10, 20, 30, 40]원소들로 쪼물딱
forEach
배열 안의 원소들을 가지고 어떤 것을 하겠다. (콜백함수)
const pets = ['dog', 'cat', 'goldfish'];
pets.forEach(pet => {
console.log(pet);
});map
배열 안의 원소들을 돌며 조건을 확인하거나 변환
const ages = [10, 19, 21, 44];
function canDrink(data) {
return data.map(age => (age >= 20 ? 'Yes' : 'No'));
};
canDrink(ages); // ["No", "No", "Yes", "Yes"]const array = [1, 2, 3, 4];
const squared = array.map(n => n * n);
console.log(squared); // [1, 4, 9, 16];reduce
배열 안의 원소들을 활용해 연산할 때.
arr.reduce((acc, cur) => 연산, 초기값)초기값의 기본값은 0이다.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 10filter
특정 조건을 만족하는 원소들로 새로운 배열 만들기. (기존 배열 해치지 않아요)
인자는 순서대로arr.filter(value, index, arr)
// 값으로 필터
const data = [2, 10, 11, 15];
const answer = data.filter(num => {return num >= 10});
console.log(answer); // [10, 11, 15]
// 값, 인덱스로 필터
const result = data.filter((num, idx) => {return num >= 10 && idx > 1});
console.log(result); // [11, 15];
//
const todos = [{1: '고양이 밥주기', done: true}, {2: '공부하기', done: false}]
const taskNotDone = todos.filter(todo => todo.done === false);
console.log(taskNotDone); // [object]reverse
배열의 원소 순서를 반대로 만든다. (기존 배열의 순서를 바꿈)
array.reverse()
sort
배열 안의 원소들을 정렬할 때 사용.
// 원소가 문자열일 때 (sort만 사용해도 됨)
const fruits = ['banana', 'orange', 'apple'];
fruits.sort(); // ['apple', 'banana', 'orange']
fruits.sort().reverse(); // ['orange', 'banana', 'apple']
// 원소가 숫자일 때 : a - b > 0 (오름차순)
array.sort(function(a, b) {return a - b})
// 원소가 숫자일 때 : a - b < 0 (내림차순)
array.sort(function(a, b) {return b - a})
// 다중 조건 (인덱스 기준)
array.sort(function(a, b) {
if (a[n] > b[n]) return 1
if (a[n] < b[n]) return -1
if (a[n] === b[n]) return a.localeCompare(b)
})
// 다중 조건 (특정 속성기준)
array.sort(function(a, b) {return a.속성 - b.속성})인덱스 검색
indexOf
원하는 값의 인덱스를 반환. 없다면 -1을 반환하고, 찾자마자 종료함. (가장 처음 인덱스를 반환)
arr.indexOf(찾을 값, 시작인덱스)
const arr = [1, 2, 3, 4, 3];
const idx = arr.indexOf(3);
console.log(idx); // 2
// 모두 찾으려면
const answer = [];
let idx = arr.indexOf(3);
while (idx != -1) {
answer.push(idx);
idx = arr.indexOf(3, idx + 1);
};
console.log(answer); // [2, 4]findIndex
판별식을 만족하는 첫 인덱스 반환. 없다면 -1을 반환.
arr.findIndex(콜백함수)callback(요소, index, array)
const numbers = [1, 2, 3, 4, 5, 6, 7, 3];
const answer = numbers.findIndex(num => num ===3);
console.log(answer); // 2find
판별식을 만족하는 첫 번째 요소의 값을 반환. 없다면 undefined. 찾으면 바로 종료.
const numbers = [4, 10, 15, 20];
const answer = numbers.find(num => {return num % 5 === 0});
console.log(answer); // 10