[JS] object

박영준·2020년 9월 21일

Javascript 기초

목록 보기

5/7

object

자바스크립트의 데이터 타입(자료형)중 하나이다.
자바스크립트에서의 거의 모든 object가 object의 instance이다.
object = { key: value }; key와 value를 합친걸 property 라고 한다.

1. literal and property

// primitive type
const name = 'yj';
const age = '4';
// name과 age를 출력하는 함수를 만든다면 name과 age를 각각 parameter로 전달해야한다.
print(name,age);
function print(name, age) {
  console.log(name);
  console.log(age);
}
// 이렇게 하면 인자가 많아질때, 추가해야 되는게 너무 많아지고 관리하기가 힘들다.

// 이것을 개선하고자 object를 사용한다.
// object
function print(person) {
  console.log(person.name);
  console.log(person.age);
}

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

const obj1 = {}; // 'object literal' syntax
const obj2 = new Object(); // 'object constructor' syntax //class이용

function print(person) {
  console.log(person.name);
  console.log(person.age);
}
const yj = { name: 'yj', age: 4 };
print(yj);

yj.hasjob = true;
console.log(yj.hasjob); // true
// 자바스크립트는 동적언어이기 때문에 뒤늦게 하나의 property를 추가할수 있다.

delete yj.hasjob;
console.log(yj.hasjob); // undefined
// 뒤늦게 삭제하는 것도 가능하다. 하지만 이렇게 사용하면 유지보수 하기 굉장히 힘들고 생각지도 못한 에러가 발생하기 때문에 가능하면 이것을 피해서 코딩하는게 좋다.

2. computed property

.value를 쓸때는 코딩하는 순간 value라는 값을 받아오고 싶을 때 사용한다.
computed key를 쓸때는 정확하게 어떤 key가 필요한지 모를때, 즉 runtime에서 결정될 때이다. 코딩할때는 .을 쓰는게 맞다.

console.log(yj.name); //object에 있는 데이터로 접근할땐 .을 이용해 접근
console.log(yj['name']); // 대괄호 ['']를 이용해서 string형태로 접근 가능
//key는 항상 문자열이어야한다.

실시간으로 원하는 키의 값을 받아오고 싶다면 computed property를 사용하면 된다.
동적으로 key에 관한 value를 받아야할때 유용하게 쓰일 수 있다.

3. Property value shorthand

const person1 = {name: 'bob', age: 2};
const person2 = {name: 'steve', age: 3};
const person3 = {name: 'dave', age: 4};
//const perosn4 = {name: 'yj', age: 27}; 
//이렇게 새로 똑같이 추가해도 되지만 간단하게 하는 방법이 있다.
const person4 = makeperson('yj', 27); 
function makePerson(name,age) { //class와 유사하다. template
  return {
	name: name, //key 와 value가 동일하다면 key를 생략할 수 있다. ex)name,
    age: age, 
  };
}

4. constructor function

const person1 = {name: 'bob', age: 2};
const person2 = {name: 'steve', age: 3};
const person3 = {name: 'dave', age: 4};
const person4 = new Person('yj, 27);

function Person // 다른 계산을 하지않고 순수하게 object를 생성하는 함수는 대문자로 시작
	this.name = name;
	this.age = age;
}

5. in operator

in operator는 해당하는 object안에 키가 있는지 없는지 확인하는 것.

const yj = { name: 'yj', age: 4 };
console.log('name' in yj); // true
console.log('age' in yj); // true
console.log('random' in yj); // false
console.log(yj.random); // undefined

6. for..in vs for..of

for..in

// for (key in object)
for (let propertyName in yj) { // 변수에 property name이 들어간다.
	console.log(key)
} //모든 property들을 받아와서 일을 처리하고 싶을때 for..in 을 쓰면 좋다.

for..of

// for (key of iteralbe(순차적인))
// for..of는 object에 쓰는것이 아니라 배열과 같은 배열 리스트, 순차적인 것들을 쓴다.
const array = [1, 2, 4, 5];
for(let i = 0; i < array.length; i++)
  console.log(array[i]); // 1,2,4,5
}

for(let value of array) { // 변수에 배열의 요소를 집어넣는다.
  console.log(value) // 1,2,4,5
}// 위와 같은 값이 나온다.

7. cloning

user -> ref1 -> name:'yj'
-> age: 20
user2 -> 위와 동일한 reference로 이동

const user = { name: 'yj', age: 20};
const user2 = user;

const user = { name: 'yj', age: 20};
const user2 = user;
user2.name = 'coder';
console.log(user); // { name: 'coder', age: 20}
//'yj'가 'coder'로 바뀌었다.

object를 복제하는 방법

for을 이용한 복제

//old way
const user = { name: 'yj', age: 20};
const user2 = user;
user2.name = 'coder';

const user3 = {};
for (key in user) {
  user3[key] = user[key];
}
console.log(user3) // { name: 'coder', age: 20}
//

Object.assign을 이용한 복제
반드시 대문자 O를 사용해야한다.!!

//Object.assign(dest, [obj1, obj2, obj3...])
const user = { name: 'yj', age: 20};
const user2 = user;
user2.name = 'coder';

const user3 = {};
Object.assign(user3, user);
//const user3 = object.assign({},user); 이렇게도 가능하다.
console.log(user3); // { name: 'coder', age: 20} 
//user가 user4로 복사됨

Object.assign 다른 예제

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