티스토리 뷰

Javascript

Javascript - Object

김소비요정 2021. 9. 2. 23:04

object

  • Javascript 에서 하나의 데이터 타입
  • {key: value} 의 집합

1. object 생성

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

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

const amy = {name: 'amy', age: 30};
print(amy);

// with Javascript magic (dynamically typed language)
// can add properties later
amy.hasJob = false;
console.log(amy.hasJob);

delete amy.hasJob;
console.log(amy.hasJob); // log : undefined

2. Computed properties

  • 정확하게 어떤 키가 필요한지 모를 때, 즉 runtime 에서 key가 결정될 때 computed properties 사용
function printValue(obj, key) {
    console.log(obj.key); // log : undefined
    console.log(obj[key]);
}
printValue(amy, 'name');

3. Constructor function

const person1 =  {name: 'name1', age: 2};
const person2 =  {name: 'name2', age: 2};
const person3 =  {name: 'name3', age: 2};
const person4 = new Person('name4', 3);

// Constructor function
function Person(name, age){
    // this = {};
    this.name = name;
    this.age = age;
    // return this;
}

4. in operator : object 안에 해당 key 포함 여부

console.log('name' in person4);
console.log('age' in person4);
console.log('job' in person4);

5. for..in vs for..of

// for (key in obj)
for (key in person4) {
    console.log(`key : ${key}, value : ${person4[key]}`);
}

// for (value of literable)
const arr = [1, 2, 3, 4];
for (value of arr) {
    console.log(value);
}

6. Cloning

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

// old way
const user2 = {};
for (key in user) {
    user2[key] = user[key];
}
console.log(user2);

const user3 = Object.assign({}, user);
console.log(user3);

// another example
const fruits1 = {color: 'red'};
const fruits2 = {color: 'green', size: 'big'};
const mixedFruits = Object.assign({}, fruits1, fruits2);
console.log(mixedFruits.color);
console.log(mixedFruits.size);

'Javascript' 카테고리의 다른 글

javascript - JSON  (0) 2021.09.03
Javascript - 배열  (0) 2021.09.03
Javascript - Class, Object  (0) 2021.09.02
Javascript- 함수 선언 vs 함수 표현식  (0) 2021.09.02
Javascript - Callback function, First-Class function  (0) 2021.09.01