본문 바로가기
카테고리 없음

자료형, 원시타입과 객체타입(객체 복사의 문제점)

by 지삶앎 2022. 8. 9.
반응형

자바스크립트, 자료형, 원시타입과 객체타입

자료형 종류

  • 목적에 따라 특별한 성질이나 정해진 범주를 갖고 있는 데이터 종류를 자료형이라 한다.
  • 자바스크립트는 6가지 원시 타입 자료형과 1가지 객체 타입 자료형으로 구성되어 있다.

 

원시타입(primitive type)

  • boolean : 논리적 값 (true, false)
    • 주로 조건문 등에서 동작 판단의 기준으로 사용
    • true, false 두 가지 값만 존재
  • null : 존재하지 않거나 유효하지 않은 주소 표시
    • typeof 시 object로 나옴. 하위 버전 호환성 때문. 
    • 값이 비어 있다는 의미로 표현
    • 존재하지 않는, 비어 있는, 알 수 없는 값을 나타나는데 사용
  • undefined : 선언 후 값을 할당하지 않은 변수
    • 값이 할당되어 있지 않은 상태를 나타날 때 사용되는 자료형
    • 변수 선언 후 초기화 하지 않는다면, undefined가 자동으로 할당
  • number : 정수, 실수 등의 숫자
    • 일반적인 숫자 외에 Infinity, -Infinity, NaN(Not a Number) 같은 특수 숫자 값이 포함된다.
  • string : 빈 문자열이나 글자들을 표현하는 문자열
  • symbol : 문자열과 함께 객체 propert로 사용, ES6에 추가됐음.

객체타입(object type)

  • object : 두 개 이상의 복잡한 개체 저장 가능
    • 다수의 원시 자료형을 포함하거나 복잡한 개체를 표현할 수 있는 자료형
    • 개체는 key:value 형태로 표현하며, 접근은 object.key 형태로 표현

 

자료형을 확인하기 위해서는 typeof 연산자를 사용하면 자료형을 반환받을 수 있다.

 

객체 복사의 문제점

object의 값을 복사할 때는 대상 전체가 아니라 object 내 주소 값만 복사되는 문제가 발생된다. 이를 해결하기 위해서 가리키는 대상 전체를 복사하는 방법으로 얕은 복사(Shallow copy), 깊은 복사(Deep copy)가 있다.

 

// 반복문 for문을 통한 객체 복사

let user = {
  name : "john",
  age : 23,
}

let admin = {};

for (let key in user) {
  admin[key] = user[key]
}

admin.name = "park"

console.log(admin.name) // "park"
console.log(user.name) // "john"
//Object.assign() 함수를 이용한 복사

let user = {
  name : "john",
  age : 23,
}

let admin_obj = Object.assign({}, user);
console.log(admin_obj) // { name: 'john', age: 23 }

admin_obj.name = "park"
user.age = 30;

console.log(admin_obj.name) // "park"
console.log(user.name) // "john"
console.log(admin_obj.age) // 23
console.log(user.age) // 30
//스프레드 연산자를 활용한 얕은 복사

let user = {
  name : "john",
  age : 23,
}

let admin_spread = {...user}

admin_spread.name = "park"
user.age = 30;

console.log(admin_spread.name) // "park"
console.log(user.name) // "john"
console.log(admin_spread.age) // 23
console.log(user.age) // 30

 

얕은 복사에는 문제점이 있는데 객체 내에 또 다른 객체가 있다면 그 객체는 복사되지 않는다는 것이다. 즉, depth가 1인 것만 복사가 된다는 것이다.

 

해결 방법은 JSON 객체를 이용한 깊은 복사로 stringfy로 객체를 문자열로 변환하여 원본 객체와의 참조를 끊기게 함으로써 전체를 복사하는 방법이다.

let user = {
	name : "john",
    age : 23,
    sizes : {
    	height : 180,
        weight : 72,
	}
};

let admin_json = JSON.parse(JSON.stringfy(user));

admin_json.sies.weght++
admin_json.sies.heigth--

console.log(admin_json.sies.weght); // 73
console.log(admin_json.sies.height); // 179
console.log(user.sies.weght); // 72
console.log(user.sies.height); // 180

 

학습 회고

얕은 복사와 깊은 복사에 대해 알고 있었지만 스프레드 연산자를 활용하는 얕은 복사만 알고 있었다. Object.assign과 for문으로도 얕은 복사를 구현할 수 있다는 걸 배웠다. 메모리에 대한 이해가 부족했었는데 계속 반복해서 들으니까 이제 눈에 보이지 않던 메모리가 조금씩 보이는 것 같다. 컴퓨터 사이언스도 조금씩 공부할 필요를 느낀다.

반응형

댓글