☀️ 안녕하세요 ! 오늘은 javascript의 자료형 중 심볼형(Symbol)에 대하여 알아보겠습니다. ☀️
지금까지 공부한 바에 의하면 여태까지 객체 property key의 자료형으로는 오직 문자형만 가능했습니다. 그러나 객체 property key로 허용되는 자료형이 하나 더 있는데, 바로 오늘 공부할 심볼형입니다. 🎾🥕
심볼은 변경이 불가능한 고유한 값임을 먼저 말씀드리며, 바로 예시 코드를 통해 심볼을 어떻게 생성하고 또 어떻게 활용하는지 알아보겠습니다.
1. 심볼의 생성
심볼의 생성은 간단합니다. "Symbol()"함수를 사용하면 심볼값을 만들 수 있습니다. 괄호 안에 들어가는 값은 심볼 이름이라 불리우는 것인데, 단지 해당 심볼에 대한 description 목적일 뿐 코드적으로 주는 영향은 전혀 없습니다. 그저 디버깅 등의 과정에서 다른 사람들이 쉽게 알아볼 수 있게 이름표를 달아둔 것에 불과하므로 괄호 안에 아무것도 적지 않아도 무관합니다. 참고로 만약 이 이름표의 내용을 확인하고 싶을 땐 위 코드처럼 id1.description을 하면 이름값을 알 수 있습니다. 또 심볼은 매번 무조건 고유한 값을 생성해내므로, 이름표가 같고 다르고와 관계없이 당연히 윗 코드에서 id1과 id2는 같지 않다는 결과가 나오게 되죠. 일반적으로 생성되는 모든 심볼값은 언제나 고유합니다. 물론 필요에 의해 의도적으로 같은 심볼값을 갖도록 만들 수는 있죠. 아래의 코드를 봅시다. 🌳
Symbol.for() 함수를 사용하면, 위 코드와 같이 이름이 같을 경우 하나의 심볼로 보장받을 수 있게 됩니다. 이러한 심볼을 전역심볼이라고 부릅니다. 이 전역심볼의 이름을 찾고 싶을 경우 Symbol.keyFor()를 사용해주시면 됩니다.
2. 심볼의 활용
앞서 심볼은 객체 key의 자료형으로 쓰인다고 말씀드렸는데요, 그 이유가 무엇일까요? 우선 첫 번째로는 ☝🏻기존에 이미 객체에 존재하는 key와, 새로 추가하려는 key의 이름이 겹쳐서 기존 값을 덮어쓰게 되는 일을 미연에 방지하고자 사용합니다. 심볼은 매번 고유한 값을 갖게 생성되므로 기존의 그 어떤 key와도 이름이 겹치지 않을 겁니다. 따라서 특정 객체에 아무런 영향도 주지 않으면서 새로운 속성을 추가할 수 있게 됩니다.
두 번째로는 ✌🏻 특정 객체에 숨겨진(hidden) 속성을 추가하고 싶을 때 쓰일 수 있습니다.
mimi 객체에 심볼형 변수인 id를 속성으로 추가하는 코드입니다. 속성값은 아이디를 출력해주는 함수 형태네요. 보통 객체에 속성을 추가할 때는 "mimi.id"나 "mimi[id]" 뭘 써도 상관없었으나, 심볼형 속성을 추가할 땐 대괄호 형태로만 추가 가능하다는 점 꼭 유의해 주세요. 직접 코드를 작성해보면 아시겠지만 점 형태로 추가하면 hidden속성으로 추가되지 않게 됩니다.
아무튼 mimi[id]를 통해 id 속성을 객체에 넣은 후, for...in 구문을 돌려보면 정말 신기하게도 기존 속성인 name이나 age속성은 출력되지만 id 속성은 출력되지 않는답니다. 대신 바로 아래 코드처럼 mimi[id](); 와 같이 직접 호출하여 호출할 수는 있습니다. 비슷한 맥락의 아래 코드를 눈으로 따라가보며 다시한번 지금까지의 내용을 상기시켜 봅시다. 👀
3. 내장 심볼
지금까지 다룬 바와 같이, Symbol() 함수를 이용하여 직접 심볼을 생성하고 사용할 수도 있지만, 특별한 용도로 사용하기 위해 javascript 내에 미리 생성되어 상수로서 존재하고 있는 내장심볼들도 존재합니다. 이들은 Symbol 함수의 프로퍼티로서 존재하고 있습니다. (Symbol 함수도 객체의 일종이므로 프로퍼티 가질 수 있음)
사실 여러가지 내장 심볼은 중요한 내용이 아니지만 내장 심볼의 대표적인 예시인 "Symbol.iterator" 때문에 해당 내용을 잠시 가져오게 되었습니다. javascript는 이 심볼을 key로 갖는 메소드가 정의된 객체를 iterable 객체로 인식합니다. iterable 객체란 for...of 등의 문법을 이용하여 각 요소를 반복할 수 있는 객체를 의미합니다. 해당 내용에 대해서는 아래의 포스팅에서 더 자세히 다루고 있으니 처음 보시는 분들은 꼭 참고하시길 바랍니다!
[javascript] iterable과 iterator 정리 - https://with-mimi.tistory.com/m/entry/javascript-iterable%EA%B3%BC-iterator
[javascript] iterable과 iterator 정리
🚨🚨🚨🚨 (= 반복 / 순회 가능한 객체 ) ☝🏻 iterable (이터러블) : for ...of 등의 문법을 이용하여 각 요소를 반복할 수 있는 객체. 이터러블 프로토콜을 준수한 객체. 이터러블 프로토콜을 준수
with-mimi.tistory.com
오늘은 javascript의 자료형 Symbol(심볼형)에
대해 간단히 다루어 보았습니다. 🐰
오늘도 방문해주셔서 감사합니다. 좋은 하루 되세요 !
'javascript' 카테고리의 다른 글
| [javascript] setTimeout, setInterval 스케줄링 함수 (7) | 2024.03.20 |
|---|---|
| [javascript] 구조 분해 할당 (Destructing assignment) (25) | 2024.03.19 |
| [javascript] iterable과 iterator 정리 (20) | 2024.03.18 |
| [javascript] Generator(제너레이터) 함수 (7) | 2024.03.17 |
| [javascript] async, await (7) | 2024.03.15 |