배열 메서드 정리

들어가며

배열 메서드는 종류도 많고 기능도 많아서, 다 외우기가 꽤 힘들다.

그럼에도 코딩을 하다 보면 정말 자주 써먹기 때문에 정리해둘 필요성을 느꼈다.

push, pop, shift, unshift

배열 자체를 수정하며,

배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하는 메서드들이다.

추가하는 메서드들은 배열의 길이를, 제거하는 메서드들은 제거된 요소를 반환한다.

• push : 배열의 맨 뒤에 요소를 하나 추가한다.
• pop : 배열의 맨 뒤에 요소를 하나 제거한다.
• unshift : 배열의 맨 앞에 요소를 하나 추가한다.
• shift : 배열의 맨 앞에 요소를 하나 제거한다.

join

배열의 사본을 반환하며,
배열의 모든 요소를 연결해 하나의 문자열로 만든다.

const elements = ['Fire', 'Air', 'Water'];

const elements1 = elements.join();		// "Fire,Air,Water"
const elements2 = elements.join("");		// "FireAirWater"
const elements3 = elements.join("-");		// "Fire-Air-Water"

concat

배열의 사본을 반환하며,

배열의 끝에 여러 요소를 추가하는 메서드이다.

const arr = [1,2,3];
arr.concat(4,5,6);		// [1,2,3,4,5,6]
arr.concat([4,5,6]);	// [1,2,3,4,5,6]
arr.concat([4,5],6);	// [1,2,3,4,5,6]
arr.concat(4,[5,6]);	// [1,2,3,4,[5,6]]

arr 자체를 바꾸진 않으며, 제공받은 배열을 한 번만 분해한다.

slice

배열의 사본을 반환하며,

배열의 일부만 가져올 때 사용한다.

const arr = [1,2,3,4,5];
arr.slice(3)		// [4,5]
arr.slice(2,4)		// [3,4]
arr.slice(-2);		// [4,5]
arr.slice(1,-2);	// [2,3]
arr.slice(-2,-1);	// [4,5]

arr 자체를 바꾸진 않는다.

splice

배열 자체를 수정하며,

임의의 위치에 요소를 추가하거나 제거하는 메서드이다.

const arr = [1,5,7];
arr.splice(1, 0, 2, 3, 4);		// arr = [1,2,3,4,5,7]
arr.splice(5, 0, 6);			// arr = [1,2,3,4,5,6,7]
arr.splice(1, 2);				// arr = [1,4,5,6,7]
arr.splice(2, 1, "a", "b");		// arr = [1,4,'a','b',6,7]

arr 배열 자체가 바뀐다.

copyWithin

배열 자체를 수정하며,

배열 요소를 복사해서 다른 위치에 붙여넣고, 기존의 요소를 덮어쓴다.

const arr = [1,2,3,4];
// arr.copyWithin(붙여넣을 위치, 복사 시작 위치, 복사 종료 위치);

arr.copyWithin(1, 2);		// arr = [1,3,4,4]
arr.copyWithin(2, 0, 2);	// arr = [1,3,1,3]		
arr.copyWithin(0, -3, -1);	// arr = [3,1,1,3]

arr 배열 자체가 바뀐다.

fill

배열 자체를 수정하며,

정해진 값으로 배열을 채운다.

const arr = new Array(5).fill(1);	// arr = [1,1,1,1,1]
arr.fill("a");				// arr = ["a","a","a","a","a"]
arr.fill("b",1);			// arr = ["a","b","b","b","b"]
arr.fill("c",2,4);			// arr = ["a","b","c","c","b"]
arr.fill(5.5, -4);			// arr = ["a",5.5,5.5,5.5,5.5]
arr.fill(0, -3, -1);		// arr = ["a",5.5,0,0,5.5]

arr 배열 자체가 바뀐다.

reverse

배열 자체를 수정하며,

배열 요소의 순서를 반대로 바꾼다.

sort

배열 자체를 수정하며,

배열 요소의 순서를 정렬한다.

정렬 함수를 콜백으로 받을 수 있어서 자유롭게 정렬할 수 있다.

• 숫자 오름차순 정렬

const arr = [10, 4, 5, 2];
arr.sort((a,b) => a-b);		// [2, 4, 5, 10]

• 객체가 들어있는 배열 정렬

const arr = [{ age: 40 }, { age: 7 }, { age: 23 }, { age: 10 }];
arr.sort((a,b) => a.age - b.age);			// arr은 age 프로퍼티의 숫자 순으로 정렬됌

• 알파벳 정렬

indexOf , lastIndexOf

indexOf는 찾고자 하는 값과 정확히 일치(===) 하는 요소의 첫 번째 인덱스를 반환한다.

lastIndexOf 는 마지막 인덱스를 반환한다.

두 메서드 모두 일치하는 값을 찾지 못하면 -1 을 반환한다.

findIndex

일치하는 것을 찾지 못했을 때 -1을 반환하며,

보조 함수를 써서 검색 조건을 지정할 수 있다.

const arr = [{ id: 5, name: "Judith"}, { id: 7, name: "Francis"}];
arr.findIndex(o => o.id === 5);				// 0
arr.findIndex(o => o.name === "Francis");	// 1
arr.findIndex(o => o === 3);				// -1
arr.findIndex(o => o.id === 17);			// -1

find

조건에 맞는 요소의 인덱스가 아니라 요소 자체를 원할 때

const arr = [{ id: 5, name: "Judith"}, { id: 7, name: "Francis"}];
arr.find(o => o.id === 5);		// 객체 { id: 5, name: "Judith" }
arr.find(o => o.id === 2);		// undefined

class Person {
	constructor(name) {
		this.name = name;
		this.id = Person.nextId++;
	}
}
Person.nextId = 0;
const jamie = new Person("Jamie"),
    juliet = new Person("Juliet"),
    peter = new Person("Peter"),
    jay = new Person("Jay");

const arr = [jamie, juliet, peter, jay];

// option 1: ID 직접비교
arr.find(p => p.id === juliet.id);


// option 2 : 'this' 매개변수 이용
arr.find(function(p) {
    return p.id === this.id
}, juliet);

some

조건에 맞는 요소가 하나라도 있으면 즉시 검색을 멈추고 true를, 없으면 false를 반환한다.

const arr = [5, 7, 12, 15, 17];
arr.some(x => x % 2 === 0);						// true (12 는 짝수)
arr.some(x => Number.isInteger(Math.sqrt(x)));	// false (정수를 제곱근으로 갖는 수가 하나도 없음)

every

배열의 모든 요소가 조건에 맞아야 true 를 반환하며, 그렇지 않으면 false 를 반환한다.

const arr = [4, 6, 16, 36];
arr.every(x => x % 2 === 0);					// true (전부 짝수임)
arr.every(x => Number.isInteger(Math.sqrt(x)));	// false (6의 제곱근만 정수가 아님)

map

사본을 반환하며,

배열 요소를 다른 형식으로 바꾼다.

• 객체를 두 개의 배열로 나누기

const cart = [ { name: "Widget", price: 9.95 }, { name: "Gadget", price: 22.95 }];
const names = cart.map(x => x.name);			// ["Widget", "Gadget"]
const prices = cart.map(x => x.price);			// [9.95, 22.95]
const discountPrices = prices.map(x => x*0.8);	// [7.96, 18.36]

• 나눠진 배열들을 다시 객체로 결합하기

const items = ["Widget", "Gadget"];
const prices = [9.95, 22.95];
const cart = items.map((x,i) => ({name: x, price: prices[i]}));

// cart = [ { name: "Widget", price: 9.95 }, { name: "Gadget", price: 22.95 }];

filter

사본을 반환하며,

원본 배열에서 필요한 것들만 사본에 저장한다.

const arr [1,2,3,4,5];

const even = arr.filter(x => x % 2 === 0);
console.log(even)	// [2,4];

reduce

map 이 배열의 각 요소를 변형한다면,

reduce 는 배열 자체를 변형한다.

// array.reduce(accumulator, element, index, array, initValue)
const arr = [5, 7, 2, 4];
const sum = arr.reduce((acc, cur) => acc += cur);

// sum = 18

• 각 단어를 첫글자에 따라 묶기

const words = ["Beachball", "Rodeo", "Angel", "Aardvark", "Xylophone", "November", "Chocolate", "Papaya", "Uniform", "Joker", "Clover", "Bali"];

const alphabetical = words.reduce((acc, x) => {
	if(!acc[x[0]]) {
		acc[x[0]] = [];
	}
	acc[x[0]].push(x);
	return acc;
}, {});

• 분산 계산

const data = [3.3, 5, 7.2, 12, 4, 6, 10.3];
const stats = data.reduce((a, x) => {
	a.N++;
	let delta = x - a.mean;
	a.mean += delta/a.N;
	a.M2 += delta*(x - a.mean);
	return a;
}, { N: 0, mean: 0, M2: 0 });

if(stats.N > 2) {
	stats.variance = stats.M2 / (stats.N - 1);
	stats.stdev = Math.sqrt(stats.variance);
}

• 6글자 미만 단어 필터링해서 하나의 문자열로 합치기

const words = ["Beachball", "Rodeo", "Angel", "Aardvark", "Xylophone", "November", "Chocolate", "Papaya", "Uniform", "Joker", "Clover", "Bali"];

const longWords = words.reduce((a, w) => {
	return w.length > 6 ? a + " " + w : a; 	
}, "").trim();	// 문자 양끝 공백 제거를 위해 trim() 사용

console.log(longWords);

// Beachball Aardvark Xylophone November Chocolate Uniform

join

배열 요소들을 하나로 합친 문자열 사본을 반환한다.

const arr = 1, null, "hello", "world", true, undefined];
delete arr[3];
arr.join();			// "1,,hello,,true,"
arr.join("");		// "1hellotrue"
arr.join(" -- ")	// "1 -- -- hello -- -- true --"

삭제된 요소, null, undefined는 빈 문자열로 취급한다.

표 정리

• 배열 콘텐츠 조작

하고 싶은 일	메서드	수정 또는 사본
스택 만들기	push, pop	배열 수정
큐 만들기	unshift,shift	배열 수정
배열 마지막에 여러 요소 +	concat	사본 반환
배열 일부가 필요할 때	slice	사본 반환
임의의 위치에 요소 +-	splice	배열 수정
배열 안에서 요소 교체	copyWithin	배열 수정
배열 채우기	fill	배열 수정
배열 반대 정렬	reverse	배열 수정
배열 정렬	sort	배열 수정

• 배열 검색

찾고자 하는 것	사용할 메서드
요소의 인덱스	indexOf(단순한 값), findIndex(복잡한 값)
인덱스를 뒤에서부터 찾을 때	lastIndexOf(단순한 값)
요소 자체	find
조건을 만족하는 요소가 들어있는지 확인	some
모든 요소가 조건을 만족하는지 확인	every

• 배열 변형

하고 싶은 일	사용할 메서드	수정 또는 사본
배열의 모든 요소 변형	map	사본 반환
조건에 맞는 요소만 남기기	filter	사본 반환
배열 전체를 다른 데이터 타입으로 변형	reduce	사본 반환
요소를 문자열로 바꿔서 하나로 병합	join	사본 반환

REFERENCE

러닝 자바스크립트 (이선 브라운 저)