[JavaScript] 파괴적 방법의 비파괴적 쓰기

파괴적인 방법이 뭐가 안 좋아요?

파괴적인 방법을 사용하면 코드를 읽는 사람에게 혼란을 줄 수 있다.
파괴적인 방법을 사용한 예

const numbers = [1, 2, 3, 4, 5];

// とても長い処理
numbers.push(6); <- 読み飛ばされてしまう可能性が高い
// とても長い処理

console.log(numbers); <- 読み手は[1, 2, 3, 4, 5]を期待している
// 実際は[1, 2, 3, 4, 5, 6]; 

비파괴적 방법의 예

const numbers = [1, 2, 3, 4, 5];

// とても長い処理
const newNumbers = numbers.concat(6);
// とても長い処理

console.log(numbers); // [1, 2, 3, 4, 5] 読み手の期待通りのまま
console.log(newNumbers); // [1, 2, 3, 4, 5, 6]

결론

스프레드시트 문법으로 오케이!
다음은 구체적인 작법과 기타 작법을 총결하였다.

push()

Array.prototype.push()
push () 방법은 그룹의 끝에 원소를 하나 이상 추가할 수 있습니다.새 그룹의 원소 수를 반환값으로 되돌려줍니다.

부수다

const numbers = [1, 2, 3, 4, 5];
numbers.push(6);
console.log(numbers); // [1, 2, 3, 4, 5, 6]

파괴하지 않다

// スプレッド構文
const numbers = [1, 2, 3, 4, 5];
const newNumbers = [...numbers, 6];
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(newNumbers); // [1, 2, 3, 4, 5, 6]

// concat()
const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.concat(6);
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(newNumbers); // [1, 2, 3, 4, 5, 6]

unshift()

Array.prototype.unshift()
unshift () 방법은 그룹의 시작에 하나 이상의 요소를 추가하고 새 그룹의 길이를 되돌려줍니다.

부수다

const numbers = [1, 2, 3, 4, 5];
numbers.unshift(0);
console.log(numbers); // [0, 1, 2, 3, 4, 5]

파괴하지 않다

// スプレッド構文
const numbers = [1, 2, 3, 4, 5];
const newNumbers = [0, ...numbers];
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(newNumbers); // [0, 1, 2, 3, 4, 5]

// concat()
const numbers = [1, 2, 3, 4, 5];
const newNumbers = [0].concat(numbers);
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(newNumbers); // [0, 1, 2, 3, 4, 5]

pop()

Array.prototype.pop()
pop () 방법은 수조에서 마지막 요소를 삭제하고 그 요소를 되돌려줍니다.이 방법은 수조의 길이를 바꾼다.

부수다

const numbers = [1, 2, 3, 4, 5];
numbers.pop();
console.log(numbers); // [1, 2, 3, 4]

파괴하지 않다

// スプレッド構文
const numbers = [1, 2, 3, 4, 5];
const newNumbers = [...numbers];
newNumbers.pop()
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(newNumbers); // [1, 2, 3, 4]

// slice()
const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.slice(0, 4);
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(newNumbers); // [1, 2, 3, 4]

shift()

Array.prototype.shift()
shift () 방법은 수조에서 첫 번째 요소를 삭제하고 원소를 되돌려줍니다.이 방법은 배열의 길이를 바꾼다.

부수다

const numbers = [1, 2, 3, 4, 5];
numbers.shift();
console.log(numbers); // [2, 3, 4, 5]

파괴하지 않다

// スプレッド構文
const numbers = [1, 2, 3, 4, 5];
const newNumbers = [...numbers];
newNumbers.shift();
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(newNumbers); // [2, 3, 4, 5]

// slice()
const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.slice(1, 5);
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(newNumbers); // [2, 3, 4, 5]

sort()

Array.prototype.sort()
sort () 방법은 in place로 그룹 요소를 정렬합니다.기본 정렬 순서는 요소를 문자열로 변환한 후 UTF-16 코드 단위의 값과 비교하는 오름차순입니다.

부수다

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

파괴하지 않다

// スプレッド構文
const numbers = [5, 1, 4, 2, 3];
newNumbers = [...numbers].sort()
console.log(numbers); // [5, 1, 4, 2, 3]
console.log(newNumbers); // [1, 2, 3, 4, 5]

reverse()

Array.prototype.reverse()
reverse () 방법은 그룹 요소를 In-place 알고리즘으로 반전시킵니다.첫 번째 요소는 마지막 요소이고 마지막 요소는 첫 번째 요소입니다.

부수다

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

파괴하지 않다

// スプレッド構文
const numbers = [1, 2, 3, 4, 5];
newNumbers = [...numbers].reverse()
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(newNumbers); // [5, 4, 3, 2, 1]

fill()

Array.prototype.fill()
fill () 방법은 시작 인덱스 (기본값은 0) 에서 끝 인덱스 (기본값은array.length) 까지 모든 요소를 정적 값으로 수정한 그룹을 되돌려줍니다.

부수다

const numbers = [1, 2, 3, 4, 5];
numbers.fill(7);
console.log(numbers); // [7, 7, 7, 7, 7]

파괴하지 않다

// スプレッド構文
const numbers = [1, 2, 3, 4, 5];
newNumbers = [...numbers].fill(7)
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(newNumbers); // [7, 7, 7, 7, 7]

copyWithin()

Array.prototype.copyWithin()
copyWithin() 메서드는 크기를 변경하지 않고 배열의 일부를 같은 배열의 다른 위치로 복사합니다.

부수다

const numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(2, 3, 5);
console.log(numbers); // [ 1, 2, 4, 5, 5 ]

파괴하지 않다

// スプレッド構文
const numbers = [1, 2, 3, 4, 5];
newNumbers = [...numbers].copyWithin(2, 3, 5);
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(newNumbers); // [ 1, 2, 4, 5, 5 ]

참고 자료

https://developer.mozilla.org/ja/