JavaScript(JS) - 객체(Object)

조성주·2023년 2월 24일

JavaScript

목록 보기

6/21

✅ 객체

객체(Object)는 다수의 원시 자료형을 포함하거나 개체(entity)를 표현할 수 있는 자료형이다.
키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.
객체는 new Object() 혹은 중괄호 {}를 통해 생성한다.
object의 개체는 key:value 형태로 표현하며, 접근은 object.key 또는 object[key]로 접근할 수 있다.
객체는 value로 접근하지 못하고 무조건 key로만 접근이 가능하다.

실제로 객체는 변수에 객체의 key와 value가 저장되어 있는게 아니라 key와 value가 저장되있는 메모리 주소를 가지고 있다. 그래서 객체를 부르면 그 메모리 주소에서 key와 value를 꺼내와서 사용을 한다.

정리하자면, 변수 내에 메모리가 저장되어있고 reference하여 데이터 접근을 한다.

1. 객체 생성

let obj_1 = {
	name : "seongju",
    age :  100
}

// 생성자(new)로 Object 만들기
let obj_2 = new Object()

2. 객체 접근

객체는 key값으로 접근을 할 수 있다.

let obj_1 = {
	name : "seongju",
    age :  100
}

console.log(obj_1.name) 또는 console.log(obj_1[name])

또한, 객체는 객체 전체의 key와 value를 각각 배열로 꺼내올 수 있다.

Object.keys(obj_1) // 객체의 전체 key를 배열로 뽑아오기
Object.values(obj_1) // 객체의 전체 value를 배열로 뽑아오기


실제 출력 값
["name", "age"]
["seongju", 100]

3. 객체 크기

배열이나 문자열 같은 경우에는 length로 길이를 구할 수 있는데 객체는 불가능하다.
따라서, 객체의 크기는 다른 접근 방법으로 구할 수 있다. 아래 내용에서 확인해보자.

1) 객체는 객체 전체 key와 value를 배열로 뽑아올 수 있는데 이렇게 배열로 뽑아와서 크기를 구할 수 있다.

Object.keys(obj_1).length 

또는

Object.values(obj_1).length

2) for .. in문으로 length 구하기

let length = 0;

for(let key in obj_1){
	length++;
}

console.log(length)

4. 객체 반복문

배열이나 문자열 같은 경우에는 index로 접근이 가능하여 for문으로 변수선언하여 변수를 증가시키면서 배열 요소를 가지고 올 수 있지만 객체는 key로 접근이 가능하기 때문에 단순 for문을 사용할 수 없다.
따라서, for .. in 문으로 key값을 꺼내와 객체에 접근한다.

for(let key in obj_1){
	console.log(obj[key]);
}

5. 객체 복사

아마, 이 키워드가 객체의 핵심이지 않을까 싶다. 문자열이나 배열을 새로운 변수에 담으면 복사가 된다.
이렇게 복사한 문자열이나 배열에 값을 바꾸면 원본에서는 값 변화가 일어나지 않는다.

const str = "test String"
const arr = ["test", "String"]

const str_2 = str
const arr_2 = arr

str_2 = "test String test String"
arr_2 = ["test"]

console.log(str) // output : "test String"
console.log(str_2) // output : "test String"

console.log(arr) // output : ["test", "String"]
console.log(arr_2) // output : ["test"]

이렇게 똑같이 객체도 복사를 하고 복사한 객체에서 값을 변경하면 원본에 대한 변화가 일어나지 않을 줄 알았지만 실제로 코드를 작성해보면 절대 그렇지 않다.

const obj = {
  name: "seongju",
  age: 27,
  gender: "man",
};

let copyObj = obj;

copyObj.phone = "iphone";

console.log(obj);
console.log(copyObj);

위에 결과 이미지를 보면 원본에도 변화가 일어난 것을 확인할 수 있다. 왜 그러는지 이유를 알아보자.

❓ 객체 복사 문제점 ❓

위에 객체 정의 내용에서 봤듯이 객체는 변수에 값들이 저장되어 있는게 아니라 메모리 주소가 저장되어있고 객체를 호출하면 메모리 주소에서 key와 value를 가져온다.

따라서, 객체를 복사를 하면 객체의 key와 value가 아닌 메모리 주소를 복사한다. 메모리 주소를 복사한 것이기 때문에 복사를 해도 원본과 같은 메모리 주소를 바라보고 있기 때문에 원본에도 변화가 일어난다.
다른말로 참조가 끊어지지 않기 때문에 변화가 일어난다.

이런 객체 복사를 얕은 복사(shallow copy)라고 한다.

원본에 영향을 미치지 않으면 새로운 메모리 주소를 가지게 하는 복사를 깊은 복사(deep copy)라고 한다.

깊은 복사를 하는 법은 아래와 같다.

// 원본 객체
const obj = {
  name: "seongju",
  age: 27,
  gender: "man",
};

// 복사할 객체
let copyObj = {};

for (let key in obj) {
  copyObj[key] = obj[key];
}

copyObj.copy = "copy";

console.log(obj);
console.log(copyObj);