JS 근본 공부 - Object

1. 왜 object를 사용할까? 

- 개발자는 값을 저장하기 위해 변수를 생성한다. 변수 1개당 하나의 값(value)만 저장할 수 있다는 특성이 있다.

- 그러나 개발을 하다보면 여러 변수들을 매번 함께 사용하는 경우가 발생하며 해당 변수들을 묶음으로 관리하기가 쉽지 않다.

- 여러 변수들을 묶어서 효율적으로 관리하는 방법 중 하나가 바로 object이다. 아래 코드 예시를 살펴보자. 

 

const name = "Raphael";
const age = 20;

function print(name, age) {
 console.log(name);
 console.log(age);
}

print(name, age);

 

- 위의 함수에서 보이는 name과 age 라는 매개변수 이외에 address와 phoneNumber라는 변수가 추가된다고 생각해보자.

- 매개변수들이 각각 관리되기 때문에, 이들을 하나의 그룹으로 묶어서 logical하게 생각하는 것에는 불편함이 있다. 

- object로 바꾸면 어떻게 개선될까? 

 

function print(person) {
 console.log(person.name);
 console.log(person.age);
}

const raphael = {name:'Raphael', age:4};

print(raphael);

 

- 위의 코드와 같이, object(객체)로 여러 변수들을 묶어 그룹을 형성하게 되면 사용하기도, 관리하기도 매우 편해진다. 

 

 

 

2. object란 무엇인가?

- 'object는 key와 value 한 쌍으로 이루어진 자료구조' 라고 설명하면 굉장히 어려운 개념같다. 괴리감이 느껴진다.

- 쉽게 설명하자면, key는 변수명이고 value는 해당 변수에 할당된 값이다. 

- object는 콤마(,)로 구분하여 한 쌍의 key와 value를 여러개 저장할 수 있는데, 결국 여러개의 변수를 선언하고 하나의 묶음으로 또는 그룹으로 관리가 가능한 집합체라고 생각하면 이해하기가 쉽다.

 

 

 

3. object를 생성하는 방법

 - object를 선언 및 생성하는 방법은 2가지가 있다. 아래의 코드를 살펴보자 

// 1. object literal syntax: 중괄호를 이용하는 방식
const obj1 = {};

// 2. object constructor syntax: 생성자(new)와 class를 이용한 방식
const obj2 = new Object();

 

 

 

4. key를 이용한 value에 접근하는 방법

- 앞서 object는 여러개의 변수와 각 변수마다 할당된 값을 한 쌍으로 관리하는 집합체라고 설명했다. 

- 그렇다면 각각의 변수에 접근하여 해당 변수가 갖고있는 값을 가져오는 방법은 무엇일까?

- key(변수명)를 이용하여 value에 접근하는 방법은 2가지가 있다. 아래의 코드를 살펴보자.

const person = { name:'Raphael', age:20};

// 1. dot(점)을 이용한 방법 
console.log(person.name);

// 2. 대괄호를 이용한 접근방법(key를 string 형태로 입력)
console.log(person['age']);

 

- dot을 이용한 표현식은 코딩을 할 때 주로 사용하는 방식이다.

- 대괄호를 이용한 표현식은 함수를 작성할 때 어떤 key를 받아와서 사용할지 모르는 경우 사용하는 방식이다. 아래 코드를 보자.

 

function printValue(obj, key) {
 console.log(obj.key)
}

printValue(raphael, 'name');

- 위와 같은 함수의 경우, obj.key 부분은 obj라는 객체(object)에 존재하는 key라는 이름의 변수에 접근하라는 뜻이다.

- 다시 말해, raphael.key를 수행하라는 의미다.

- raphael이라는 object안에는 key라는 이름의 변수는 존재하지 않는다.

- 그러므로 위의 코드를 실행하면 undefined가 출력될 것이다. 

- 이처럼, 어떤 key가 매개변수로 들어와도 해당 key에 접근하고 싶을 때 대괄호를 이용한 표현식을 사용해야 한다. 

 

function printValue(obj, key) {
 console.log(obj[key])
}

printValue(raphael, 'name');

- 위의 코드의 경우, raphael['name']을 수행하여 name이라는 key를 이용한 접근이 가능하게 된다. 

- 이처럼, 괄호를 이용한 접근방법은 동적으로(dynamic) 프로그래밍을 할 때 자주 사용되는 표현식이다. 

 

 

 

5. object와 자주 사용되는 연산자

 

a. in 연산자(operator)

 

- 특정 key가 object안에 존재하는지 확인하는 연산자다. 아래 코드를 살펴보자.

const raphael = {name:"Raphael", age:20};

console.log('name' in raphael);
console.log('age' in raphael);

- 해당 key가 object안에 존재한다면 true를, 없다면 false를 반환한다. 

 

 

b. for ~ in

 

- 아래의 코드 예시를 통해 설명하겠습니다. 

for (let variable in raphael) { 
 console.log(key); // raphael 안에 있는 name과 age라는 key가 출력된다.
}

- raphael이라는 object안에 존재하는 모든 key가 variable이라는 변수안에 하나씩 순서대로 대입된다.

- 하나씩 대입될 때마다 for문 내부에 연산이 수행된다. 

- 위의 코드의 경우, 결과적으로 raphael 안에 있는 name과 age라는 key가 출력된다. 

 

 

c.  for ~ of

 

- 아래의 코드 예시를 통해 설명하겠습니다. 

const array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length; i++) {
 console.log(array[i]);
}

- 배열에 들어있는 모든 데이터를 출력하고 싶다면, 위의 코드처럼 for문을 작성하였다. 하지만, 매번 이런식의 코드를 작성하는 것은 굉장히 귀찮고 불편한 일이다. 그러므로 사용하는 것이 for ~ of이다. 

 

const array = [1, 2, 3, 4, 5];

for (value of array) {
 console.log(value);
}

- 위의 코드처럼 for ~ of를 사용하면 array에 들어있는 값들이 순서대로 하나씩 value에 대입된다. 

- 하나씩 대입될 때마다 for문 내부에 연산이 수행되어, array에 들어있는 모든 값들이 출력되게 되는 방식이다. 

 

 

 

6. object cloning

- 먼저 아래의 코드를 살펴보자.

const user1 = {name:'Raphael', age:20};
const user2 = user1;

- object는 메모리에 할당될 때 변수와 다르게 reference가 할당되어 해당 reference가 key와 value를 가리킨다. 

- 그렇다면 user2는 user1과 동일한 reference를 갖게 될까? 

- 그렇다. user1의 reference값을 그대로 복사하였기 때문에, user2도 user1과 동일한 reference값이 들어가게 된다.

 

user2.name = 'Peter';
console.log(user1.name);

 - 만약 user2에서 name의 값을 Peter로 바꾼다면, user1에게도 영향을 미칠까? 

- 그렇다. user1과 user2 모두 동일한 reference를 갖고 있기 때문이다. 

- 동일한 reference는 동일한 key와 value를 가리키기 때문에 user1과 user2는 같은 값을 공유하는 것이다. 

 

- 그렇다면 값을 공유하는 것이 아니라 다른 reference를 할당 받지만 key와 value를 그대로 복제해오는 방법은 무엇일까?

- 아래의 코드를 살펴보자. 

 

// 1. old way (이전에 사용하던 방법, 구식)

const user3 = {}; // 새로운 object를 생성한다.

for(let key in user) { // 복제할 object의 값을 for in을 이용하여 하나씩 받아온다.
 user3[key] = user[key];
}


// 2. object.assign(타겟, 복사할 대상): object 클래스에 존재하는 함수를 사용하는 방법 

const user4 = {};

Object.assign(user4, user); 

// 또는 const user4 = Object.assign({}, user); 한 줄로 구현할 수도 있다.

 

- 만약 여러개의 object를 assign하면 어떻게 될까? 아래의 코드를 보고 추측해보자. 

const fruit1 = {color:'red'};
const fruit2 = {color:'blue', size:'big'};
const mixed = Object.assign({}, fruit1, fruit2); 

console.log(mixed.color);
console.log(mixed.size);

- 위의 코드에서 마지막 2개의 출력문은 어떤것을 출력할까? 

- 정답은 blue와 big 이다. 

- 그 이유는, 동일한 key가 assign되면 나중에 들어온 key의 value가 덮어씌워지게 되기 때문이다. 

- 그러므로 처음에는 color라는 key에 'red'라는 값이 복제되지만 fruit2로 인해 color라는 key의 값이 'blue'로 덮어씌워지게 되는 것이다. 

 

 

- 만약 object에 대한 더 많은 정보를 알기 원한다면 아래의 링크를 참고하자. 

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

Object

 

 

 

[정보출처]

www.youtube.com/watch?v=1Lbr29tzAA8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=7