Haksae 2022. 1. 9. 15:36

1. Object

  • one of the JS’s data types
  • a collection of related data and / or functionality
  • Nearly all objects in JS are instances of object
  • primitive 데이터 타입은 변수 하나 당 값을 하나만 할당이 가능
  • argument가 많아지면 관리하기 힘들고, 로지컬하게 코드를 만들기 어렵기 때문에, object 사용

1. Literals and Properties

💡 object = { key : value}; 오브젝트는 키와 밸류의 집합체이다. 오브젝트는 키(우리가 접근할 수 있는 변수, 프로퍼티)와 그 키가 가지고 있는 값을 가진다.

 

  • object literal syntax
    • const object명 = {}
    • JS는 클래스가 없어도 오브젝트를 생성할 수 있음
  • object constructor syntax
    • const object명 = new 클래스명();
    • class를 상속하여 오브젝트 생성
function print(person) {
	console.log(person.name);
	console.log(person.age);
}

const haksae = {name: 'haksae', age: 20};
print(haksae);  // haksae
                // 20
haksae.Job = 'student'
console.log(haksae.Job) // student

delete haksae.age;
console.log(haksae.age) // undefined
  • JS는 동적 언어라서 뒤늦게 property를 추가 및 삭제 가능. 하지만 비추

2. Computed properties (계산된 속성)

  • key(properties) should be always 'string' type
  • object[’key]
console.log(haksae.name); // dot을 통해
console.log(haksae['name']); // Computed properties; 배열 형식으로도 접근이 가능
//동일하게 출력

haksae['Job'] = 'student' // 이 방식으로도 위와 같이 추가 가능
  • dot vs computed property
    • dot을 사용하는 경우 : 코딩하는 순간 그 키에 해당하는 값을 받아오고 싶을 때
    • computed property : 정확하게 어떤 키가 필요한지 모를 때, runtime에서 결정될 때 받을 때 쓴다.
      • 동적으로 키의 밸류를 받아와야할 때 유용하게 쓸 수 있음
//위와 연결

// dot
function printValue(obj, key) {
	console.log(obj.key);
}
printValue(haksae, 'name'); // undefined

//computed property
function printValue(obj, key) {
	console.log(obj[key]);
}
printValue(haksae, 'name'); // hakksae 출력

3. Property value shorthand

  • property 값을 줄 떄 좀 더 짧게 코딩하는 법
const person1 = { name: 'tommy', age: 20 };
const person2 = { name: 'mary', age: 22 };
const person3 = makePerson('haksae', 30);

function makePerson(name,age) {
	return {
		name // 원래 name: name, 이지만
		age  // 키와 밸류의 이름이 같다면 생략 가능
	};
}
  • object를 필요할 때 마다 만들면, 동일한 키와 밸류를 반복해야하는 문제점
  • 함수를 이용하면 value만 전달해도 오브젝트를 만드는 것을 만듦
  • 예전에 JS에 클래스 개념이 없던 시절에는 이런 식으로 작성했음

4. Constructor function

  • 순수하게 오브젝트를 생성하는 함수들은 위와 같이 사용하지 않음
  • 대문자로 작성하고 this 사용함
const person3 = new Person('haksae', 30);

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 haksae);
  • 해당하는 오브젝트 안에 키가 있는지 확인하는 것

6. for... in, for... of

  • for(key in obj) : 모든 키를 부를 때 쓴다.
for(key in haksae) {
	console.log(key); // haksae안에 있는 모든 키들을 순차적으로 출력 name, age, Job
}
  • 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(dest, [obj1, obj2, obj3 ...])
    • JS에 있는 기본적으로 탑재되어있는 오브젝트 중에 하나
    • 모든 오브젝트는 이를 상속 받는다.
const user = {name: 'haksae', age: '20' };
const user2 = user; // 개별 referencesms 생성하되, 같은 userd와 변수값을 할당함

user2.name = 'coder'; // 이렇게하면 user의 name도 변경됨

// old way
const user3 = {};
for (key in user) { // 순차적으로 user의 property를 user3에게 할당
	user3[key] = user[key];
}
console.log(user3);

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

or

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

// another example
const fruit1 = {color: 'red'};
const fruit2 = {color: 'blue', size: 'big'};
const mixed = Object.assign({}, fruit1, fruit2); // 뒤에 파라미터가 앞에 것을 덮는다
console.log(mixed.color); // bule 출력 
console.log(mixed.size); // big 출력

출처 : 드림코딩엘리 https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w