ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 객체의 프로퍼티 지정 방법과 Symbol이란?
    자바스크립트 2021. 12. 30. 21:06

    Symbol은 ES6부터 추가된 원시타입 자료형이다.

     

    많이 쓰이진 않지만 앞서 포스트했던 for in, for of와 연관이 있기때문에 포스트해본다.

     

     

    일단 Symbol이란 개발자가 객체 자료형 안에 심어줄 수 있는 비밀스러운 프로퍼티이다.

     

    prototype과 은근 비슷하다고 생각할 수 있다.

     

    prototype은 부모 생성자의 유전자로써 자식 객체가 부모 prototype에 심어진 변수 또는 함수를 참조해 사용할 수 있는것이라면,

     

    Symbol은 실제로 객체가 갖고있는 프로퍼티이다.

     

     

    선언 방식을 보자. 

    변수에 Symbol('넣을 Symbol의 설명');

     

    이렇게 선언해주고,

     

    객체명[심볼명] = 넣고싶은 정보;

     

    이렇게 해주면 정보가 저장된다.

     

    주의할 점은 객체 선언 후 프로퍼티를 넣어줄 때,

     

    p.weight = 73;

     

    보통 이렇게 넣어주지만

     

    p['weight'] = 73

     

    이렇게 넣어줄 때도있다. 

     

    새로운 프로퍼티를 넣고싶을 때 key값은 대괄호 안에 'key값'으로 정의하지만

     

    Symbol은 p[weight] = 73; 이런식으로 ''가 없음에 주의하자.

     

    뭐 String이 아니라 변수를 넣는거니까 당연하긴하지만 은근 헷갈릴 수 있다.

     

    아니면 뭐

     

    이렇게 객체를 만들 때 [Symbol명]: 177

     

    이렇게 직접적으로 key값에 대괄호를 치고 넣어줄 수도 있다.

     

     

    prototype은 해당 객체를 콘솔 출력했을 때 부모 prototype이 가진 변수나 함수는 나오지않지만,

     

    Symbol은 모두 출력이된다.

     

    이렇게 나온다.

    즉, p[born]이 출력된다.

     

     

    하지만 Symbol의 진가는 for in으로 반복문을 돌렸을 때 나온다.

    이렇게 돌리면 감지되지않는다.

     

    왜일까.

     

    정답은 Symbol로 심어진 프로퍼티는 enumarablefalse이기때문이다.

     

    따라서 직접 객체를 들춰보면 값이 나오지만

     

    저렇게 for in으로 돌리면 정보가 감춰진다.

     

     

    정보를 은닉하는 속성답게 Symbol은 for of가 작동하는 자료형들에도 심어져있다.

     

    for of 반복문이 먹히는 String과 배열형 자료의 변수는 

     

    변수명[Symbol.iterator]() 의 출력에 반응하지만,

     

    iterator Symbol이 심어져있지않은 객체 자료형 변수는 아무것도 출력되지않는다.

     

    즉, 오브젝트형에는 for of 반복문을 가능하게하는 [iterator] Symbol이 없기때문

     

    콘솔 에러가 난다.

     

     

    정리)

     

    1. Symbol는 비밀스러운 프로퍼티로 객체에 심어진다.

     

    2. Symbol로 지정된 프로퍼티는 enumarable이 false가 되며 for in으로 출력할 수 없다.

     

    3. 객체형을 제외한, 반복문이 가능한 자료형들에는 [Symbol.iterator]이라는 Symbol이 심어져있는데, 

    이 Symbol이 for of로 해당 변수 안에서 반복문을 돌릴 수 있게 해준다.

     

    강의 결론이 재밌어서 가져왔다 ㅋㅋ

     

    또 Symbol의 중복 이슈도 있는데 쓰기 귀찮아서 걍 사진으로 넣는다.

     

Designed by Tistory.