[JS|クリーンアップコンセプト]object

リファレンスイメージ🎬/ リファレンスサイト🔗
1.対象(対象)

object = {key:value}의 집합체

JavaScriptデータ型の一つ

関連データまたは機能の集合

様々なキーセットを格納するための、より複雑なエンティティ

2.オブジェクトの使用理由
原語type変数ごとに1つの値しか割り当てられません
人が多くて勢いがある

const name = "user";
const age = 4;
function print(name, age) {
  console.log(name);
  console.log(age);
}

3. Literals and propertiess
オブジェクトの作成方法

//object literal syntax
const obj1 = {};
//object constructor syntax -> new를 이용해서 생성
const obj2 = new Object();

JavaScriptは動的タイプ言語であり、実行時に動的にタイプを決定する

const user = { name: "jim", age: 999 };
// property 추가
user.hasJob = true;
// property 삭제
delete user.hasJob;

これでpropertyを追加できます
propertyは、アクセス可能な変数を表します.

property: name,  property가 가진 값: jim

ただし、このような使用はメンテナンスや予期せぬエラーを招く可能性があります(できるだけ避けましょう!)
4.計算された属性
データアクセス時

const user = { name: "jim", age: 999 }; 
console.log(user.name); //1. 일반적인 경우
console.log(user['name']); // 2. Computed properties
// 단 프로퍼티는 string 타입이어야 함

user['hasJob'] = true;
console.log(user.hasJob); // true

log値は同じですが、違いがあります.

符号化された瞬間、そのキーに対応する値を求めたとき

・뉭묭기기기기기기기기기기기기기기\44

// 사용자에게 키를 input깂으로 받는 경우
function printValue(obj,key){
  console.log(obj[key]); // 어떤 키를 받을지 아직 모름
}
printValue(user,'name') // jim
printValue(user,'age') // 999

鍵に関連する値を動的に取得する必要がある場合に使用できます.
5. Property value shorthand

const person1 = {name: 'bob', age: 1};
const person2 = {name: 'steve', age: 2};
const person3 = {name: 'dave', age: 3};
const person4 = makePerson('jimmy',7);

function makePerson(name, age){
  return{
    // key와 value가 동일하다면 생략 가능하다
    name, // name = name
    age // age = age
  };
}

console.log(person4); // { name: 'jimmy', age: '7' }

6.Constructor Function(コンストラクション関数)
:オブジェクトを作成する関数

// 함수명은 대문자로 시작
function Person(name, age) {
  //this = {};
   this.name = name,
   this.age = age;
  //return this;
}
const person5 = new Person('james',50);

7. in operator
:オブジェクトにキーが存在するかどうかを確認します.

// const user = { name: "jim", age: 999 }; 
console.log("name" in user); //t
console.log("address" in user); //f
console.log(user.address); //undefined

8. for..in vs for..of

// for (key in obj)
// for문을 돌 때 마다 user가 가지고 있는 키들이 key라는 지역변수에 할당 됨
for (key in jaman) {
  console.log(key); // name, age, hasJob
}

// for (value of iterable)
// 오브젝트가 아니라 배열, 리스트같이 순차적으로 iterable한 데이터에 씀
// for문을 돌 때 마다 arr1dl 가지고 있는 값이 value라는 지역변수에 할당 됨
const arr1 = [1, 5, 6, 2];
for (value of arr1) {
  console.log(value);
}

9. cloning

// Object.assign(dest, [obj1, obj2, obj3...])
const people = { name: "jam", age: "20" };
// people의 메모리에는 레퍼런스가 들어있음 (jam, 20이 어디있는지)
// user2에도 동일한 레퍼런스가 할당됨
const user2 = people; 
user2.name = 'coder';
console.log(people, user2); // coder 20, coder 20

非参照オブジェクトをコピーできる本当の方法は?

// old way
const user3 = {};
for (key in people) {
  user3[key] = people[key];
}
console.log(user3); // coder 20

// Object.assign(타겟, 복사하고자 하는 것); 
Object.assign(user4, people); 
console.log(user4); // coder 20
// another way
const user5 = Object.assign({}, user);  

another example

const fruits1 = { color: "red" };
const fruits2 = { color: "blue", size: "big" };
const mixed = Object.assign({}, fruits1, fruits2);

//assign은 동일한 프로퍼티가 있다면 뒤에 것이 값을 게속 덮음
console.log(mixed.color); //blue
console.log(mixed.size); //big\