Object

Object : 객체

  • one of the JavaScript's data types : 자바스크립트의 데이터 타입 중의 하나

  • a collection of related data and/or functionality : 데이터와 함수와 연관된 집합

  • Nearly all objects in JavaScript are instances of Object : 자바스크립트에서 거의 모든 객체는 객체의 인스턴스

  • object = { key : value } : 오브젝트는 key(변수)와 value의(값) 집합체

1. 리터럴 객체와 프로퍼티 : Literals and properties

/*const name = 'ellie';
const age = 4;
print(name, age);
function print(name, age) {
  console.log(name);
  console.log(age);
}
const ellie = { name: 'ellie', age: 4 }; 오브젝트로 관리*/

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

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

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

// with JavaScript magic (dynamically typed language)
// can add properties later
ellie.hasJob = true;
console.log(ellie.hasJob);

// can delete properties later
delete ellie.hasJob;
console.log(ellie.hasJob);

2. 계산된 프로퍼티 : Computed properties

// key should be always string
console.log(kelly.name);    // 코딩할 때
console.log(kelly["name"]); // 정확하게 어떤 키가 필요한지 모를 때
kelly["hasJob"] = true;
console.log(kelly.hasJob);

function printValue(obj, key) {
  console.log(obj[key]);
}
printValue(kelly, "name");
printValue(kelly, "age");

3. Property value shorthand : key와 value의 값이 같을 때 생략 가능한 기능

const person1 = { name: "bob", age: 2 };
const person2 = { name: "steve", age: 3 };
const person3 = { name: "dave", age: 4 };
const person4 = new Person ("ellie", 26);
console.log(person4);

4. 생성자 함수 : Constructor Function

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

5. In 연산자 : In operator

property existence check (key in obj) : 해당하는 object 안에 key가 있는지 없는지 확인하는 것

console.log('name' in ellie);
console.log('age' in ellie);
console.log('random' in ellie);
console.log(ellie.random);

6. for..in vs for..of

// for (key in obj)
console.clear();
for (key in ellie) {
    console.log(key);
} // name, age, hasJob

// for (value of iterable) - 순차적
const array = [1, 2, 4, 5];
for(value of array){
    console.log(value);
} // 1 , 2 , 4 , 5

7. Fun cloning

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

// old way - 수동적
const user3 = {};
for (key in user){
    user3[key] = user[key];
}
console.clear();
console.log(user3); // {name: 'coder', age: 20}

// Object.assign() - ctrl키 누르고 정의된 것 확인하기(어떤값이 리턴됐는지 등)
// assign<T, U>(target: T, source: U): T & U;
const user4 = Object.assign({}, user);
console.log(user4); // {name: 'coder', age: 20}

//another example
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
PreviousClassNextArray

Last updated