[javascript] 배열

배열

배열 요소 조작

배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하기

push와 pop은 배열의 끝에 요소를 추가하거나 제거하고, shift와 unshift는 배열의 처음에 요소를 제거하거나 추가한다. push와 unshift는 새 요소를 추가해 늘어난 길이를 반환하고, pop과 shift는 제거된 요소를 반환한다.

const arr = ["b", "c", "d"];
arr.push("e");              // 4, ["b", "c", "d", "e"]
arr.pop();                  // "e", ["b", "c", "d"]
arr.unshift("a");           // 4, ["a", "b", "c", "d"]
arr.shift();                // "a", ["b", "c", "d"]

배열의 일부 가져오기

slice 메서드는 매개변수 두 개를 받는다. 첫 번째는 어디서부터 가져올지, 두 번째는 어디까지 가져올지를 지정한다. 두 번째 매개변수를 생략하면 배열의 마지막까지 반환한다. 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]

임의의 위치에 요소를 추가하거나 제거하기

splice는 매개변수 세 개를 받는다. 첫 번째는 수정을 시작할 인덱스, 두 번째는 매개변수는 제거할 요소 개수(아무 요소도 제거하지 않을 때는 0을 넘긴다), 나머지 매개변수는 배열에 추가될 요소이다.

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

배열 안에서 요소 교체하기

copyWithin은 배열 요소를 복사해서 다른 위치에 붙여넣고, 기존의 요소를 덮어씁니다. 첫 번째 매개변수는 복사한 요소를 붙여넣을 위치이고, 두 번째 매개변수는 복사를 시작할 위치이고, 세 번째 매개변수는 복사를 끝낼 위치이다. slice와 마찬가지로 음수 인덱스를 사용할 수 있다.

const arr = [1, 2, 3, 4];
arr.copyWithin(1, 2); 
// 인덱스 1 위치에 2 ~ 마지막 인덱스 - 1을 복사해 붙여넣는다. [1, 3, 3, 4]
arr.copyWithin(2, 0, 2);
// 인덱스 2 위치에 0 ~ 2 - 1을 복사해 붙여넣는다. [1, 3, 1, 3]
arr.copyWithin(0, -3, -1);
// 인덱스 0 위치에 -3 ~ -1 - 1을 복사해 붙여넣는다. [3, 1, 1, 3]

특정 값으로 배열 채우기

fill은 정해진 값으로 배열을 채운다. 크기를 지정해서 배열을 생성하는 Array 생성자와 잘 어울린다. 배열의 일부만 채우려 할 때는 시작 인덱스와 끝 인덱스를 지정하면 된다. 음수 인덱스도 사용할 수 있다.

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

배열 정렬과 역순 정렬

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

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

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

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

sort는 정렬 함수를 받을 수 있다. 일반적으로는 객체가 들어있는 배열을 정렬할 수 없지만, 정렬 함수를 사용하면 가능하다.

const arr = [
    { name: "Yasuo" },
    { name: "Vayne" },
    { name: "MasterYi" },
    { name: "Teemo" }
];
// name 프로퍼티의 알파벳 순으로 정렬
arr.sort((a, b) => a.name > b.name ? 1 : -1);

배열 검색

indexOf는 찾고자 하는 것과 정확히 일치(===)하는 첫 번째 요소의 인덱스를 반환한다. lastIndexOf는 배열의 끝에서부터 검색한다. 일치하는 것을 찾지 못하면 -1을 반환한다.

const  o = { name: "Jerry"};
const arr = [1, 5, "a", o, true, 5, [1, 2], "9"];
arr.indexOf(5);             // 1
arr.lastIndexOf(5);         // 5
arr.indexOf("a", 5);        // -1
arr.lastIndexOf(5, 4);      // 1

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

const arr = [
    { name: "Yumi", kill: 100 },
    { name: "Blitzcrank", kill: 50 }
];
arr.findIndex(o => o.kill === 50);          // 1
arr.findIndex(o => o.name === "Yumi");      // 0

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

const arr = [
    { name: "Yumi", kill: 100 },
    { name: "Blitzcrank", kill: 50 }
];
arr.find(o => o.kill === 100);  // 객체 { name: "Yumi", kill: 100 }

some은 조건에 맞는 요소를 찾으면 즉시 검색을 멈추고 true를 반환하며, 조건에 맞는 요소를 찾지 못하면 false를 반환한다.

const arr = [5, 7, 12, 15, 17];
arr.some(x => x % 2 === 0);                    // true
arr.some(x => Number.isInteger(Math.sqrt(x))); // false

every는 배열의 모든 요소가 조건에 맞아야 true를 반환하며 그렇지 않다면 false를 반환한다. every는 조건에 맞지 않는 요소를 찾아야만 검색을 멈추고 false를 반환한다.

const arr = [4, 6, 16, 36];
arr.every(x => x % 2 === 0);                   // true