불변성이란 무엇입니까? – 자바스크립트

by

작업 링크: 자바스크립트 로또

온보딩 후 전체 과제에 대한 첫 번째 코드 검토를 받았습니다.

아래 코드를 불변으로 유지하는 것에 대해 긍정적인 피드백을 받았습니다.

const getSortedNumbers = (numbers, orderType = SORT_TYPE.INCREASING) => {
  const copiedNumbers = numbers.slice();

  if (orderType === SORT_TYPE.DECREASING) {
    const sortedNumbers = copiedNumbers.sort((a, b) => b - a);
    return sortedNumbers;
  }

  const sortedNumbers = copiedNumbers.sort((a, b) => a - b);
  return sortedNumbers;
};

불변성이란 무엇입니까?

Uteco의 요청에 따라 JavaScript Airbnb 코딩 규칙난 그냥 좋은 cc를 유지

불변성에 대해 자세히 알아보려면 변수에 값을 할당하는 것이 무엇을 의미하는지 이해해야 합니다.

변수에 값을 할당

변수에 값을 할당한다는 것은 변수가 값을 보유하고 있는 메모리 영역의 주소를 가리킨다는 것을 의미합니다.

const crew = 'woody';

위 문장이 실행되면 어떻게 될까요?

  • 'woody'값은 메모리에 생성됩니다.

  • crew라는 변수 'woody'메모리 주소를 가리키다(참조하다)

그림을 보면 이해하기 쉽습니다.

메모리 1행 2열도착하다 'woody'창출된 가치, crew라는 변수 1행 2열가리키는 메모리 주소

불변 유형

JavaScript에는 6가지 기본 유형이 있습니다.

일단 생성되면 메모리에서 변경할 수 없습니다.

특징이 있다

따라서 변수에 새 값을 할당하면 새로운 가치생성 및 재할당

  • 끈
    #
  • 숫자
    #
  • 부울 값
    #
  • 명확하지 않다
    #
  • 유효하지 않은
    #
  • 상징

예를 들어보자

let crew = 'woody';
crew = 'scent'

'woody'원시 유형에 해당하는 문자열입니다.

'woody'값을 포함하는 메모리의 주소를 가리킴 crew도착하다 'scent'재할당하다 'scent'새 값을 만든 후 이 주소를 가리킵니다.

let crew = 'woody';
let feCrew = crew;
crew = 'scent';

console.log(crew); // scent
console.log(feCrew); // woody
  • 'woody'메모리에 값, 변수 생성 crew해당 메모리 주소를 가리킴
  • feCrew예 crew가리키는 메모리의 주소를 가리킴
  • 'scent'메모리에 값, 변수 생성 crew해당 메모리 주소를 가리킴

변경 가능한 유형

자바스크립트에서는 위의 기본형(Immutable type)을 제외한 모든 값이 객체형이고, 변하기 쉬운예

즉, 메모리 영역 내에서 변경할 수 있습니다.

const crewCount = {
  fe: 50,
  be: 100,
  an: 25,
};

const crews = crewCount;

crewCount.fe = 48;

console.log(crews); // { fe: 48, be: 100, an: 25 }
console.log(crewCount === crews); // true
  • 메모리에 객체 생성 및 변수 생성 crewCount메모리 주소를 가리킴
  • 바꾸다 crews도착하다 crewCount가리키는 객체의 주소를 가리킴
  • crewCount물체를 가리켰다 fe의 가치 48로 변경

불변 유형과 달리 객체의 값을 변경해도 메모리 공간은 변경되지 않습니다.

fe 단지 재산의 가치를 재할당할 뿐, crewCount그리고 crews같은 메모리 주소를 가리킨다

불변성이 중요한 이유는 무엇입니까?

간단한 예를 들다

const getExtendedNumbers = (arr, number) => {
  arr.push(number);

  return arr;
}

const numbers = (1, 2, 3, 4);

console.log(getExtendedNumbers(numbers, 3)); // (1, 2, 3, 4, 3)
console.log(getExtendedNumbers(numbers, 6)); // (1, 2, 3, 4, 3, 6)
console.log(getExtendedNumbers(numbers, 9)); // (1, 2, 3, 4, 3, 6, 9)

~을 위한

  • (1, 2, 3, 4, 3)
  • (1, 2, 3, 4, 6)
  • (1, 2, 3, 4, 9)

내가 기대하는 값이지만 완전히 다른 결과를 얻습니다.

범위 arr가 가리키는 배열 number추가된 요소 numbers매개변수 포함 arr같은 메모리 주소를 가리키기 때문에

위에서 설명한 불변량을 관찰하지 않으면 작업할 데이터가 어디에서 어떻게 변경되었는지 알기 어려울 수 있습니다.

이로 인해 향후 다양한 버그가 발생하기 쉽고 유지보수에 지장을 주는 신뢰할 수 없는 코드가 될 가능성이 매우 높습니다.

대신 불변성을 유지하면서 데이터를 변경하면 예측 가능하고 신뢰할 수 있는 코드가 생성됩니다.

불변성을 어떻게 유지합니까?

에어비앤비 코딩 규칙 7.12 매개변수를 변경하지 마십시오. 내용을 보자

인수로 전달된 개체에 대한 작업을 수행하면 원래 호출자에게 원치 않는 변수 부작용이 발생할 수 있습니다.

위는 배열을 매개변수로 취하여 매개변수로 직접 사용합니다.

push언제와 같은 질문

얕은 복사 뒤쪽에 원시 타입또는 깊은 복사이것은 다음을 사용하여 해결할 수 있습니다.

프리클래스 때부터 자바스크립트 에어비앤비 코딩 가이드라인을 따라 달라는 부탁을 많이 받았는데, 제가 작성한 코드가 이렇게 당연한 이유가 있는지 몰랐습니다.

앞으로 어떻게 되느냐고 물으면 항상 “왜?”라고 묻는 습관을 들여야겠습니다.