모던 자바스크립트 Deep Dive : 11장 원시값과 객체의 비교

EdLee·2022년 10월 29일

javascript

목록 보기
1/37

11장 원시값과 객체의 비교

1. 원시 값


1.1 원시 값이란?

  • 원시 타입의 값
  • 숫자, 문자열, boolean, null, undefined, 심벌 타입의 값을 의미

1.2 특성

  • 불변성을 가진다
  • 메모리에 한 번 할당된 원시 값은 변경할 수 없다.
  • 따라서 변수에 할당된 원시값을 수정하는 동작은, 사실 다른 메모리에 할당된 새로운 원시값을 바라보도록 주소를 옮기는 동작

그래..다 좋은데 그러면 문자열은?🙄

1.3 문자열과 불변성

  • 자바스크립트는 문자열 타입을 원시 타입으로 제공
  • C처럼 char 배열로 고생할 필요 없다
  • 문자열은 유사 배열 객체

1.3.1 문자열의 수정

  • 문자열도 불변성을 가진다
  • 기본적으로 수정할 수 없고, 항상 새로운 문자열을 다른 메모리에 할당함으로써 수정하는 것처럼 연출한다
    var str = 'Hello';
    str = str.replace('H', 'y'); // replace의 return을 변수에 할당해줘야만 한다
    console.log(str); // yello
    str[0] = 'K'; // 인덱스로 접근해 수정 시도
    console.log(str[0]); // y... 안된다 

1.3.2 유사배열 객체

  • 문자열은 배열처럼 인덱스로 각 문자에 접근할 수 있다

  • 여러가지 속성이나 함수 등을 이미 갖고 있다

    var str = 'string';
    
    console.log(str.length); // 6
    console.log(str.toUpperCase()); // STRING
    console.log(str); // string, str은 불변이며, toUpperCase 결과가 원본에 반영되지는 않는다

1.4 값에 의한 전달

  • 원시 값을 할당 받은 변수는 값 전달만 가능하다

  • A변수에 B변수를 할당하면, 각 변수는 별개의 메모리를 바라본다

    var score = 80;
    var copy = score; // copy에는 주소 할당? 값 할당?
    
    console.log(score); // 80
    console.log(copy); // 80, 복사는 됐다
    
    score = 100;
    
    console.log(score); // 100
    console.log(copy); // 80, score와 copy는 별개의 메모리를 사용하고 있다

2. 객체


2.1 변경 가능한 값 & 참조에 의한 전달

  • 객체는 변경가능한 값(mutable)이다
  • 객체A 변수를 객체B 변수에 할당하면, 참조 값이 복사되어 전달된다.
var score = {
 teamA: '99',
 teamB: '100'
};

var copy = score;
console.log(score);
console.log(copy); // copy와 score는 같은 객체를 바라본다

score.teamB = 200;
console.log(score); // 200
console.log(copy); // 200

2.1.1 원리

  • person 변수와 copy 변수는 다른 메모리에 할당되어 있으나, 메모리에 있는 값은 서로 같은 참조 값를 바라본다

js에서는 참조에 의한 전달은 없지만, 원시 값과 객체의 동작을 설명하기 위해 편의상 구분한다
변수에 할당된 값을 복사하면 항상 새로운 메모리에 할당되며, 그 값이 원시 값인지 참조 값인지의 차이만 있다

2.2 일치 비교 연산자

var teamA = {
  score: 99
};
var teamB = {
  score: '99'
};

console.log("(1)", teamA == teamB); // false
console.log("(2)", teamA === teamB); // false
console.log("(3)", teamA.score == teamB.score); // true.. 엥..99와 '99'가 같다고???
console.log("(4)", teamA.score === teamB.score); // false
  • "==" 일치 비교 연산자는 자동으로 타입 변환 후 비교한다
  • "===" 일치 비교 연산자는 타입 변환을 하지 않고 엄격하게 비교한다

0개의 댓글