Object.freeze () 대 const

Object.freeze()constES6에서 사용하기 위해 전환하는 편리한 방법처럼 보입니다 .

코드에서 둘 다 발생하는 경우가 있거나 불변 데이터로 작업하는 선호되는 방법이 있습니까?

Object.freeze()지원하는 모든 브라우저를 사용할 때까지 사용해야 const하고 const대신 사용으로 전환해야 합니까?

const와 Object.freeze완전히 다른 두 가지 있습니다.

const바인딩에 적용됩니다 ( "변수"). 변경 불가능한 바인딩을 만듭니다. 즉, 바인딩에 새 값을 할당 할 수 없습니다.

Object.freeze값 ,보다 구체적으로 객체 값 에서 작동 합니다 . 객체를 불변으로 만듭니다. 즉, 속성을 변경할 수 없습니다.

ES5 Object.freeze에서는 프리미티브에서 작동하지 않으며 아마도 const객체보다 더 일반적으로 선언 됩니다. ES6에서 프리미티브를 고정 할 수 있지만을 지원합니다 const.

반면에 const객체를 선언하는 데 사용되는 것은 "동결"되지 않으며 전체 객체를 다시 선언 할 수는 없지만 키를 자유롭게 수정할 수 있습니다. 반면에 고정 된 개체를 다시 선언 할 수 있습니다.

Object.freeze 또한 얕으므로 중첩 된 객체에 재귀 적으로 적용하여 보호해야합니다.

var ob1 = {
   foo : 1,
    bar : {
        value : 2   
    }
};
Object.freeze( ob1 );

const ob2 = {
   foo : 1,
    bar : {
        value : 2   
    }
}

ob1.foo = 4;  // (frozen) ob1.foo not modified
ob2.foo = 4;  // (const) ob2.foo modified

ob1.bar.value = 4;  // (frozen) modified, because ob1.bar is nested
ob2.bar.value = 4;  // (const) modified

ob1.bar = 4;  // (frozen) not modified, bar is a key of obj1
ob2.bar = 4;  // (const) modified

ob1 = {};  // (frozen) ob1 redeclared
ob2 = {}; // (const) ob2 not redeclared

요약:

const와 Object.freeze()완전히 다른 목적을 제공합니다.

• const즉시 선언해야하고 재 할당 할 수없는 변수를 선언해야합니다. 에 의해 선언 된 변수 const는 블록 범위이며로 선언 된 변수 처럼 기능 범위가 아닙니다var
• Object.freeze()객체를 받아들이고 동일한 객체를 반환하는 메서드입니다. 이제 개체의 속성을 제거하거나 새 속성을 추가 할 수 없습니다.

예 const:

예 1 : 재 할당 할 수 없음 const

const foo = 5;

foo = 6;

다음 코드는 const키워드 로 선언 된 변수 foo를 재 지정하려고하므로 오류를 발생시킵니다 . 재 지정할 수 없습니다.

예 2 : 할당 된 데이터 구조 const는 변경 가능

const object = {
  prop1: 1,
  prop2: 2 
}

object.prop1 = 5;   // object is still mutable!
object.prop3 = 3;   // object is still mutable!

console.log(object);  // object is mutated

이 예에서는 const키워드를 사용하여 변수를 선언하고 여기 에 객체를 할당합니다. object라는이 변수에 재 할당 할 수는 없지만 객체 자체를 변경할 수 있습니다. 기존 속성을 변경하거나 새 속성을 추가하면 효과가 있습니다. 개체에 대한 변경 사항을 비활성화하려면 필요합니다 Object.freeze().

예 Object.freeze():

예 1 : 고정 된 개체를 변형 할 수 없습니다

object1 = {
  prop1: 1,
  prop2: 2
}

object2 = Object.freeze(object1);

console.log(object1 === object2); // both objects are refer to the same instance

object2.prop3 = 3; // no new property can be added, won't work

delete object2.prop1; // no property can be deleted, won't work

console.log(object2); // object unchanged

이 예제에서 우리가 호출 Object.freeze()하고 object1인수로 줄 때 함수는 이제 '냉동 된'객체를 반환합니다. ===연산자를 사용하여 새 객체의 참조를 이전 객체와 비교 하면 동일한 객체를 참조한다는 것을 알 수 있습니다. 또한 속성을 추가하거나 제거하려고 시도해도 아무런 영향이 없음을 알 수 있습니다 (엄격 모드에서는 오류가 발생 함).

예 2 : 참조가있는 객체가 완전히 고정되지 않았습니다

const object = {
  prop1: 1,
  nestedObj: {
    nestedProp1: 1,
    nestedProp2: 2,
  } 
}


const frozen = Object.freeze(object);

frozen.prop1 = 5; // won't have any effect
frozen.nestedObj.nestedProp1 = 5; //will update because the nestedObject isn't frozen

console.log(frozen);

이 예제는 중첩 객체 (및 기타 참조 데이터 구조 별)의 속성이 여전히 변경 가능함을 보여 줍니다. 따라서 Object.freeze()참조 (예 : 배열, 객체) 속성이있을 때 객체를 완전히 '고정'시키지 않습니다.

var obj = {
  a: 1,
  b: 2
};
Object.freeze(obj);
obj.newField = 3; // You can't assign new field , or change current fields

위의 예제는 객체를 불변으로 만듭니다.

다음 예제를 보자.

const obj = {
  a: 1,
  b: 2
};
obj.a = 13; // You can change a field
obj.newField = 3; // You can assign new field.

오류가 발생하지 않습니다.

하지만 그렇게하면

const obj = {
      a: 1,
      b: 2
    };
obj = {
 t:4
};

"obj is read-only"와 같은 오류가 발생합니다.

다른 사용 사례

const obj = {a:1};
var obj = 3;

던질 것이다 Duplicate declaration "obj"

또한 mozilla docs const 설명 에 따르면

const 선언은 값에 대한 읽기 전용 참조를 만듭니다. 변수 식별자를 재 할당 할 수 없다는 것만으로 보유한 값이 변경 불가능하다는 의미는 아닙니다 .

이 예는 babeljs ES6 기능에 따라 작성되었습니다.

간단하게하자.

그들은 다르다. 각 사례를 설명하는 코드에 대한 주석을 확인하십시오.

Const- let값을 재 할당 할 수없는 블록 범위 변수 입니다.

그것의 의미는

{
 const val = 10;  // you can not access it outside this block, block scope variable

}

console.log(val); // undefined because it is block scope 

const constvalue = 1;
constvalue = 2; // will give error as we are re-assigning the value;
const obj = { a:1 , b:2};

obj.a = 3;
obj.c = 4;
console.log(obj); // obj = {a:3,b:2,c:4} we are not assigning the value of identifier we can 
                  // change the object properties, const applied only on value, not with properties
obj = {x:1};     // error you are re-assigning the value of constant obj 
obj.a = 2 ;     // you can add, delete element of object

const는 블록 범위이며 그 값은 다시 할당되지 않는다는 것을 완전히 이해하고 있습니다.

Object.freeze: 객체 루트 속성은 변경할 수 없으며 더 많은 속성을 추가 및 삭제할 수 없지만 전체 객체를 다시 할당 할 수 있습니다.

var x = Object.freeze({data:1,
    name:{
    firstname:"hero", lastname:"nolast"
    }
});

x.data = 12;  // the object properties can not be change but in const you can do
x.firstname ="adasd"; // you can not add new properties to object but in const you can do

x.name.firstname = "dashdjkha"; // The nested value are changeable 

//The thing you can do in Object.freeze but not in const

x = { a: 1};  // you can reassign the object when it is Object.freeze but const its not allowed

// 둘 다 비슷한 것은 중첩 된 객체를 변경할 수 있다는 것입니다.

const obj1 = {nested :{a:10}};
var obj2 =  Object.freeze({nested :{a:10}});

obj1.nested.a = 20; // both statement works
obj2.nested.a = 20;

감사.