드림코딩 자바스크립트 기초강의 정리7

Dongwoo Kim·2021년 7월 16일
0

오브젝트 넌 뭐니?

//Objects
//one of the JavaScript's data types.
//a collection of related data and/or functionality.
//Neary all objects in JavaScript are instance of Object
//Object = { key : value };

//--------------------------------------

//1. Literals ans properties

const obj1 = {}; //'objective literal' syntax
const obj2 = new Object(); //'object constructor' syntax

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;
console.log(ellie.hasJob);//나중에 키 추가 가능

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

//--------------------------------------

//2. computed properties: 계산된 properties -> ellie['name']
//key should be always string
console.log(ellie.name); //key에 해당하는 값을 정확히 알 때
console.log(ellie['name']); //어떤 key가 필요한지 모를 때 = runtime에서 결정될 때
ellie['hasJob'] = true;
console.log(ellie.hasJob);

//computed properties의 예, 동적으로 키 값 받을 때 유용하게 쓰인다. 보통은 .으로 접근
function printValue(obj, key) {
	console.log(obj[key]);
}
printValue(ellie, 'name');
printValue(ellie, 'age');

//--------------------------------------

//3. Property value shorthand: property와 value의 이름이 같다면 생략가능
const person1 = {name: 'bob', age: 2};
const person2 = {name: 'steve', age: 3};
const person3 = {name: 'dave', age: 4};
function makePerson(name, age) {
	return {
    	name,
      	age,
    }
}
const person4 = makePerson('ellie', 30);
console.log(person4) // {name: 'ellie', age: 30}

//--------------------------------------

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

const person5 = new Person('kim', 27);
console.log(person5); //Person {name: 'kim', age: 27};
                            
//--------------------------------------

//5. in operator: property existence check (key in obj)
console.log('name' in ellie); //true
console.log('age' in ellie); //true
console.log('random' in ellie); //false
console.log(ellie.random); //없으므로 undefined
                            
//--------------------------------------
                            
//6. for...in vs for...of
//for (key in obj)
for (key in kim) {
	console.log(key);
}                            

//for (value of iterable)
const array = [1, 2, 3, 4, 5];
for (value of array) {
	console.log(value);
}

//--------------------------------------                            
//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); //{name: 'coder', age: '20'}  

                            
//new way
Object.assign(); //https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign        
profile
水滴石穿

0개의 댓글