2021. 6. 18. 01:26, Front-End/JavaScript
1. Object
- JS의 데이터 타입 중 하나
- 관련 데이터,함수 집합체
- JS의 거의 모든 객체는 Object의 인스턴스
- 객체는 key와 value의 집합체 (object = {key : value};)
- 하나의 properties는 key:value로 구성됨
1. Literals and properties (데이터 그리고 특성)
Literals는 변하지 않는 데이터를 말한다.
const obj1 = {}; // 'obect literal' 문법
const obj2 = new Object(); // 'object constructor' 문법
function print(person) {
console.log(person.name);
console.log(person.age);
}
const yyeo = { name: `yyeo`, age: 4 };
//key는 name, value는 yyeo
print(yyeo); // > yyeo \n 4
//Runtime(프로그램이 동작하고 있을 때)
// dynamically typed(동적 타입) language
// can add properties later (나중에 속성 추가 가능)
yyeo.hasJob = true;
console.log(yyeo.hasJob); // > true
// can delete properties later (나중에 속성 삭제 가능)
delete yyeo.hasJob;
console.log(yyeo.hasJob); // > undefined
2. Computed(계산된) properties
- object['key']
- 동적으로 key의 value를 받아와야 할 때 유용한 방법
2. Computed properties
console.log(yyeo.name);
//그 값이 필요할때
//or
console.log(yyeo['name']);
yyeo['hasJob'] = true;
console.log(yyeo.hasJob);
//그 값이 뭔지 모를때 즉,Runtime때 받아야할때
//key는 항상 StringType으로
function printValue(obj,key) {
console.log(obj[key]);
}
printValue(yyeo,'name');
printValue(yyeo,'age');
//동적으로 키를 받을때 유용~
3. Property shorthand(단축 속성명)
- key와 value의 이름이 동일하다면 간단하게 정의할 수 있다.
//3. Property value shorthand
function makeperson(name,age) {
//다른계산을 하지않고 순수하게 오브젝트를 생성하는 놈들은 대문자로 쓴다
//this - {};
this.name = name;
this.age = age;
// return {
// name,
// age,
// //키와 값이 값으면 name, 으로 써도 된다.
// //key, value
// };
}
//리턴으로 써도 되고, this로도 써도 된다.
4. Constructor function (생성자 함수)
- class가 없었을 때 방식
- 함수명 첫 글자는 대문자로 (약속)
- 호출 시 class처럼 new 키워드 사용
// 위 class와 기능적으로 똑같음
function Person(name, age) {
this.name = name;
this.age = age;
}
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const person2 = new Person(`gunwoo`, 28.8);
console.log(person2); // > Person {name: "yyeo", age: 28.8}
5. in 연산자
- 해당 object에 key를 체크하는 연산자
- key in obj
6. for in, for of 문
// for (key in obj)
for (const key in ellie) {
console.log(key); // > name \n age \n hasJob
}
// for (value of iterable)
const array = [1, 2, 4, 5];
// for(let i = 0; i < array.length; i++) {
// console.log(array[i]);
//위 아래와 동일하지만 아래를 쓸 경우 좀 더 간결,간단해진다
for (const value of array) {
console.log(value); // > 1 \n 2 \n 4 \n 5
}
7. Cloning (복제)
- Object.assign은 얕은 복사이다
//7. cloning
// Object.assign(dest, [obj1, obj2, obj3...])
const user = { name : 'yyeo',age : '20'};
const user2 = user;
user2.name = 'coder';
console.log(user);
//old way
const user3 = {};
for ( key in user) {
user3[key] = user[key];
}
console.clear();
console.log(user3);
//const user4 = {};
//Object.assign(user4, user);
//console.log(user4);
//위와 동일 아래꺼가 더 간결.
const user4 = Object.assign({},user);
console.log(user4);
//assign 열거할 수 있는 하나 이상의 출처 객체로부터
//대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다.
//another example
const fruit1 = { color: 'red'};
const fruit2 = { color: 'blue', size: 'big'};
const fruit3 = { color: 'pink', size: 'small'};
const mixed = Object.assign({},fruit1,fruit2,fruit3);
//3에서부터 1까지 덮어씌운다. 3블랙은 2로 2의 블랙은 1로
console.log(mixed.color);
console.log(mixed.size);
복제 관련 링크
https://www.daleseo.com/js-objects-clone/
자바스크립트 객체 복제 방법
Engineering Blog by Dale Seo
www.daleseo.com
'Front-End > JavaScript' 카테고리의 다른 글
| [JavaScript] 4_X. 클래스,객체,인스턴스 (0) | 2021.06.13 |
|---|---|
| [JavaScript] 4. 클래스 (0) | 2021.06.13 |
| [JavaScript] 3. 함수 (1) | 2021.06.13 |
| [JavaScript] 2. 데이터 타입 (0) | 2021.06.07 |
| [JavaScript] 1. 콘솔출력과 async 그리고 defer (2) | 2021.06.07 |
Comments, Trackbacks
