rhanziy

javascript. Object객체 본문

Html_css_js

javascript. Object객체

rhanziy 2022. 1. 21. 15:49
const player = {  // object는 {}
  name : "rani",
  age: 98,
};

player.name = "rhanziy" // 속성 값 변경
console.log(player);

player.cool = true; // 속성 값 추가
console.log(player);
 
// Objects
// one of JavaScript's data types
// a collection of related data and/or functionality
// Nearly all objects in JavaScript are instance of Object
// object = { key : value };

// 1. Literals and properties
const obj1 = { };  // 'object literal' syntax
const obj2 = new Object( ); // 'object constructor' syntax

function print(person) {
    console.log(person.name);
    console.log(person.age);
}
const rhanyi = {name: 'rahnyi', age: 4 };
print(rhanyi);

// with JavaScript magic (dynamically typed language)
// can add properties later
rhanyi.hasJob = true;
console.log(rhanyi.hasJob);

//  can delete properties later
delete rhanyi.hasJob;
console.log(rhanyi.hasJob);

// 2. Computed properties
// key should be always string!!
console.log(rhanyi.name);
console.log(rhanyi['name']);
rhanyi['hasJob'] = true;
console.log(rhanyi.hasJob );

function printValue(obj, key) {
    console.log(obj[key]);
}
printValue(rhanyi, 'name');
printValue(rhanyi, '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('rhanyi', 29);
console.log(person4);

// 4. Constructor Function
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 5. in operator: property existence check (key in obj)
// in을 이용해서 해당하는 key가 obj안에 있는지 확인할 수 있다.
console.log('name' in rhanyi);
console.log('age' in rhanyi);
console.log('random' in rhanyi);
console.log(rhanyi.random);

// 6. for..in vs for..of
// for (key in obj)
console.clear( );
for (key in rhanyi) {
    console.log(key);
}
// for (value of literable)
const array = [1, 2, 4, 5];
for (value of array) {
    console.log(value);
}

// 7. cloning
// Object.assign(dest, [obj1, obj2, obj3...])
const user = { name: 'rhanyi', age :29 };
const user2 = user;
console.log(user);

// old way
const user3 = { };
for ( key in user) {
    user3[key] = user[key];
}
console.clear( );
console.log(user3);

// other way
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);
Comments