Symbol(심볼)
지금까지 객체의 property key는 문자형으로 만듦.
1 이나 false를 key에 입력해도 출력하면 문자열로 반환됨을 볼 수 있음.
실제로 접근할 때에도 문자열로 접근할 수 있음.
이렇게 객체의 프로퍼티 키는 문자열로 가능한데 하나더 가능한게 심볼형임
-
심볼은 유일한 식별자를 만들때 사용함.
자료형은 달라도 내용만 일치하면 되는 동등연산자==도 false가 나옴 -
심볼을 붙일때 설명을 넣을 수 있음.
설명을 넣으면 디버깅 할때 편함.
유일성이 보장되어, 설명이 같아도 다르다고 나옴. -
심볼을 객체의 키로 사용하면
(컴퓨티드 프로퍼티로 넣음)
심볼로 만든 키를 가진 프로퍼티가 존재
-
그런데 오브젝트 메소드에서 키가 심볼형인 경우엔 건너뜀.
for in문을 써도 마찬가지
-
그럼언제써? 특정객체에 원본데이터는 건드리지 않고 속성을 추가할 수 있음.
다른사람이 만들어놓은 객체에 자신만의 속성을 추가해서 덮어써버리면 안돼니
그렇다고 엄청 길고 이상한 네임을 쓰는 것도 좋지 못함.
만약 그 원본객체 어딘가에 object.keys나 for in으로 순회하면서 데이터를 사용하고 있을 수도 있어.
내가 추가한 프로퍼티가 어디서 어떻게 튀어나올지 예측할 수 없음.
이렇게 심볼은 이름이 같더라도 모두 다른 존재임.
그런데 가끔 전역변수처럼 이름이 같으면 같은 객체를 가르켜야 할때가 있음.
이럴때 사용할 수 있는게 Symbol.for
Symbol.for():전역 심볼
코드 어디에서든 사용가능함.
이름을 얻고 싶다면 Symbol.keyFor()를 이용하면 됨.
()안에 변수를 넣어주면 생성할 때 넣어준 이름 'id'를 알려줌
description
전역심볼이 아닌경우 keyFor를 사용할 수 없음.
대신 description으로 가능.
숨겨진 symbol key 보는법
사실 심볼을 완전히 숨길 수 있는 방법은 없음.
Object.getOwnPropertySymbols()를 사용하면 심볼들만 볼 수 있음.
Reflect.ownKeys()는 심볼형을 포함한 객체의 모든 키를 보여줌.
그런데 대부분의 라이브러리 내장함수등은 이런 메서드들을 사용하지 않음, 그러니 걱정말고 유일한 프로퍼티를 추가하고 싶을 때 심볼 사용하기
예제
다른 개발자가 만들어 놓은 객체와
밑에 사용자가 접속하면 보는 메세지 부분이 멀리 떨어져 있다고 가정. 나는 밑을 못보고 저런식으로 showName을 추가함.
이럴경우 사용자는 오른쪽 콘솔창과 같이 말도 안되는 문장을 보게됨
이와 같은경우 저런식이 아닌 심볼을 사용해 작업함.
심볼로 만들었기에 for in문에 걸리지 않음.
메서드 호출시 잘 동작하고,
다른개발자가 만들어 놓은 코드에도 영향을 미치지 않는선에서 메서드 추가 가능.
- 심볼의 장점
이렇게 심볼을 사용하면 기존 user에 showName과 같이 내가 사용하고 싶은 이름의 메서드가 존재하는지 고민할 필요가 없음.
다른사람이 만들어놓은 프로퍼티를 덮어쓸 일도 없음.
숫자, 수학 Method(Number, Math)
toString()
괄호안에 숫자를 쓰면 그 진법으로 변환함.
Math
자바스크립트에는 수학과 관련된 프로퍼티와 메소드를 가지고 있는 내장객체 Math가 있음.
-
Math.PI
-
Math.ceil();올림
-
Math.floor();내림
-
Math.round();반올림
소수점 자릿수
원하는 소수점 자리까지만 반환하기
- 방법1.
- 방법2. toFixed()이용
- 기존 소수점 자리수보다 많으면? 0으로 채워짐
- 주의해야 할 점은 toFixed는 문자열을 반환한다는 것. 그래서 반환 후 숫자로 변환해 작업하는 경우 많음.
isNaN()
NaN인지 아닌지 판단
여기서 x가 NaN인지 아닌지를 판별할 수 있는건 isNaN이 유일함.
NaN은 신기하게도 자기자신과도 같지 않다고 판별함.
isNaN만이 NaN인지 아닌지 판단할 수 있음.
let a = 'min';
let b = 13;
let c = NaN;
console.log(isNaN(a));//true
console.log(isNaN(b));//false
console.log(isNaN(c));//true
parseInt()
문자열을 숫자로 바꿔줌
- Number()와 다른점은 문자와 혼용되어 있어도 동작한다는 점.
읽을 수 있는 부분까지는 읽고 문자를 만나면 숫자를 반환함.
- 위와 같이 숫자로 시작하지 않으면 NaN을 반환함.
let aa = '345a123';
console.log(parseInt(aa));//345문자 a를 만났더니 숫자를 더이상 읽지 않고 반환함.
- 두번째 인수를 받아서 진수를 지정할 수 있음.
두번째 인수 안받았을때는 nan였지만, 16진수로 지정하니 f3이 243(10진수)결과 얻음
위와 같이 2진수에서 10진수로 쉽게 바꿀 수 있음.
parseInt(10진수로 바꾸고싶은 숫자, 첫번째 인자로 받은 숫자는 n진수야) // 10진수로 받음.
parseInt(x,n); 숫자 x가 n진수 인데 10진수로 바꿔줘
parseFloat();
부동소수점을 반환. 앞서 parseInt는 소수점이하는 무시하고 정수만 반환했음.
- 예시코드
let a ='123.45';
let b = parseFloat(a);
console.log(b);//123.45
console.log(typeof(b));//number
let c = Number(a);
console.log(c);//123.45
let d = '13.45$';
let e = parseFloat(d);
console.log(e);//13.45
let f = '13.45%31.45';
let g = parseFloat(f);
console.log(g);//13.45
let gg = Number(f);
console.log(gg);//NaNMath.random()
0~1사이 무작위 숫자 생성
1~100사이 임의의 숫자를 뽑고 싶다면?
Math.floor(Math.random()*100)+1
저기서 100을 5로 바꾸면 0~5까지 랜덤한수
+1을 해주는 이유가 랜덤숫자가 0.00xx가 나올수 있기에 100곱하고 버림해주면 0됨
Math.max()/Math.min()
괄호안 숫자중 최소값, 최대값을 구함
Math.abs(): 절대값
Math.pow(n,m): 제곱
n의 m승을 구함.
2의 10승 1024
Math.sqrt(): 제곱근
루트16 = 4
문자열 메소드(String Method)
', ", `
html코드의 경우 작은따옴표''로 감싸는게 편함, 중간에 큰 따옴표가 있으니까.
반면 영어로 된 문장은 중간에 작은따옴표를 쓰니까 큰 따옴표로 감싸는게 편함
백틱`은 달러와 중괄호 ${}를 이용해 변수나 표현식을 넣을 수 있음.
- 백틱의 유용한점 1. 여러줄을 포함할 수 있다.
그냥쓰면 \n을 써야 줄바꿈
length
- 문자열 길이도 가능
보통 가입시 비밀번호 아이디 몇자이상 체크할때 사용하기도.
- 배열과 동일하게 특정 문자열 위치에 접근가능
- 하지만 배열과 다르게 한글자만 바꾸는 것 허용되지 않음.(밑에 예시와 같이 아무변화 없음.)
toUpperCase()/toLowerCase()
영어인경우 대소문자 변환 가능
str.indexOf(text)
- 문자열을 받아 문자가 몇번째 인덱스인지 알려줌
- 찾는 문자가 없는 경우 -1을 반환
- 주의할 점은 포함된 문자가 여러개라도 첫번째 위치만 반환함
- if문 쓸때 주의해야함
예를들어 위와 같이 쓰면 저 메시지 볼 수 없음.
왜냐면 hi로 시작하는 문장이라 indexof가 0이 되니까 false
그래서 -1보다 큰가로 비교하기
str.slice(n,m)
특정범위의 문자열만 반환하기
n부터 m까지 문자열만 반환함.
m에 5를 적으면 인덱스 4까지만 반환
(문자열이있으면 인덱스 n인 문자앞에서 짜르고 인덱스 m인 문자 앞에서 짜르고 함)
- 예시추가(음수를 쓰면 끝에서부터)
let a = "abcdefg";
let c = a.slice(-3);
console.log(c);//efg- str.slice(3,0)같은거 입력하면 아무것도 안찍힘.
str.substring(n,m)
n과 m사이 문자열 반환 n,m 바꿔도 동작
n부터 m까지가 아니고 그냥 n과 m사이
음수를 허용하지 않음 음수는 0으로 인식
str.substr(n,m)
n이 시작인것은 맞는데 m이 범위가 아니고 갯수
str.trim();앞 뒤 공백제거
str.repeat(n):n번 반복
문자열을 n번 반복
문자열도 비교가 가능하다
- 문자열의 숫자 얻는법 str.codePointAt();
console.log("a".codePointAt());//97
const str = 'ABC';
console.log(str.codePointAt(0)); // 65
console.log(str.codePointAt(1)); // 66
console.log(str.codePointAt(2)); // 67특정 인덱스 위치에 해당하는 유니코드 코드 포인트를 반환. 이때, str.codePointAt() 메서드의 괄호 안에 들어가는 숫자는 문자열 내의 인덱스를 의미.
+)추가로 괄호안에 아무것도 안쓰면 디폴트가 0임, 그리고 없는 인덱스 쓰면 undefined반환
console.log("a".codePointAt(0));//97
console.log("abc".codePointAt());//97
console.log("b".codePointAt(11));//undefined
- 숫자코드를 알고 있을때 문자를 얻기 String.formCodePoint();
실습
- 다음예시에서 숫자말고 문자만 찍기
- 금칙어 있을 때(indexOf 사용시 -1을 사용할 것!!)
- 금칙어 판별, includes 사용, 문자가 있으면 true 없으면 false를 반환함
인덱스 상관없이 문자가 있는지 없는지만 판단할때
