Learning JavaScript 배열과 배열처리

배열의 기초

• 배열은 객체와 달리 본질에서 순서가 있는 데이터 집합이며 0으로 시작하는 숫자형 인덱스를 사용합니다.
• 자바스크립트의 배열은 요소가 모두 같은 타입일 필요는 없습니다. 배열안에 다른 배열이나 객체도 담을 수 있음
• 배열 리터럴은 대괄호를 만들고, 배열 요소에 인덱스로 접근할 때도 대괄호를 사용합니다.
• 모든 배열에는 요소가 몇 개 있는지 나타내는 length 프로퍼티가 있습니다.
• 배열에 배열 길이보다 큰 인덱스를 사용해서 요소를 할당하면 배열은 자동으로 그 인덱스에 맞게 늘어나며, 빈 자리는 undefined로 채워집니다.
• Array생성자를 써서 배열을 만들 수 있지만 그렇게 해야하는 경우는 별로 없습니다.

위 내용을 숙지하면 자바스크립트의 배열을 더 자유롭게 다를 수 있을 것이다.

배열 요소 조작

자바스크립트의 배열 메서드 중 일부는 배열 '자체'를 수정하며, 다른 일부는 새 배열을 반환합니다. 예를 들어 push는 배열 자체를 수정하지만 concat은 새 배열을 반환합니다. 메서드 이름에 이런 차이점에 대한 힌트가 없으므로 프로그래머가 전부 기억해야 합니다.

 

concat, slice

concat 메서드는 배열의 끝에 여러 요소를 추가한 사본을 반환합니다. 즉 본 배열은 바뀌지않습니다.

slice또한 배열 일부를 가져오는 것인데 첫 번째 매개변수는 어디서? 두 번째 매개변수는 어디까지? 가져올지를 결정하며 결정된 데이터의 사본데이터를 가져옵니다.

const arr = [1,2,3];
var newArr = arr.concat([4,[5,6]],7);
var pickArr = arr.slice(1);

arr;		//[1,2,3]
newArr;		//[1,2,3,4,[5,6],7]
pickArr;	//[2,3]

splice

splice는 배열 자체를 수정합니다. 첫 번째는 수정을 시작할 인덱스고 두 번째는 제거할 요소 숫자입니다. 아무것도 제거하지 않을 때는 0을 넘깁니다. 나머지 매개변수는 추가될 요소 입니다. 즉 추가하거나 제거하거나 둘다 쓰임

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,7] 입니다.
arr.splice(2,1,'a','b');	//arr은 이제 [1,4,'a','b',7] 입니다.

배열안에서 요소 교체하기

copyWithin

copyWithin은 ES6에서 도입한 새 메서드입니다. 이 메서드는 배열 요소를 복사해서 다른 위치에 붙여넣고, 기존의 요소를 덮어 씁니다. 첫 번째 매개변수는 복사한 요소를 붙여넣을 위치이고, 두 번째 매개변수는 복사를 시작할 위치이고, 세 번째 매개변수는 복사를 끝낼 위치입니다.

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

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]입니다

특정 값으로 배열 채우기

fill

ES6에서 도입한 새 메서드 fill은 환영할만한 좋은 메서드입니다. 이 메서드는 정해진 값으로 배열을 채웁니다. 크기를 지정해서 배열을 생성하는 Array생성자와 잘 어울입니다. 배열의 일부만 채우려고 할 때는 시작 인덱스와 끝 인덱스만 지정하면 됩니다. 음수 인덱스도 사용할 수 있습니다.

const arr2 = new Array(5).fill(1);

console.log(arr2.fill("a"));
console.log(arr2.fill("b",1));
console.log(arr2.fill("c",2,4));
console.log(arr2.fill(5.5,-4));
console.log(arr2.fill(0,-3,-1));

배열 정렬과 역순 정렬

Revers, Sort, 정렬 함수

revers는 이름 그대로 배열 요소의 순서를 반대로 바꿉니다. => arr.revers();

sort는 순서대로 정렬합니다. => arr.sort();

sort는 정렬 함수를 받을 수 있습니다. 이 기능은 매우 편리합니다. 예를 들어 일반적으로는 객체가 들어 있는 배열을 정렬할 수 없지만, 정렬 함수를 이용하면 가능합니다!!

//정렬되지 않았음
objectSort.sort();

//name 프로퍼티의 알파벳 순으로 정렬, 
objectSort.sort((a,b) => a.name > b.name? 1 : -1);

//name 프로퍼티의 두 번째 글자의 알파벳 역순으로 정렬
objectSort.sort((a,b) => a.name[1] < b.name[1]);

배열검색

indexOf, findindex, find, some, every

indexOf는 찾고자 하는 것과 정확히 일치(===)하는 첫 번째 요소의 인덱스를 반환합니다. indexOf의 짝인 lastIndexOf는 배열의 끝에서부터 검색합니다. 배열의 일부분만 검색하려면 시작 인덱스를 지정할 수 있습니다. indexOf와 lastIndexOf는 일치하는 것을 찾지 못하면 -1을 반환합니다.

 

find는 조건에 맞는 요소의 인덱스가 아니라 요소 자체를 원할 때 사용합니다. find는 findIndex와 마찬가지로 검색 조건을 함수로 전달할 수 있습니다. 조건에 맞는 요소가 없을 때는 undefined를 반환합니다.

const ar = [{ id:5, name:"Judith"}, {id:7, name:"Francis"}];

ar.find(o => o.id === 5);
ar.find(o => o.id === 2);

//좀더 복잡한 조건 설정
const ar2 = [1,17,16,5,4,16,10,3,49];
arr.find((x,i) => i>2 && Number.isInteger(Math.sqrt(x)));

some은 조건에 맞는 요소를 찾으면 즉시 검색을 멈추고 true를 반환하며, 조건에 맞는 요소가 없으면 false를 반환함

const someArr = [5,7,12,15,17];
arr.some(x => x%2===0);

every는 배열의 모든 요소가 조건에 맞아야 true를 반환해준다. 조건에 맞지않으면 검색을 중지하고 false반환

map과 filter

map과 filter는 배열 메서드 중 가장 유용한 메서드입니다. 이들 메서드로 할 수 있는 일은 정말 다양합니다.

map은 배열 요소를 변형합니다. 무엇으로 변형하냐고요? 뭐든 가능합니다. 숫자가 들어 있는 객체가 있는데, 필요한건 숫자라고요? 간단합니다. 함수로 구성된 배열이 있는데, 프라미스가 필요하다고요? 간단합니다. 일정한 형식의 배열을 다른 형식으로 바꿔야 한다면 map을 쓰십시오. 둘다 사본을 반환하며 원래 배열은 바뀌지 않습니다.

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

const names = cart.map(x => x.name);
const prices = cart.map(x => x.price);
const discount = cart.map(x => x.price*0.8);

좀더 복잡하게 사용해볼까요?

const items = ["Widget","Gadget"];
const prices2 = [9.94, 22.94];

const cart2 = items.map((x,i) => ({name:x, price:prices2[i]}));
console.log(cart2);

filter는 이름이 암시하듯 배열에서 필요한 것들만 남길 목적으로 만들었습니다.

//카드덱을 만들어보자
const cards = [];

for(let suit of ['H','C','D','S'])
    for(let value=1; value<13;value++)
        cards.push({suit,value});

console.log(cards.filter(c => c.value===2));

map과 filter를 결합하면 정말 다양한 일을 할 수 있습니다. 예를 들어 앞에서 만든 카드덱을 짧은 문자열로 표현하고 싶다면 카드 그림(하트,클로버,다이아몬드,스페이드)에는 유니코드 포인트를 쓰고 에이스와 킹 퀸 주니어는 숫자 대신 각각 A, K, Q, J를 쓰겠습니다.

function cardToString(c){
    const suits = {'H':'\u2665', 'C':'\u2663', 'D':'\u2666', 'S':'\u2660'};
    const values = {1:'A', 11:'J', 12:'Q', 13:'K'};

    for(let i=2; i<=10; i++) values[i] = i;
    return values[c.value] + suits[c.suit];
}

console.log(cards.filter(c =>c.value===2).map(cardToString));

삭제되거나 정의되지 않은 요소들

Array 메서드는 삭제되거나 정의되지 않은 요소들을 다룰 때 좀 당혹스럽게 동작하곤 합니다. map과 filter, reduce는 삭제되거나 정의되지 않은 요소들에서 콜백 함수를 호출하지 않습니다. 배열 중간의 요소를 삭제하고 map을 호출하면 배열 가운데 '구멍'이 생깁니다.

const arr = [1,2,3,4,5];
delete arr[2];
arr.map(x => 0); 	//[0,0,undefined,0,0]

reduce, reduceRight

배열.reduce((누적 값, 현재 값, 인덱스, 요소) => {return 결과}, 초기 값);

이전 값이 아니라 누적 값이라는 것에 주의해야한다. 누적 값 이기 때문에 다양하게 활용할 수 있습니다. 누적 값은 지정하지 않으면 자동으로 0번째 인덱스 값이 됩니다. reduceRight는 동작은 같지만 요소 순회를 오른쪽에서부터 왼쪽으로 한다는 차이점이 있습니다. map과 filter같은 함수형 메서드를 모두 reduce로 구현할 수 있습니다.

const numArr = [1, 2, 3];

result = numArr.reduce((a, x, i) => {
  console.log(a, x, i);
  return a + x;
}, 0);


result; // 6

문자열병합

join

배열의 문자열 요소들을 몇몇 구분자로 합치려 할 때가 많습니다. join()은 매개변수로 구분자 하나를 받고 요소들을 하나로 합친 문자열을 반홥합니다. 이 매개변수가 생략됐을 때의 기본값은 쉼표이며, 문자열 요소를 합칠 때 정의되지 않은 요소, 삭제된 요소, null, undefined는 모두 빈 문자열로 취급합니다.

const arr = [1, null, "hello", "world", true, undefined];
delete arr[3];

arr.join();		//"1,,hello,,true"
arr.join('');		//"1hellotrue"
arr.join(' -- ');	//"1 -- -- hello -- -- true --"

이를 응용하면 객체에 있는 값을 li 태그에 손쉽게 넣을 수 있다.

const attributes = ['Nimble', 'Perceptive', 'Generous'];
const html ='<ul><li>' + attributes.join('</li><li>') + '</li></ul>';