Symbol은 생성자가 기본형 값을 반환하는 내장 객체이다. Symbol의 값은 변경 불가능한 기본값(primitive value)이며 고유한 값이기 때문에 충돌하지 않도록 할 때 많이 쓰인다.
- Symbol();
Symbol의 경우 매번 호출할 때마다 새로운 고유한 값을 생성하기 때문에, 객체의 속성 key로 사용하여 충돌하지 않게 하는 등의 역할을 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const sym1 = Symbol("코딩쥐");
const sym2 = Symbol("코딩쥐");
console.log(sym1 === sym2); // false
</script>
</body>
</html>
Symbol의 경우 숫자로 변환하거나 문자열을 추가하는 등의 값을 변경할 수 없으며 for~in 문에서 Symbol key를 가지고 있는 경우 열거되지 않는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// symbol의 경우 숫자로 변환하거나 문자열을 결합하거나 할 수 없다.
let sym = Symbol("12345");
let obj = {
[sym]: "678",
1 : "1",
2 : "2"
}
try{
+sym
}catch{
console.log("숫자 변경 불가"); // 숫자 변경 불가
}
try{
sym+"문자열 결합"
}catch{
console.log("문자열 결합 불가능"); // 문자열 결합 불가능
}
// 템플릿 문자열로 불러올 수 없다.
try{
`${sym}`
}catch{
console.log("템플릿 문자열 불가능"); // 템플릿 문자열 불가능
}
// for ~ in의 순회대상에서 제외된다.
for (const key in obj) {
console.log(obj[key]); // 1, 2
}
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript : DOM의 키보드 이벤트에 대해서 (0) | 2024.08.12 |
|---|---|
| JavaScript : 비동기를 처리하는 방법 (Promise) (0) | 2024.08.11 |
| JavaScript : Geolocation API를 사용하여 현재 위치를 가져와보자 (0) | 2024.08.11 |
| JavaScript 내장함수 : Object관련 내장함수 (0) | 2024.08.10 |
| JavaScript : 사용자 지정 데이터 특성(dataset)을 이용해보자 (0) | 2024.08.05 |
| JavaScript : 구조분해할당(Distructuring)에 대해 알아보자 (1) | 2024.08.05 |
| JavaScript : Array관련 내장함수 (0) | 2024.08.04 |
| JavaScript 내장함수 : String관련 내장함수 (0) | 2024.08.04 |