변수의 타입 (Variable types)

앞서 primitive type에 대해 공부했는데, 여기서는 다른 하나의 타입인 object type에 포스팅하려고 한다.

primitive type은 변수 하나당 하나의 값만 가질 수 있다.
따라서 그룹으로 묶어서 출력할 수 없기 때문에 매우 비효율적이고 번거로운 작업을 해야하는데, 이를 개선하고자 object type을 사용한다.

const name = 'elena';
const age = '4';

print(name, age);
function print(name,age) {
	console.log(name); // 'elena'
    	console.log(age); //4
 }

객체 타입(Object type)

single item을 묶어서 하나의 box로 다룰 수 있게 해주는 타입.
object는 아래와 같이 key와 value로 구성할 수 있다.

object = {key : value};

function print(person) {
	console.log(person.name); // 'elena'
	console.log(person.age); // 4
 }

const elena = {name: 'elena', age: 4 };
print(elena);

위 예시는 총 두개의 key와 value를 가지고 있다.
이렇게 여러개의 data를 묶어서 저장할 수 있는 object type을 이용하게되면 간편하게 data를 관리할 수 있다.

Object를 생성하는 방법

const obj1 = {}; // object literal 문법
const obj2 = new Object(); // object contructor 문법

자바스크립트는 동적 타이핑 언어이므로 기존에 object를 만들어놨더라도, 뒤늦게 새로운 property를 추가할 수 있음.

fucntion print(person) {
	console.log(person.name); // 'elena'
    	console.log(person.age); // 4
 }

const elena = {name: 'elena', age: 4 };
print(elena);

elena.hasJob = true;
console.log(elena.hasJob); // true

delete elena.hasJob;
console.log(elena.hasJob); // undefined

이렇게 되면 elena object는 { hasJob : true }라는 새로운 property와 value를 가지게 됨. 또한 delete를 이용하여 이미 생성한 property 삭제도 가능함.

Object data에 접근하는 방법

console.log(elena.name); // elena
console.log(elena['name']); // elena

위에서 확인했던 것처럼 object.property로 접근하여 value를 출력하는 방법과 함께 object['property']의 형태로 접근할 수도 있다.
이때 property는 string의 형태로서 ''를 꼭 붙여주어야 한다.

elena['hasJob'] = true;
console.log(elena.hasJob); // true

property를 새로이 추가할 때도 위 방법이 사용 가능하다.

Property value shorthand

const person1 = {name : 'bob', age: 2};
const person2 = {name : 'jane', age: 4};
const person3 = {name : 'laura', age: 7};

이렇게 유사한 형태의 object를 계속해서 만들어야할 때 반복적으로 작성하지 않고 function 기능을 이용하여 아래와 같이 쉽게 property를 추가할 수 있다.

function makePerson(name,age) {
	return {
    	    name : name,
    	    age : age,
          };
}

여기서 key와 value의 이름이 동일한 경우 property value shorthand를 이용하여 하나의 name으로 축약이 가능하다.

function makePerson(name,age) {
	return {
            name,
            age,
         };
}

const person4 = makePerson('Stella', 31)
console.log(person4); // {name: 'Stella', age: 31}

이렇게 object를 일일이 만들게되면 동일한 key와 value를 반복해서 작성해야하는 문제가 있음.

추후 class 문법(생성자 함수)에 대해서도 포스팅할 예정이지만, 이전에 class 문법이 없을 경우 위와 같은 형식으로 object를 생성하였음.

In operator (property의 존재여부 체크)

in이라는 keyword를 이용하여 object내에 해당하는 key가 있는지의 여부를 아래와 같이 확인할 수 있음. (key in object형식)

console.log('name' in elena) // true
console.log('age' in elena)  // true

Object cloning

const user = {name:'elena', age: 4};
const user2 = user;

하나의 새로운 변수에 user라는 object를 담게 되면 어떻게 될까?

기존에 생성된 user 변수는 메모리를 가리키는데, 그 메모리에는 reference가 들어있다. 이 reference는 실제로 name은 elena이고 age는 4라는 object를 가리키고있다.

user2의 변수는 user가 할당되었으므로 user안의 reference의 값이 user2에도 동일하게 할당된다는 의미이다.

const user = {name:'elena', age: 4};
const user2 = user;

user2.name = 'paulina';
console.log(user); // {name: paulina, age: 4}

따라서 위와 같이 만약 user2의 name을 elena가 아닌 paulina로 바꾸게될 경우 기존 user 변수의 name 또한 paulina로 변경되는 것을 볼 수 있다.

위와 같은 방식 말고, 실제로 object를 cloning(복제)할 수 있는 방법은 아래와 같다.

Object.assign(dest, [obj1, obj2, obj3...])

const user3 = {};
Object.assign(user4, user);
console.log(user3); // {name:'elena', age: 4};

새로 복사하고자 하는 object를 만들고 Object.assign을 이용하여
첫번째 인자에는 새로 복사할 object, 두번째 인자로는 기존 object를 넣는다.

또는 아래와 같이 작성해도 좋다.

const user3 = Object.assign({}, user);
console.log(user3); // {name:'elena', age: 4};

또 다른 예로 하나의 object에 여러개의 object를 복제할 수도 있다

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

console.log(mixed.color); // 'red'
console.log(mixed.size); // 'big'

여기서 mixed의 color가 red로 된것은
뒤에 나온 key일수록 앞에 동일한 key가 있었다면 뒤의 값이 계속 덮어씌워지므로 yellow가 아닌 red가 출력된 것이다.

참고자료

드림코딩엘리 오브젝트란?