JavaScript 유형: 기호

symbol는 JavaScript의 기본 데이터 유형입니다. 함수Symbol()는 항상 고유한 유형symbol의 값을 반환합니다. symbol는 식별자를 만드는 데 사용되며(고유한 특성 때문에) 대부분 개체 속성으로 사용됩니다.

심볼 만들기



let symbol1 = Symbol();
let symbol2 = Symbol("text");

🚨 Symbol() 에는 생성자가 없고 new Symbol() 를 지원할 수 없습니다. 그렇게 하면 오류가 발생합니다.

let symbol1 = new Symbol(); // Symbol is not a constructor

문자열을 전달하여 symbol를 생성할 때 문자열을 symbol로 만들지 않습니다. 여전히 매번 새로운symbol를 생성합니다. 설명은 아무 영향도 미치지 않는 레이블일 뿐입니다.

console.log(Symbol("text") === Symbol("text")); // false

기호를 객체 속성으로 사용



대괄호 표기법을 사용하여 symbol를 개체 속성으로 사용합니다.

let userId = Symbol("id");

let employee = {
    name: "Parwinder",
    [userId]: 727
}

console.log(employee[userId]); // 727

// above log is not similar to using the string literal "userId"
console.log(employee["userId"]); // undefined

기호로 숨겨진 속성 만들기



아무도 수정하거나 덮어쓸 수 없는 숨겨진 속성을 개체에 만들 수 있습니다.

let car = {
    name: "BMW"
};

let hiddenField = Symbol("price");

car[hiddenField] = 70000;

console.log(car); // { name: 'BMW', [Symbol(price)]: 70000 }
console.log(car[hiddenField]); // 70000
symbol를 사용하여 객체에 숨겨진 속성을 생성하면 적절한 상황에서 상당한 이점이 있을 수 있습니다.
  • 숨겨진 속성은 car 개체를 볼 수 없으므로 다른 모듈, 라이브러리 또는 사용자에게 영향을 주지 않습니다.
  • 다른 사람이 개체에 대한 숨겨진 속성을 원하는 경우 고유성으로 인해 해당 개체와 충돌하지 않습니다.
  • symbol가 객체에 숨겨진 것처럼 보일 수 있지만 객체의 모든 기호를 가져올 수 있는 Object.getOwnPropertySymbols()가 있습니다.

    let car = {
        name: "BMW"
    };
    
    let hiddenField = Symbol("price");
    let anotherHiddenField = Symbol("release");
    
    car[hiddenField] = 70000;
    car[anotherHiddenField] = "07/18/2020";
    
    console.log(Object.getOwnPropertySymbols(car)); // [ Symbol(price), Symbol(release) ]
    

    Gotcha: 기호는 for..in 에 표시되지 않습니다.



    let car = {
        name: "BMW",
        model: "Cooper",
        color: "Pearl White"
    };
    
    let hiddenField = Symbol("price");
    let anotherHiddenField = Symbol("release");
    
    car[hiddenField] = 70000;
    car[anotherHiddenField] = "07/18/2020";
    
    console.log(car[hiddenField]); // 70000
    console.log(car[anotherHiddenField]); // 07/18/2020
    
    for (let properties in car) {
        console.log(properties); // name, model, color
    }
    

    좋은 웹페이지 즐겨찾기