자바스크립트 객체 심층 분석.

JavaScript 개발자라면 객체를 다루지 않고는 대규모 앱을 만들 수 없다는 사실을 알고 계실 것입니다.

JavaScript에서는 거의 모든 것이 객체입니다.

JavaScript 개체에 대해 자세히 살펴보겠습니다.

개체: JavaScript의 개체는 기본 형식이 아닌 데이터 구조일 뿐입니다. 중괄호를 사용하여 개체를 정의하고 쉼표로 구분된 키-값 쌍을 넣을 수 있습니다.

예:

const user = {
   name:"Hemendra",
   nickname:"Hemu",
   email:"[email protected]",
   city:"bhilwara"
}

개체에 대한 CRUD 작업

만들다

let student = {}; // an empty array

student.name = "Hemendra Khatik"; 
//important -> student["name"]="Hemendra Khatik" is also valid

student.branch = "CSE";
student.age = 25;

console.log(student); // will print the below structure
/*
{
   name:"Hemendra Khatik",
   branch:"CSE",
   age:25
}
*/

또는 한 번에 모든 키 값

let user = {
   name:"Hemendra",
   nickname:"Hemu",
   email:"[email protected]",
   city:"bhilwara"
}

읽다
. 연산자를 사용하여 객체의 값에 액세스합니다.

user.name; // to access the "Hemendra".
user.city; // to access the "bhilwara".
user.username; // will be undefined because it is not present in the user object.

대괄호를 사용하여 객체의 속성에 액세스할 수도 있습니다.

user["name"];    // to access the "Hemendra".
user["city"];    // to access the "bhilwara".

업데이트

객체를 업데이트합니다.

student.age = 21; // now age is changed from 25 to 21

삭제

개체에서 키를 삭제합니다.

delete student.name; // to delete the name key from student object

기타 유용한 방법

객체에서만 키를 인쇄합니다.

const user = {
   username:"aamchora",
   email:"[email protected]",
};

Object.keys(user);
/* 
Above expression returns an array containing 
keys only from an object ["username", "email"]
*/

개체에서만 값을 인쇄합니다.

const user = {
   username:"aamchora",
   email:"[email protected]",
};

Object.values(user);
/* 
Above expression returns an array containing 
values only from an object ["aamchora", "[email protected]"]
*/

JavaScript 개체 고정

const user = {
   username:"aamchora",
   email:"[email protected]",
};

Object.freeze(user);
/* 
Above expression freezes the object. 
It means we cannot add, remove or update its properties.
It will not throw any error unless you are in strict mode but
there will be no effect of value change on your object.
*/

user.username = "NewUserName"; // --> will not work
user.newKey = "xyz"; // --> will not work
delete user.email; // --> will not work

console.log(user);
/*
{
  username:"aamchora",
  email:"[email protected]",
}
*/

개체 복제

You can not copy non-primitive type data structure as you copy primitive type data structure.

EG: 기본이 아닌 유형의 데이터 구조.

let a = 10;
let b = a;
b= b + 1;
console.log(a) // 10
console.log(b) // 11

EG: 원시 유형 데이터 구조.

let obj = {
 a:10;
};
let obj2 = obj;
obj2.a = 12;

if(obj === obj2){
   console.log("obj and obj2 are same");
};
// above condition will be true 

console.log(obj) // {a:12}
console.log(obj2) // {a:12}

자바스크립트의 이상한 동작을 이해하려면 아래 블로그를 읽어보세요.

We can use Object.assign(targetObject, sourceObject) to clone an object.

const obj = { a: 1 };
const obj2 = Object.assign({}, obj);
obj2.a = 2;

if(obj === obj2){
   console.log("obj and obj2 are same");
}else{
 console.log("obj and obj2 are different");
};

// above condition will be false here 

console.log(obj); // { a: 1 }
console.log(obj2); // { a: 2 }

얕은 사본
개체의 얕은 복사본은 속성이 복사본이 만들어진 원본 개체의 속성과 동일한 참조(동일한 기본 값을 가리킴)를 공유하는 복사본입니다.

참고: 얕은 복사에는 Object.assign(targetObject, sourceObject) 를 사용합니다.

Shallow copy를 이해하려면 아래 예를 살펴보십시오.

const obj = {
 a:1
}

const obj2 = {
 b:2,
 c:obj // here c's value is a reference to the other object called obj
}

const copy = Object.assign({},obj2); // here obj2 is a source object 

// changing the copied object's value 
copy.c.a = 1111;


if(copy.c.a === obj.a){
   console.log("obj and obj2 are same");
}
// above condition will be true 

깊은 복사

개체의 전체 복사본은 속성이 복사본이 만들어진 소스 개체의 속성과 동일한 참조(동일한 기본 값을 가리킴)를 공유하지 않는 복사본입니다.

참고: Deep copy의 경우 JSON.parse(JSON.stringify(sourceObject))를 사용합니다.

딥카피를 이해하기 위해 아래 예시를 보라.

const obj = {
 a:1
}

const obj2 = {
 b:2,
 c:obj // here c's value is a reference to the other object called obj
}

const copy = JSON.parse(JSON.stringify(obj2)) // here obj2 is a source object 

// changing the copied object's value 
copy.c.a = 1111;


if(copy.c.a === obj.a){
   console.log("obj and obj2 are same");
}else{
  console.log("obj and obj2 are not same");
}
// above condition will be false 

더 많은 블로그 게시물을 보려면 나를 따르십시오.
이 블로그가 도움이 되었는지 알려주세요.