개발 공부/JavaScript

7. 오브젝트

무우너대갈 2022. 1. 20. 12:24
반응형

Literals & properties

  - Object 생성

    (1) const obj1 = {};

       - object literal

    (2) const obj2 = new Object();

        - object constructor

  - 자바스크립트에서는 오브젝트 내에 값 추가, 삭제가 가능

  - Object { key : value }

 

Computed properties

  - 대괄호['']를 이용해 string 타입으로 불러올 수 있음

  - 정확하게 어떤 키가 필요한지 모르는 경우

    - 런타임에서 결정될 때

    - 동적으로 키값을 받아오는 경우

   ex. function prinValue(obj, key) {

         console.log(obj[key]); }

        printValue(octopus, 'name');

 

Property value shorthand

  - key와 value의 이름이 동일하다면 생략 가능

    - object를 반복해서 생성할 때 함수로 생성 가능

    

Constructor function

  ex. const person = makePerson('ellie', 30);

         function makePerson(name, age) {

            return {

                 name,

                 age, }

 

    + 다른 기능 없이 오브젝트만 생성하는 경우

       - 함수명을 대문자로 설정 ex. Person

       - return 대신 this.name = name, this.age = age;

       - 생략된 부분 this = {};  return this;

 

in operator

  - 해당하는 오브젝트 안에 키가 있는지 확인

  ex. (key in obj)

 

for..in & for..of

  1) for(key in obj)

    - obj 안에 있는 키들이 블럭을 돌 때마다 key에 지역변수로 할당됨

  2) for(value of iterable)

    - 배열과 같은 순차적인 것들을 반복하는 경우 사용

 

반응형

Fun cloning

  - 이미 선언된 오브젝트를 다음과 같이 선언할 시 같은 레퍼런스값을 가리켜 값의 변경이 가능함

    ex. const obj2 = obj

         obj3 = {}  Object.assign(obj3, obj) 

         obj3 = Object.assign({}, obj) 

               -> obj는 복사되는 값

  - 여러 개의 소스 전달 가능

  - 같은 property값이 존재하는 경우 뒤에 나오는 소스값을 적용


 + 익숙한 듯 아닌 듯,,, 빨리 마무리하고 다시 리액트 하고 싶당,,

반응형

'개발 공부 > JavaScript' 카테고리의 다른 글

9. JSON  (0) 2022.01.22
8. 배열  (0) 2022.01.21
6. 클래스와 오브젝트의 차이점  (0) 2022.01.19
5. Arrow function  (2) 2022.01.18
4. operator, if, for, loop  (0) 2022.01.16