Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

개발의변화

11장 원시 값과 객체의비교 본문

카테고리 없음

11장 원시 값과 객체의비교

refindmySapporo 2023. 11. 17. 19:11
반응형

객체는 변경 가능한 값!

객체를 변수에 할당하면 변수에는 참조 값이 저장된다.

값에 의한 전달: 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달

참조에 의한 전달: 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달

11.1 원시 값

원시값이 변경 불가능 한 것은 변수가 아니라 값에 대한 진술이다.

값을 할당하면 새로운 메모리 주소에 재할당하고 계속해서 메모리 공간의 주소가 변경되어지는 것을 불변성이라고 한다.

재할당 이외에 원시 값인 변수 값을 변경할 수 있는 방법은 없다.

11.1,2 문자열과 불변성

  • 유사 배열 객체: 배열처럼 인덱스로 프로퍼티 값에 접근 할 수 있고 length 프로퍼티를 갖는 객체를 말한다. 문자열은 마치 배열처럼 인덱스를 통해 각 문자에 접근 가능, lenght 프로퍼티를 갖기 때문에 유사 배열 객체로 순회할 수 있다.
var str = 'string';

// 문자열은 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다.
console.log(str[0]); // s

// 원시 값인 문자열이 객체처럼 동작한다.
console.log(str.length); // 6
console.log(str.toUpperCase()); // STRING

11.1.3 값에 의한 전달

var score = 80;

// copy 변수에는 score 변수의 값 80이 복사되어 할당된다.
var copy = score;

console.log(score, copy);    // 80  80
console.log(score === copy); // true

// score 변수와 copy 변수의 값은 다른 메모리 공간에 저장된 별개의 값이다.
// 따라서 score 변수의 값을 변경해도 copy 변수의 값에는 어떠한 영향도 주지 않는다.
score = 100;

console.log(score, copy);    // 100  80
console.log(score === copy); // false

엄격하게 표현하면 변수에는 값이 전달되는 것이 아니라 메모리 주소가 전달된다.

11.2 객체

객체는 프로퍼티의 개수가 정해져 있지 않으며 동적으로 추가 삭제가 가능하다.

자바스크립트 객체의 관리방식

자바스크립트 객체는 프로퍼티 키를 인덱스로 사용하는 해시테이블이라고 할 수 있다. 다른 객체지향 프로그래밍 언어와 달리 클래스 없이 객체 생성할 수 있고 객체가 생성한 이후에도 프로퍼티와 메서드를 추가할 수 있다.

얕은 복사: 한 단계까지 복사

깊은 복사: 객체에 중첩되어 있는 객체까지도 모두 복사

const o = { x: { y: 1 } };

// 얕은 복사
const c1 = { ...o }; // 35장 "스프레드 문법" 참고
console.log(c1 === o); // false
console.log(c1.x === o.x); // true

// lodash의 cloneDeep을 사용한 깊은 복사
// "npm install lodash"로 lodash를 설치한 후, Node.js 환경에서 실행
const _ = require('lodash');
// 깊은 복사
const c2 = _.cloneDeep(o);
console.log(c2 === o); // false
console.log(c2.x === o.x); // false
const v = 1;

// "깊은 복사"라고 부르기도 한다.
const c1 = v;
console.log(c1 === v); // true

const o = { x: 1 };

// "얕은 복사"라고 부르기도 한다.
const c2 = o;
console.log(c2 === o); // true
var person = {
  name: 'Lee'
};

// 참조값을 복사(얕은 복사). copy와 person은 동일한 참조값을 갖는다.
var copy = person;

// copy와 person은 동일한 객체를 참조한다.
console.log(copy === person); // true

// copy를 통해 객체를 변경한다.
copy.name = 'Kim';

// person을 통해 객체를 변경한다.
person.address = 'Seoul';

// copy와 person은 동일한 객체를 가리킨다.
// 따라서 어느 한쪽에서 객체를 변경하면 서로 영향을 주고 받는다.
console.log(person); // {name: "Kim", address: "Seoul"}
console.log(copy);   // {name: "Kim", address: "Seoul"}
var person1 = {
  name: 'Lee'
};

var person2 = {
  name: 'Lee'
};

console.log(person1 === person2); // ①
console.log(person1.name === person2.name); // ②
반응형