오브젝트 넌 뭐니?(드림코딩 by 엘리님 유튜브 강의)

1. 오브젝트

function print(person){
	console.log(person.name);
    console.log(preson.age);
}

const ellie = { name: 'ellie', age: 4 };
print(ellie);

오브젝트를 만드는 법 2가지

const obj1 = {}
const obj2 = new Object();

{}를 이용해서 만드는 것을 object literal syntax이라고 하고

new를 이용해서 만드는 것을 object constructor syntax이라고 한다

 

 

자바스크립트는 미친 것이 뒤늦게 하나의 프로퍼티가 추가 가능함 

function print(person){
	console.log(person.name);
    console.log(preson.age);
}

const ellie = { name: 'ellie', age: 4 };
print(ellie);

ellie.hasJob = true;
delete ellie.hasJob

이런 식으로 추가도 가능하고 삭제도 가능함 

빠르게 만들기에는 좋지만

유지보수가 힘들어질 수 있으니 사용은 자제하는 게 좋음

 

오브젝트는 키와 밸류의 집합체이다. object = { key : value }

 

위 예시는 키는 name 벨류는 ellie인 것을 알 수 있다.

 

2. computed properties

dot (ooo.name)이라는 문법이 아닌

오브젝트 안에 있는 name을 string 형태로 접근이 가능하다 (string으로만 받아 올 수 있으니 주의)

console.log(ellie.name);
console.log(ellie['name']);

dot을 이용할 때는 코딩하는 그 순간, 대부분 코딩을 진행할때는 dot을 이용함

computed property를 이용할때는 내가 뭘 받을지 모를 때 사용한다. 동적인 프로그램 만들 때 사용

 

3. property value shorthand

const person1 = { name : '해강', age : 23 };
const person2 = { name : '해덕', age : 22 };
const person3 = { name : '해순', age : 21 };
const person4 = { name : '해주', age : 20 };

const person5 = makePerson('해미', 23) // case1,2

const person6 = new Person('해진', 30) // case3 new를 이용해서 선언함


function makePerson(name,age) {    //case1 
	return {
    	name : name.
        age : age,
	};
}

function makePerson(name,age) {    //case2 이런식으로 이름이 동일하면 생략가능
	return {
    	name.
        age,
	};
}

function Person(name,age) {    //case3 함수 이름을 대문자로 작성해야됨
	//this = {} 생략가능
    this.name = name;
    this.age =age;
    // return this 생략가능
}

4. constructor function

function Person(name,age) {    //case3 함수 이름을 대문자로 작성해야됨
	//this = {} 생략가능
    this.name = name;
    this.age =age;
    // return this 생략가능
}

위에서 쓴 게 constructor function임

5. in operator

해당 안에 키가 있는지 없는지 확인하는 것 (in을 이용하여 확인함)

엘리 안에 이름이 있는지 확인하는 코드

'true' or 'false'를 출력함

정의하지 않은 키를 사용하면 undefined를 출력함

console.log('name' in ellie);

6. for ..in  vs for.. of

- for ( key in obj ) : 객체 안에 키가 전부 for을 통해 돌아감

- for ( value of iterable ) :  안에 모든 값을 출력함  

const array = [1, 2, 4, 5];

for(value of array){
 console.log(value);
}

배열 안에 모든 값이 출력됨 (1, 2, 4, 5)

7. cloning 

Object.assign()을 이용하는데 여기 Object를 보면 우리의 모든 객체는 저 Object를 상속한다

복사하는 방법은 위에 user라는 객체가 name과 age를 가지고 있다고 하면

cost user4 = {};
Object.assign( user4, user);
console.log(user4);

이렇게 하게 되면 둘의 키와 네임이 더해진다. 근데 user4는 빈 객체이므로

채워지게 되어 복사가 된다

const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2);

이렇게 하면 뒤에 있는 거로 최신화되어 덮어 쓰인다 따라서 mixed는 blue big을 프로퍼티로 갖게 된다.