TIL 데이터 타입

function have(pet) {
  pet.cat = true;
  console.log('고양이를 키웁니다.');
}

function checkPetInfo(pet, age) {
  console.log(`나이 = 여자: {${pet.age}}`);

  if (!pet.cat) {
    console.log('고양이를 키우지 않습니다.');
    return;
  }

  pet.age += age;
  console.log(`나이 = 여자: {${pet.age}}`);
}

const pet = { cat: false, age: 0 };
have(pet);
checkPetInfo(pet, 3);

라는 코드를 보다가 이해가 안되는 부분이 생겼다.

  if (!pet.cat) {
    console.log('고양이를 키우지 않습니다.');
    return;
  }

위의 코드가 왜 실행이 안되는지 이해가 안됐다.

배웠던 기억으로는 함수 내부에서 변경된 내용은 함수 내부에서만 적용이 된다고 알고 있었는데, pet.cat의 값이 true라면 함수 외부에도 변경된 내용이 적용이 됐다는 말이기 때문이다.

have(cat)에서 변경된 값이 pet.cat에 적용이 되는 이유는 뭘까?

답은 데이터 타입 때문이다.

JavaScript에서 함수 내부에서 변경된 내용이 외부에 영향을 미치는지 여부는 데이터 타입에 따라 다르다.

데이터 타입에는 두 종류가 있는데 하나는 원시 타입, 다른 하나는 참조 타입이다.

원시 타입은 숫자(Number), 문자열(String), 불리언(Boolean), null, undefined, 심볼(Symbol) 등이 있다. 이들 값은 값 자체가 복사되어 전달되므로, 함수 내부에서 변경하더라도 원래의 값에는 영향을 미치지 않는다.

function change(num) {
  num = 10;
}

let num = 5;
change(num);
console.log(num); 
// 출력: 5

참조 타입은 객체(Object), 배열(Array), 함수(Function) 등이 있다. 이들은 참조(메모리 주소)가 전달되므로, 함수 내부에서 객체의 속성을 변경하면 원래 객체에도 그 변화가 반영된다.

function change(obj) {
  obj.prop = true;
}

let obj = { prop: false };
change(obj);
console.log(obj); 
// 출력: { prop: true }

따라서 위 예시에서 change 함수 내부에서 obj.prop 값을 변경하면, 이것이 외부의 obj 객체에도 반영된다.

그래서 cat:false의 값이 변경 될 수 있었던 것이다.

원시 타입과 참조 타입 사이에 중요한 차이인 '값으로 전달'되느냐 '참조로 전달'되느냐의 개념이 부족해서 생긴 이슈였다.