ES6-개체

JavaScript는 데이터 유형 확장을 지원합니다. JavaScript 객체는 사용자 정의 데이터 유형을 정의하는 좋은 방법입니다.

안 object키 값 쌍 세트를 포함하는 인스턴스입니다. 기본 데이터 유형과 달리 객체는 여러 값 또는 복잡한 값을 나타낼 수 있으며 수명에 따라 변경 될 수 있습니다. 값은 스칼라 값이나 함수 또는 다른 객체의 배열 일 수 있습니다.

객체 정의를위한 구문 변형에 대해서는 더 자세히 설명합니다.

개체 이니셜 라이저

기본 유형과 마찬가지로 객체에는 리터럴 구문이 있습니다. curly bracesv({과}). 다음은 개체를 정의하는 구문입니다.

var identifier = {
   Key1:value, Key2: function () { 
      //functions 
   }, 
   Key3: [“content1”,” content2”] 
}

객체의 내용이 호출됩니다. properties (또는 멤버) 및 속성은 name (또는 키) 및 value. 속성 이름은 문자열 또는 기호 여야하며 값은 모든 유형 (다른 개체 포함)이 될 수 있습니다.

모든 JavaScript 변수와 마찬가지로 개체 이름 (일반 변수 일 수 있음)과 속성 이름은 모두 대소 문자를 구분합니다. 간단한 점 표기법으로 객체의 속성에 액세스합니다.

다음은 개체 속성에 액세스하기위한 구문입니다.

objectName.propertyName

예 : 개체 이니셜 라이저

var person = { 
   firstname:"Tom", 
   lastname:"Hanks", 
   func:function(){return "Hello!!"},    
}; 
//access the object values 
console.log(person.firstname)   
console.log(person.lastname) 
console.log(person.func())

위의 예는 개체 사람을 정의합니다. 개체에는 세 가지 속성이 있습니다. 세 번째 속성은 함수를 나타냅니다.

위 코드가 성공적으로 실행되면 다음 출력이 표시됩니다.

Tom 
Hanks 
Hello!!

ES6에서는 속성 이름과 일치하는 속성 값을 할당 할 때 속성 값을 생략 할 수 있습니다.

예

var foo = 'bar' 
var baz = { foo } 
console.log(baz.foo)

위의 코드 조각은 객체를 정의합니다. baz. 개체에 속성이 있습니다.foo. ES6은 변수 foo의 값을 객체의 키 foo에 암시 적으로 할당하므로 여기서 속성 값은 생략됩니다.

다음은 위의 코드에 해당하는 ES5입니다.

var foo = 'bar' 
var baz = { foo:foo } 
console.log(baz.foo)

위 코드가 성공적으로 실행되면 다음 출력이 표시됩니다.

bar

이 약식 구문을 사용하면 JS 엔진은 포함 범위에서 동일한 이름을 가진 변수를 찾습니다. 발견되면 해당 변수의 값이 속성에 할당됩니다. 찾을 수없는 경우 참조 오류가 발생합니다.

Object () 생성자

JavaScript는 다음과 같은 특수 생성자 함수를 제공합니다. Object()개체를 빌드합니다. new 연산자는 개체의 인스턴스를 만드는 데 사용됩니다. 객체를 생성하려면 new 연산자 뒤에 생성자 메서드가옵니다.

다음은 개체를 정의하는 구문입니다.

var obj_name = new Object(); 
obj_name.property = value;    
OR             
obj_name["key"] = value

다음은 속성에 액세스하기위한 구문입니다.

Object_name.property_key                    
OR              
Object_name["property_key"]

예

var myCar = new Object(); 
myCar.make = "Ford"; //define an object 
myCar.model = "Mustang"; 
myCar.year = 1987;  

console.log(myCar["make"]) //access the object property 
console.log(myCar["model"]) 
console.log(myCar["year"])

위 코드가 성공적으로 실행되면 다음 출력이 표시됩니다.

Ford 
Mustang 
1987

개체의 할당되지 않은 속성은 정의되지 않습니다.

예

var myCar = new Object(); 
myCar.make = "Ford"; 
console.log(myCar["model"])

위 코드가 성공적으로 실행되면 다음 출력이 표시됩니다.

undefined

Note− 객체 속성 이름은 유효한 JavaScript 문자열이거나 빈 문자열을 포함하여 문자열로 변환 할 수있는 모든 것이 될 수 있습니다. 그러나 유효한 JavaScript 식별자가 아닌 속성 이름 (예 : 공백이나 하이픈이 있거나 숫자로 시작하는 속성 이름)은 대괄호 표기법을 사용해서 만 액세스 할 수 있습니다.

변수에 저장된 문자열 값을 사용하여 속성에 액세스 할 수도 있습니다. 즉, 객체의 속성 키는 동적 값이 될 수 있습니다. 예 : 변수. 이 개념은 다음 예에서 설명됩니다.

예

var myCar = new Object()  
var propertyName = "make"; 
myCar[propertyName] = "Ford"; 
console.log(myCar.make)

위 코드가 성공적으로 실행되면 다음 출력이 표시됩니다.

Ford

생성자 기능

다음 두 단계를 사용하여 개체를 만들 수 있습니다.

Step 1 − 생성자 함수를 작성하여 객체 유형을 정의합니다.

다음은 동일한 구문입니다.

function function_name() { 
   this.property_name = value 
}

그만큼 ‘this’ 키워드는 현재 사용중인 개체를 참조하고 개체의 속성을 정의합니다.

Step 2 − 새 구문으로 개체의 인스턴스를 생성합니다.

var Object_name= new function_name() 
//Access the property value  

Object_name.property_name

new 키워드는 함수 생성자를 호출하고 함수의 속성 키를 초기화합니다.

Example − Using a Function Constructor

function Car() { 
   this.make = "Ford" 
   this.model = "F123" 
}  
var obj = new Car() 
console.log(obj.make) 
console.log(obj.model)

위의 예제는 함수 생성자를 사용하여 객체를 정의합니다.

위 코드가 성공적으로 실행되면 다음 출력이 표시됩니다.

Ford 
F123

새 속성은 항상 이전에 정의 된 개체에 추가 할 수 있습니다. 예를 들어, 다음 코드 스 니펫을 고려하십시오-

function Car() { 
   this.make = "Ford" 
} 
var obj = new Car() 
obj.model = "F123" 
console.log(obj.make) 
console.log(obj.model)

위 코드가 성공적으로 실행되면 다음 출력이 표시됩니다.

Ford 
F123

Object.create 메서드

객체는 또한 Object.create()방법. 생성자 함수를 정의하지 않고도 원하는 객체에 대한 프로토 타입을 만들 수 있습니다.

예

var roles = { 
   type: "Admin", // Default value of properties 
   displayType : function() {  
      // Method which will display type of role 
      console.log(this.type); 
   } 
}  
// Create new role type called super_role 
var super_role = Object.create(roles); 
super_role.displayType(); // Output:Admin  

// Create new role type called Guest 
var guest_role = Object.create(roles); 
guest_role.type = "Guest"; 
guest_role.displayType(); // Output:Guest

위의 예는 객체 역할을 정의하고 속성의 기본값을 설정합니다. 개체의 기본 속성 값을 재정의하는 두 개의 새 인스턴스가 생성됩니다.

위 코드가 성공적으로 실행되면 다음 출력이 표시됩니다.

Admin 
Guest

Object.assign () 함수

그만큼 Object.assign()메서드는 하나 이상의 소스 개체에서 대상 개체로 열거 가능한 모든 속성의 값을 복사하는 데 사용됩니다. 대상 개체를 반환합니다.

다음은 동일한 구문입니다.

Object.assign(target, ...sources)

Example − Cloning an Object

"use strict" 
var det = { name:"Tom", ID:"E1001" }; 
var copy = Object.assign({}, det); 
console.log(copy);  
for (let val in copy) { 
   console.log(copy[val]) 
}

위 코드가 성공적으로 실행되면 다음 출력이 표시됩니다.

Tom 
E1001

Example − Merging Objects

var o1 = { a: 10 }; 
var o2 = { b: 20 }; 
var o3 = { c: 30 }; 
var obj = Object.assign(o1, o2, o3); 
console.log(obj);  
console.log(o1);

위 코드가 성공적으로 실행되면 다음 출력이 표시됩니다.

{ a: 10, b: 20, c: 30 } 
{ a: 10, b: 20, c: 30 }

Note− 개체 복사와 달리 개체가 병합되면 큰 개체는 속성의 새 복사본을 유지하지 않습니다. 오히려 원본 객체에 포함 된 속성에 대한 참조를 보유합니다. 다음 예는이 개념을 설명합니다.

var o1 = { a: 10 }; 
var obj = Object.assign(o1); 
obj.a++ 
console.log("Value of 'a' in the Merged object after increment  ") 
console.log(obj.a);  
console.log("value of 'a' in the Original Object after increment ") 
console.log(o1.a);

위 코드가 성공적으로 실행되면 다음 출력이 표시됩니다.

Value of 'a' in the Merged object after increment 
11  
value of 'a' in the Original Object after increment 
11

속성 삭제

delete 연산자를 사용하여 속성을 제거 할 수 있습니다. 다음 코드는 속성을 제거하는 방법을 보여줍니다.

예

// Creates a new object, myobj, with two properties, a and b. 
var myobj = new Object; 
myobj.a = 5; 
myobj.b = 12; 

// Removes the ‘a’ property 
delete myobj.a; 
console.log ("a" in myobj) // yields "false"

위 코드가 성공적으로 실행되면 다음 출력이 표시됩니다.

false

코드 조각은 개체에서 속성을 삭제합니다. 이 예제에서는 in 연산자가 객체에서 속성을 찾지 못하므로 false를 인쇄합니다.

개체 비교

JavaScript에서 객체는 참조 유형입니다. 두 개의 별개 개체는 속성이 동일하더라도 결코 같지 않습니다. 이는 완전히 다른 메모리 주소를 가리 키기 때문입니다. 공통 참조를 공유하는 객체 만 비교시 참이됩니다.

Example 1 − Different Object References

var val1 = {name: "Tom"}; 
var val2 = {name: "Tom"}; 
console.log(val1 == val2)  // return false 
console.log(val1 === val2)  // return false

위의 예에서 val1 과 val2두 개의 서로 다른 메모리 주소를 참조하는 두 개의 별개 개체 따라서 동등성 비교시 연산자는 false를 반환합니다.

Example 2 − Single Object Reference

var val1 = {name: "Tom"}; 
var val2 = val1  

console.log(val1 == val2) // return true 
console.log(val1 === val2) // return true

위의 예에서 val1의 내용은 val2에 할당됩니다. 즉, val1의 속성 참조가 val2와 공유됩니다. 이제 객체가 속성에 대한 참조를 공유하므로 같음 연산자는 두 개의 다른 메모리 주소를 참조하는 두 개의 별개 객체에 대해 true를 반환합니다. 따라서 동등성 비교시 연산자는 false를 반환합니다.

객체 해체

용어 destructuring엔티티의 구조를 분해하는 것을 말합니다. JavaScript의 비 구조화 할당 구문을 사용하면 배열 또는 객체의 데이터를 별개의 변수로 추출 할 수 있습니다. 다음 예에서도 동일하게 설명됩니다.

예 1

개체를 구조화 할 때 변수 이름과 개체 속성 이름이 일치해야합니다.

<script>
let student = {
   rollno:20,
   name:'Prijin',
   cgpa:7.2
}

//destructuring to same property name
   let {name,cgpa} = student
   console.log(name)
   console.log(cgpa)

//destructuring to different name
   let {name:student_name,cgpa:student_cgpa}=student
   console.log(student_cgpa)
   console.log("student_name",student_name)
</script>

위 코드의 출력은 다음과 같습니다.

Prijin
7.2
7.2
student_name Prijin

예 2

변수와 할당이 서로 다른 두 단계에있는 경우 구조 분해 객체 구문은 () 예와 같이 ({rollno} = student) −

<script>
   let student = {
      rollno:20,
      name:'Prijin',
      cgpa:7.2
   }

   // destructuring to already declared variable
   let rollno;
   ({rollno} = student)
   console.log(rollno)

   // assign default values to variables

   let product ={ id:1001,price:2000} //discount is not product property
   let {id,price,discount=.10} = product
   console.log(id)
   console.log(price)
   console.log(discount)
</script>

위 코드의 출력은 다음과 같습니다.

20
1001
2000
0.1

예제 3

아래 예는 destructuring 사용 rest operator 중첩 된 객체를 파괴하는 방법에 대해 설명합니다.

<script>
   // rest operator with object destructuring
   let customers= {
      c1:101,
      c2:102,
      c3:103
   }

   let {c1,...others} = customers
   console.log(c1)
   console.log(others)

   //nested objects
   let emp = {
      id:101,
      address:{
         city:'Mumbai',
         pin:1234
      }
   }
   let {address} = emp;

   console.log(address)
   let {address:{city,pin}} = emp
   console.log(city)
</script>

위 코드의 출력은 다음과 같습니다.

101
{c2: 102, c3: 103}
{city: "Mumbai", pin: 1234}
Mumbai