자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6)

    728x90
    반응형

    자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6)

     

    - Objects
    - one of the JavaScript's data types.
    - a collection of related data and/or functionality.
    - Nearly all objects in JavaScript ar instances of Object
    - object = { 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}
    function print(person) {
    	console.log(person.name);
    	console.log(person.age);
    }
    
    const obj1 = {}; // object literal syntax
    const obj2 = new Object(); // object constructor syntax
    print(ellie);

     

    - 뒤늦게 정보 추가 가능
    - 너무 동적으로 코딩하면 나중에 유지보수가 힘들고, 생각지 못한 에러 가능하기때문에 피하는걸 추천

    - width JavaScript magic (dynamically typed language)
    - ca add properties later

     

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

     

    - 뒤늦게 삭제도 가능
    - can delete properties later

    delete ellie.hasJob;

     

     

    2. Computed properties

    - key should be always string

    console.log(ellie.name); // 코딩하는 순간 키에대한 정보를 받아올 때 사용
    console.log(ellie['name']); // 정확하게 어떤 키가 필요한지 모를때, 런타임에서 결정될 때 사용, 동적으로 키에 관련된 value 받아올 때 유용하게 사용가능
    ellie['hasJob'] = true;
    console.log(ellie.hasJob);
    
    function printValue(obj, key) {
    	console.log(ob[key]);
    }
    printValue(ellie, 'name');
    printValue(ellie, 'age');

     

     

     

    3. Property value shorthand

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

     

     

    4. Constructor function


    - 순수하게 object를 생성하는 함수는 보통 대문자로 시작하도록
    - return 대신에 this.ㅁㅁ 같이 작성

    function Person(name, age) {
    	// this = {}; 생략
    	this.name = name;
    	this.age = age;
    	// return this; 생략
    }
    const person5 = new Person('ellie', 30);

     

     

     

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

    - 해당하는 obj안에 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);
    }
    
    // for (value of iterable)
    const array = [1, 2, 4, 5];
    for (value of array) {
    	console.log(vlaue);
    }

     

     

    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);
    
    // old way
    const user3 = {};
    for (key in user) {
    	user3[key] = user[key];
    }
    console.log(user3);
    
    // new way
    const user4 = {};
    Object.assign(user4, user);
    
    const user5 = Object.assign{}, user);
    console.log(user4);
    
    // another example
    const fruit1 = {color: 'red'};
    const fruit2 = {color: 'blue', size: 'big'};
    const mixed = Object.assign({}, fruit1, fruit2); // 뒤에 붙을수록 앞쪽의 property에 덮어쓴다.
    console.log(mixed.color);
    consooe.log(mixed.size);

    https://www.youtube.com/watch?v=1Lbr29tzAA8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=10&t=0s

     

    728x90
    반응형

    댓글