드림코딩 엘리 JS 내용 정리(7) - Object

이종호·2021년 2월 18일
0

JavaScript

목록 보기
8/19
post-thumbnail

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 };
  1. JS의 데이터 타입중 하나
  2. key와 value로 이루어져 있다.

1. Literals and properties

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

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

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

ellie.hasJob = true;  
console.log(ellie.hasJob);

delete ellie.hasJob
console.log(ellie.hasJob); 
  1. {}를 사용한 literal 문법
  2. new Class를 사용한 object constructor문법
  3. ellie.hasJob = true;
    JS는 동적 타입 언어이기 떄문에 언제든지 맘대로 속성을 추가할 수 있다.
  4. delete ellie.hasJob
    속성을 지우는것 또한 가능.

2. Computed properties 계산된 property

console.log(ellie.name); // 우리가 coding할 떄 어떤 키가 필요한지 알고 있을 때
console.log(ellie['name']); // 정확하게 어떤 key가 필요한지 모를 때 사용 runtime에서 사용할 경우
ellie['hasJob'] = true;
console.log(ellie.hasJob);

function printValue(obj, key) {
    console.log(obj[key])
}
printValue(ellie, 'name')
printValue(ellie, 'age')
  1. 객체의 값을 꺼내는 방법은 2가지인데, 속성의 값을 코딩 시점에서 알 수 없을 경우 []을 쓰고, 알면은 .을 통해 사용하면 된다.

3. Property value shorthand

const person1 = {name: 'bob', age: 2};
const person2 = {name: 'steve', age: 22};
const person3 = {name: 'dave', age: 4};
const person4 = makePerson('ellie', 30)
console.log(person4)

function makePerson(name, age) {
    return {
      name, 
      age,
    }
}
  1. return 을 통해 속성을 지정하는데, 이름이 같다면 생략할 수 있다.

4. Constructor Function

const person4 = new Person('ellie', 30)
console.log(person4)

function Person(name, age) {
    // this = {}
    this.name = name;
    this.age = age;
    // return this;
}
  1. 이렇게 생성자 형태를 통해 자동으로 만들 수 도 있다.

5. in operator: property existence check (key in obj)

console.log('name' in ellie);
console.log('age' in ellie);
console.log('random' in ellie);
console.log(ellie.random);
  1. in을 통해 해당 속성이 있는지 확인할 수 잇다.

6. for.. in vs for..of

// for (key in obj)
console.clear()
for (let key in ellie) {
    console.log(key);
}

// for (value of iterable)
const array = [1, 2, 3, 5, 2];
for (let value of array){
    console.log(value)
}
  1. in을 통해 Object의 모든 key를 불러올 수 있다.
  2. of를 통해 array의 모든 value를 가져올 수 있다.
profile
코딩은 해봐야 아는 것

0개의 댓글