JavaScript Object 정리 (feat. DreamCoding Ellie~)

 

 

 

/* Objects

one of the Javascript's data types.

a collection of related data and/or functionality.

Nearly all objects in JavaScript are instance if Object

object = { key : value }; */

 

//1. Literals and properties

//objdect 만드는법

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

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

// const name = 'ellie';

// const age = 4;

// print(name, age);  

//이렇게 하나씩 하게되면 나중에 인자를 추가할때 또 변수 정의해야하고 print함수에 인자도 추가해야하기 떄문에 할 일이 많아짐.

//

function print(person) {

    console.log(person.name);

    console.log(person.age);

}

const ellie = { name: 'ellie', age: 4 }; // 요렇게 하면 간편

print(ellie);

//with JavaScript magic (dynamically typed language)

//can add properties later

ellie.hasJob = true; // 그러나 유지보수 어려움 되도록 사용x

console.log(ellie.hasJob);

//can delete properties later

delete ellie.hasJob;

console.log(ellie.hasJob);

// 2. Computed properties

//key should be always string

console.log(ellie.name);

console.log(ellie['name']); //요거

ellie['hasJob'] = true;

console.log(ellie.hasJob);

키의 데이터를 받아와야해서 뭔지 모를때 사용~

function printValue(obj, key) {

    console.log(obj[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 = new Person('ellie', 30);

console.log(person4);

//4. Constructor function

function Person(name, age) { // 다른 계산을 하지 않고 순수하게 오브젝트를 생성하는 함수들은 보통 대문자로 시작하도록

    // this = {};

    this.name = name;

    this.age = age;

    // return this; 생략된 것

}

//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);

//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, 3, 4];

for ( value of array) {

    console.log(value);

}

for(let i=0; i < array.length; i++) {

    console.log(array[i]);

}

// 7. Fun cloning

//Object.assign(dest, [obj1, obj2, obj3...])

const user = {name: 'ellie', age: '20'};

const user2 = user;  // 같은 오브젝트 가르킴, 복제는 아님

user2.name = 'coder';

console.log(user);

//old way 복제

const user3 = {};

for (key in user) {

    user3[key] = user[key];

}

console.log(user3);

//

const user4 = {};

Object.assign(user4, user);

console.log(user4);

// const user4 = Object.assign({}, user);

// console.log(user4);

//another example

const fruit1 = {color: 'red'};

const fruit2 = {color: 'blue', size: 'big'};

const mixed = Object.assign({}, fruit1, fruit2);

console.log(mixed.color);

console.log(mixed.size);

---

클래스와 객체..! 알랑말랑거려 알랑말랑해 ~

클래스는 뭔가 실행하는거고

객체는 내용인 것 같은 느낌적인 느낌?!?!

그래도 감은 잡았으니 하다보면 제대로 알게될것이여~