TIL/JavaScript

객체(object)

han1693516 2022. 5. 21. 20:19

object
   - 여러 개의 변수를 보다 쉽게 관리하기 위해 만들어짐
   - key, value의 집합체
   
선언 방법
    - let obj1 = {name : '김현우', age : 4} // object literal
    - let obj2 = new objClass() // object constructor

    cf> javascript의 객체의 요소는 선언 후에 추가, 삭제 가능
         단, 이런 방식을 사용할 경우, 추후에 유지보수가 어려워짐

        ex) obj1.job = 'student'
             delete obj1.job


computed properties
     객체의 키 접근 방법
         1. console.log(obj1.age) -> 4 // 코딩하는 순간 그에 해당하는 값을 받아오고 싶을 때
         2. console.log(obj1['age']) -> 4  (property에 ', 대괄호 넣기) // 정확하게 어떤 키가 필요할 지 모를 때
             cf> key는 반드시 string 타입으로 넣기(따라서 2번 방법은 문자열로 넣기)

           -> 실시간으로 원하는 키의 값을 받아오고 싶다면 2번 방법으로
           -> 정확하게 어떤 키가 필요한지 모를 때, 즉 키가 변수로서의 역할을 할 때(?)
           
           ex) funciton printValue(obj, key){
                     console.log(obj.key) // 코딩하는 이 시점에 우리는 어떤 key를 받을 지 모름
                                                     따라서 obj['key']로 입력해야 함


property value shorthand
     es5에서는 객체를 생성하는 함수를 만들려고 할 때
     function Person(name, age){
           return {
                name : name,
                age : age
            };
           }
        위와 같은 방식으로 만들었지만, return의 key와 value의 값이 같다면, 이를 생략할 수 있음
         즉, return { 
                name, 
                age
                };
                }로 입력해도 같은 결과가 나옴


constructor function // 클래스 이전에 객체만을 만드는 함수
       function Person(name, age){  // constructor function은 보통 대문자로 시작함
                // this = {}; (생략)
               this.name = name;
               this.age=age;
               //return this;(생략)
            } 

    let user4 = new Person( 'abc', 20)

in operator(key가 object 안에 있는지 확인할 수 있음)
       console.log('name' in Person) // true
       console.log('random' in Person) // false
       cf> 정의하지 않은 키를 접근하게 되면 undefined 출력


for .. in vs for .. of
     for(key in obj)
        for(key in ellie) 
            console.log(key) // ellie 객체의 key가 출력

     for(value of iterable) // object가 아닌 array, string 등에서 사용됨
            const array = [1,2,3,4,5];
            for(arr of array){
                 console.log(arr);
             }

cloning(객체 복사)
 
     1. 반복문 이용(과거 방식)
            let user1={name : 'ab', age:20};
            let user3={};
            for(key in user1) //user1의 key가 key 변수에 할당됨
                 user3[key] = user1[key]
               

      2. Object.assign
             - js 내부의 모든 객체는 Object 객체를 상속
             - Object.assign(T, U, V, ...) 
                     - T : 복사받을 객체
                     - U, V, ... : 복사해줄 원본
              ex) const user4={};
                   Object.assign(user4, user1) 
                   or const user4 = Object.assgin({}, user1)
          
              ex2) const fruit1 = {color : 'red'}
                     const fruit2 = {color : 'blue', size : 'big}
                     const mixed = Object.assign({}, fruit1, fruit2); 
                          // 같은 key를 가진 객체들이 복사될 경우에는
                              제일 뒤에 있는 객체의 key의 value가 앞의 value로 복사됨
                                  따라서, const mixed ={color: 'blue', size: 'big} 이 됨     

'TIL > JavaScript' 카테고리의 다른 글

Class  (0) 2022.07.15
배열 관련 함수  (0) 2022.05.22
배열(기초)  (0) 2022.05.21
JavaScript - 조건문, 반복문, 형변환  (0) 2022.05.08
JavaScript - 함수  (0) 2022.05.08