JavaScript 관련 포스팅

• JavaScript(1) - async vs. defer
• JavaScript(2) - variable
• JavaScript(3) - operator
• JavaScript(4) - function
• JavaScript(5) - class vs. object
• JavaScript(6) - object
• JavaScript(7) - array
• JavaScript(8) - JSON
• JavaScript(9) - callback
• JavaScript(10) - promise
• JavaScript(11) - Regular expressions
• JavaScript(12) - Prototype과 Class 피하기
• JavaScript(13) - localStorage

< 추천 >
Object 관련 글 읽어보기
Object - JavaScript | MDN

Object의 등장 배경

const name = 'minji';
const age = 5;
print(name, age);
function print(name, age) {
    console.log(name);
    console.log(age);
}

Console

minji

5

• primitive type은 변수 하나당 값을 하나만 할당할 수 있음
• 함수의 parameter로 사용할 변수를 일일이 써주어야 함
• 인자가 많아질 수록 추가해야하는 코드가 늘어나 관리가 힘들어지며, grouping해서 논리적으로 생각하기도 어려움

Object 생성

- Literals and properties

• object literal syntax
  → { } curly braces를 사용해 생성
  → { } 안에 내용을 입력

    const obj1 = {}; // 'object literal' syntax
  

• object constructor syntax
  → new keyword를 사용해 생성
  → Object에서 정의된 constructor가 호출되기 때문

    const obj2 = new Object(); // 'object consrtuctor' syntax
  

• object = { key : value }
  → object는 key와 value의 집합체

    function print(person) {
        console.log(person.name);
        console.log(person.age);
    }
    const minji = {name: 'minji', age: 5}; // object 생성
    print(minji);
  

  Console

  minji

  5

object의 property에 접근하기

1. 일반적인 경우(. 사용)

• object.key 형태

  const minji = {name: 'minji', age: 5};
  console.log(minji.name); // minji
  console.log(minji.address); // undefined
  

  Console

  minji

  undefined

• 존재하지 않는 property(여기서는 address)를 호출하면 undefined 반환

2. Computed properties

• 동적으로 원하는 key 값을 받아오고 싶을 때는 [] 을 사용함
  (→ computed properties)

• key는 반드시 string type(['string'])으로 설정해야 함!

    const minji = {name: 'minji', age: 5};
  
    console.log(minji['name']); // minji
    console.log(minji[name]); // undefined
  

  Console

  minji

  undefined

• 동적으로 key에 관련된 value를 받아와야 할 때 유용함

    const minji = {name: 'minji', age: 5};
    function printValue(obj, key) {
        console.log(obj[key]); // computed properties
    }
    printValue(minji, 'name'); // minji
  

  Console

  minji

Property value shorthand

• 동일한 key와 value를 반복해서 object를 생성하는 경우,

  const person1 = {name: 'Bob', age: 2};
  const person2 = {name: 'Steve', age: 3};
  const person3 = {name: 'Dave', age: 4};
  

• function을 사용해 간단하게 나타낼 수 있음
  → 이 방법은 과거, JavaScript에 class가 없었을 때 많이 사용했음
  → 아래 예시처럼 key와 value의 이름이 동일하다면, name: name,을 name,으로 축약할 수 있음

    function makePerson(name, age) {
        return {
            name: name, // name, 으로 축약 가능
            age: age, // age, 로 축약 가능
        }
    }
    const person4 = makePerson('minji', 5);
    console.log(person4);
  

  Console

  {name: ‘minji’, age: 5}

• ★ Constructor function 사용
  → class의 constructor와 비슷하다고 생각하면 됨
  → 순수하게 object를 생성하며, 함수 이름의 첫 글자는 대문자로 시작
  → return 대신 this를 사용
  → this = {};와 return this;가 생략된 것으로, JavaScript engine이 알아서 object를 생성해 줌
  → new를 사용해 호출

    // Constructor function
    function Person(name, age) {
        // this = {}; 
        this.name = name;
        this.age = age;
        // return this; 
    }
  
    const person5 = new Person('baby', 3);
    console.log(person5);
  

  Console

  Person {name: ‘baby’, age: 3}

in operator

• in keyword로 해당 object 내에 key가 존재하는 지 확인(boolean 반환)

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

  Console

  true

  true

  false

  undefined

for…in vs. for…of

• 특정 object 안의 key를 모두 받을 때는 in을 사용함

    const minji = {name: 'minji', age: 5};
  
    for (key in minji) {
        console.log(key);
    }
  

  Console

  name

  age

• Array나 List같은 data를 순차적으로 계산하거나 출력할 때,
  → 기존 방법

    const array = [1, 2, 4, 5];
    for (let i = 0; i < array.length; i++) {
        console.log(array[i]);
    }
  

  Console

  1

  2

  4

  5

  → of를 사용하면 보다 간편하게 작성 가능

    const array = [1, 2, 4, 5];
    for (value of array) {
        console.log(value);
    } 
  

  Console

  1

  2

  4

  5

Cloning (object 복제하기)

• 예전 방법
  → 빈 object를 만들고, for…in으로 복제할 원본의 값을 하나하나 넣어줌

    const user = {name: 'minji', age: 10};
    const user2 = {};
    for (key in user) {
        user2[key] = user[key];
    }
    console.log(user2);
  

  Console

  {name: ‘minji’, age: ‘10’}

• Object.assign() 사용
  → 복사하고자 하는 target과 원문인 source를 parameter로 전달하면, 이 둘을 합쳐 return함
  ※ 새로운 함수나 API를 쓰기 전에는 항상 parameter와 return값을 숙지할 것!
  | 참고: Object.assign() - Java Script | MDN
  • Syntax

      Object.assign(target, ...sources)
    

  • Parameters
    target
    The target object — what to apply the sources’ properties to, which is returned after it is modified.

    sources
    The source object(s) — objects containing the properties you want to apply.

  • Return value
    The target object.

      const source = { name: 'elephant', age: '6'}; // 복제할 원문
      const result = {}; // 빈 target 생성
      Object.assign(result, source);
            
      console.log(result);
    

    Console

    {name: ‘elephant’, age: ‘6’}

    아래처럼 축약해서 적어도 됨

      const source = { name: 'elephant', age: '6'};
      const result = Object.assign({}, source); // 축약된 형태
      console.log(result);
    

  • 다른 예시

      const fruit1 = { color: 'red'};
      const fruit2 = { color: 'yellow', size: 'small' };
      const fruit3 = { color: 'green'};
      const mixed1 = Object.assign({}, fruit1, fruit2);
      const mixed2 = Object.assign({}, fruit1, fruit2, fruit3);
      console.log(mixed1.color); // yellow
      console.log(mixed2.color); // green
      console.log(mixed2.size); // small
    

    Console

    yellow

    green

    small

  ※ 주의! ※
  assign<T, U, V>(target: T, source1: U, source2: V): T & U & V; 를 적용할 때,
  나중에 나오는 source2는 먼저 있던 source1의 내용을 덮어 쓰게 됨

< 출처 >

“자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6),” 유튜브 비디오, 23:03, 게시자 “드림코딩 by 엘리,” 2020년 5월 6일, https://youtu.be/tJieVCgGzhs