[JavaScript] 배열 만들기 3 _ 구조분해할당, slice()

코딩테스트 연습 > 코딩 기초 트레이닝

✅ 문제 설명

정수 배열 arr와 2개의 구간이 담긴 배열 intervals가 주어집니다.

intervals는 항상 [[a1, b1], [a2, b2]]의 꼴로 주어지며 각 구간은 닫힌 구간입니다. 닫힌 구간은 양 끝값과 그 사이의 값을 모두 포함하는 구간을 의미합니다.

이때 배열 arr의 첫 번째 구간에 해당하는 배열과 두 번째 구간에 해당하는 배열을 앞뒤로 붙여 새로운 배열을 만들어 return 하는 solution 함수를 완성해 주세요.

✅ 제한사항

• 1 ≤ arr의 길이 ≤ 100,000
• 1 ≤ arr의 원소 < 100
• 1 ≤ a1 ≤ b1 < arr의 길이
• 1 ≤ a2 ≤ b2 < arr의 길이

✅ 입출력 예

✅ 풀이

나는 map()을 두 번이나 사용해서 불필요한 코드를 작성한 느낌이다. 배열의 요소를 활용하려면 순회를 해야한다고만 생각했기 때문이다..
다른 사람의 풀이에서 파라미터로 받은 intervals 2차원 배열을 할당한 것을 보고 낯설다고 생각이 들었다. 알고보니 이것이 바로 구조분해할당 이었고, 이런식으로 사용하는 것이구나 알 수 있었다.

// 나의 풀이 - map활용
const solution = (arr, intervals) => {
    const newArr = []
    
    intervals.map((item, idx) => {
        let sliceArr = arr.slice(item[0], item[1]+1)
        sliceArr.map((item) => {
            newArr.push(item);
        })
    })
    
    return newArr;
}

// 다른 사람의 풀이 참고 - 구조분해할당
// intervals 파라미터는 [[1, 3], [0, 4]]와 같은 구조이므로 아래와 같이 할당한다.
function solution(arr, intervals) {
    const [[a,b],[c,d]] = intervals;

    return [...arr.slice(a, b+1), ...arr.slice(c, d+1)];
}

slice([begin[, end]])

• 배열을 begin부터 end까지 자른다.
• end는 포함되지 않으며, end가 없을 경우 begin부터 끝까지 자른다.

let array = [0, 1, 2, 3, 4, 5];
array = array.slice(2); // 2부터 끝까지 
console.log(array); // [2, 3, 4, 5];

let array2 = [0, 1, 2, 3, 4, 5];
array2 = array2.slice(2, 5); // 2부터 5까지
console.log(array2); // [2, 3, 4]

splice(start[, deleteCount[, item1[, item2[, ...]]]])

• 배열을 start부터 deleteCount만큼 자른다.
• deleteCount가 없을 경우 start부터 끝까지 자른다.
• deleteCout뒤쪽에 오는 인자들로 자를 부분을 채워 넣는다.

let array = [0, 1, 2, 3, 4, 5];
array.splice(2, 2); // 2부터 2개
console.log(array); // [0, 1, 4, 5]


let array2 = [0, 1, 2, 3, 4, 5];
array2.splice(0, 3,"가", "나", "다"); // 0부터 3개를 자르고 뒤쪽 인자들로 넣는다.
console.log(array2); //["가", "나", "다", "라", 3, 4, 5]

✅ 구조 분해 할당(destructuring assignment)

구조 분해 할당이란 명칭은 어떤 것을 복사한 이후에 변수로 '분해'해준다는 의미 때문에 붙여졌다.

객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료구조이다. 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 하는데, 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 있다.
이럴 때 객체나 배열을 변수로 분해하는 특별한 문법이 바로 구조분해할당이다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해는 그 진가를 발휘한다.

배열분해하기

// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을, surname엔 arr[1]을 할당
let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname);  // Lee

// 할당 연산자 우측에는 배열뿐만 아니라 모든 이터러블(iterable, 반복 가능한 객체)에 구조 분해 할당을 적용할 수 있다.
let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

// 할당 연산자 좌측에는 `할당할 수 있는(assignables)`것이라면 어떤 것이든 올 수 있으며,
// 아래와 같이 객체 프라퍼티도 가능하다.
let user = {};
[user.name, user.surname] = "Bora Lee".split(' ');

alert(user.name); // Bora

쉼표를 사용하여 요소 무시하기

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

두 번째 요소는 생략되었지만, 세 번째 요소는 title이라는 변수에 할당된 것을 확인할 수 있습니다. 할당할 변수가 없기 때문에 네 번째 요소 역시 생략되었습니다.

...로 나머지 요소 가져오기

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius
alert(name2); // Caesar

// `rest`는 배열
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 이어지는 나머지 값들은 한데 모아서 저장하고 싶을 때가 있습니다. 이럴 대는 점 세 개 ...를 붙인 매개변수 하나를 추가하면 '나머지(rest)' 요소를 가져올 수 있다.
rest는 나머지 배열 요소들이 저장된 새로운 배열이 됩니다. rest 대신에 다른 이름을 사용해도 되는데, 변수 앞의 점 세 개(...)와 변수가 가장 마지막에 위치해야 한다는 점은 지켜주어야 한다.