Js 기초 7 - 레퍼런스와 불변성

자바스크립트에서 변수는 기본 타입과 참조 타입으로 나뉩니다

• 기본 타입
  • 숫자
  • 문자열
  • 불리언
• 참조 타입
  • 객체
  • 배열 
  • 함수

두 가지는 값을 저장하는 방식에 있어 차이를 가집니다

• 기본 타입
  • 값이 변수에 직접 저장된다
• 참조 타입
  • 값은 다른 곳에 저장
  • 대신 저장된 곳을 가리키는 레퍼런스(참조) 주소가 저장된다

이 차이는 변수를 활용함에 있어 의미를 가집니다

// 레퍼런스(참조) 변수
const arr = [120, 300, 500];
const arr2 = arr;

// 변경
arr2[0] = 10;

// arr2를 변경하면 arr에도 영향을 준다
console.log(arr); // [10,300,500]
console.log(arr2); // [10,300,500]

// 일반 값(숫자,문장,참거짓)
let a = 10;
let a2 = a;

// 변경
a = 30;

// a의 변경이 a2에 영향을 주지 않는다
console.log(a); // 30
console.log(a2); // 10

 

이때 변하지 않는 기본 타입의 변수가 '불변성을 가진다' 라고 합니다

 

반대로 참조 타입의 변수는 가변성을 가집니다

 

만약 참조타입에게 불변성을 부여하고 싶은 경우엔 여러가지 방법이 있습니다.

 

아래는 그 중 하나인 함수를 활용한 배열 복사입니다.

const arr = [10, 20, 30];

const arr2 = arr.map((el, index) => index == 1 ? 150 : el);

console.log(`원본 : ${arr}`); // "원본 : 10,20,30"
console.log(`복사 생성 후 수정된 버전 ${arr2}`); // "복사 생성 후 수정된 버전 10,150,30"

 

연산 후 그 값을 반환하는 함수를 활용할 경우 위와 같이 불변성을 유지할 수 있습니다.