[JavaScript] 배열의 요소 조작하기
1. 배열 요소 조작
1. 배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하기
push, pop
각각 배열의 끝에 요소를 추가하거나 제거합니다. 기존의 배열이 수정됩니다.
const arr = ['b', 'c', 'd'];
arr.push('e'); //4. arr은 이제 ['b','c','d','e']입니다.
arr.pop(); //'e'. arr은 이제 ['b','c','d'] 입니다.shift, unshift
각각 배열의 첫번째 요소를 제거하거나 추가합니다. 기존의 배열이 수정됩니다.
const arr=['b','c','d'];
arr.unshift('a'); // 4. arr = ['a','b','c','d']
arr.shift(); // 'a'. arr = ['b','c','d']push와 unshift는 새 요소를 추가해서 늘어난 길이를 반환하고, pop 과 shift 는 제거된 요소를 반환합니다.
2. 배열의 끝에 여러 요소 추가하기
concat 메서드는 배열의 끝에 여러 요소를 추가한 사본을 반환합니다. concat에 배열을 넘기면 이 메서드는 배열을 분해해서 원래 배열에 추가한 사본을 반환합니다.
const arr = [1, 2, 3];
arr.concat(4, 5, 6); // [1,2,3,4,5,6] arr은 바뀌지 않습니다.
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]]3. 배열의 일부 가져오기
배열의 일부만 가져올 때는 slice메서드를 사용합니다. slice 메서드는 매개변수 두 개를 받습니다. 첫 번째 매개변수는 어디서부터 가져올지를, 두 번째 매개변수는 어디까지 가져올지를 지정합니다. 두 번째 매개변수를 생략하면 배열의 마지막까지 반환합니다. 이 메서드에서는 음수 인덱스를 쓸 수 있고, 음수 인덱스를 쓰면 배열의 끝에서부터 요소를 셉니다. 사본을 반환합니다.
const arr = [1, 2, 3, 4, 5];
arr.slice(3); //[4,5] arr은 바뀌지 않습니다.
arr.slice(2, 4); //[3,4]
arr.slice(-2); //[4,5]
arr.slice(1, -2); //[2,3]
arr.slice(-2, -1); //[4]4. 임의의 위치에 요소 추가하거나 제거하기
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); //[2,3], arr = [1,4,5,6,7]
arr.splice(2, 1, 'a', 'b'); //[5], arr = [1,4,'a','b',6,7]5. 배열 안에서 요소 교체하기
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]6. 특정 값으로 배열 채우기
fill은 ES6 에서 도입한 배열 수정 메서드입니다. 이 메서드는 정해진 값으로 배열을 채웁니다. 크기를 지정해서 배열을 생성하는 Array 생성자와 잘 어울립니다. 배열의 일부만 채우려 할 때는 시작 인덱스와 끝 인덱스를 지정하면 됩니다. 음수 인덱스도 사용할 수 있습니다.
const arr = new Array(5).fill(1); // undefiend, 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']7. 배열 정렬과 역순 정렬
reverse는 이름 그대로 배열 요소의 순서를 반대로 수정합니다.
const arr = [1, 2, 3, 4, 5];
arr.reverser(); //arr=[5,4,3,2,1]sort는 배열 요소의 순서를 정렬해 수정합니다.
const arr = [1, 2, 3, 4, 5];
arr.sort(); //arr=[5,4,3,2,1]sort는 정렬 함수를 받을 수 있습니다. 예를 들어 일반적으로는 객체가 들어있는 배열을 정렬할 수 없지만, 정렬 함수를 사용하면 가능합니다.
const arr = [
{ name: 'Suzanne' },
{ name: 'Jim' },
{ name: 'Trevor' },
{ name: 'Amanda' },
];
arr.sort(); // arr은 바뀌지 않습니다.
arr.sort((a, b) => a.name > b.name); // arr은 name프로퍼티의 알파벳 순으로 정렬됩니다.
arr.sort((a, b) => a.name[1] < b.name[1]); // arr은 name프로퍼티의 두 번째 글자의 알파벳 역순으로 정렬됩니다.정렬함수는 아래와 같이 동작합니다.
만약 어떤 두 값 a, b에 대해서 비교 함수 compare를 compare(a, b)와 같이 호출했을 때:
- 음수를 반환하면,
a가b앞에 오도록 정렬합니다. - 0 을 반환하면,
a와b를 같은 순서로 간주합니다. - 양수를 반환하면,
b가a앞에 오도록 정렬합니다.
