DevYoon
[JS] 데이터 타입 본문
데이터 타입
1️⃣ 데이터 타입의 종류는 어떤 것들이 있나요?
✏️ 데이터 타입이란…
프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등) 의 종류를 일컫는 말
JS의 데이터 타입 종류는?
원시 타입
1️⃣ Number
가능한 연산자 : + - / & %
같은 수 판별 : === (일치 연산자)
NaN : Not a Number, 유효하지 않은 숫자
let a = 0; let b = 0; let c = a / b; /* NaN */값이 NaN인지 궁금하다면 ➡️ isNaN(숫자) : true/false
무한대 : Infinity(양의 무한대) / -Infinity(음의 무한대)
2️⃣ String
문자열 붙이기 : 문자+문자
문자열 비교 : ===(일치 연산자)
길이 구하기 : 문자.length
인덱스 정보 사용 가능 ex) 문자[0]
문자열 메소드
'6'.repeat(3); 'hi surim'.includes(' surim'); 'what are you doing?'.startsWith('what '); 'I am doing FiNe'.endsWith('iNe'); 'Are you sure?'.indexOf(' yo'); 'Yeah I am sure'.slice(2, 5); 'I?doubt?that'.split('?'); 'Why would you doubt my word?'.split(''); 'You hAve BeEn DiSHonest'.toLowerCase(); 'No wAy!'.toUpperCase();정답
'6'.repeat(3); /* 666 */ 'hi surim'.includes(' surim'); /* true */ 'what are you doing?'.startsWith('what '); /* true */ 'I am doing FiNe'.endsWith('iNe'); /* true */ 'Are you sure?'.indexOf(' yo'); /* 3 */ 'Yeah I am sure'.slice(2, 5); /* 'ah ' */ 'I?doubt?that'.split('?'); /* ['I', 'doubt', 'that'] */ 'Why would you doubt my word?'.split(''); /* ['W', 'h', 'y', ' ', 'w', 'o', 'u', 'l', 'd', ' ', 'y', 'o', 'u', ' ', 'd', 'o', 'u', 'b', 't', ' ', 'm', 'y', ' ', 'w', 'o', 'r', 'd', '?'] */ 'You hAve BeEn DiSHonest'.toLowerCase(); /* 'you have been dishonest' */ 'No wAy!'.toUpperCase(); /* 'NO WAY!' */
3️⃣ Boolean
false
0, -0, null, false, NaN, undefined, ""true : false를 제외한 모든 값
주의사항
let isOkay = new Boolean(true); /* 사용 불가! */ let isRealOkay = true; /* 사용 가능 */
4️⃣ null
의도적으로 변수에 값이 없음을 명시할 때 사용
null 값을 가진 변수를 typeOf 연산자로 연산해보면 ➡️ Object!
let isNull = null; console.log(typeof isNull); /* object */ console.log(typeof isNull === null); /* false */ console.log(isNull === null); /* true */- 자바스크립트 설계 상의 오류
- null인지 확인할 때는 ===(일치 연산자)를 사용해야 함
5️⃣ undefined
선언 이후 값을 할당하지 않은 변수가 가지는 값
존재하지 않는 객체 프로퍼티에 접근할 경우 반환되는 값
주의사항
null과 undefined를 비교할 때는 ==(동등 연산자) 말고 === (일치 연산자)를 사용하자!
null === undefined /* false */ null == undefined /* true */ isNaN(1 + null) /* false */ isNaN(1 + undefined) /* true */
6️⃣ symbol ⭐ ES6에서 추가!
객체 타입
1️⃣ object
- property와 method를 포함할 수 있는 독립적 주체
✏️ 참고글 : https://velog.io/@surim014/웹을-움직이는-근육-JavaScript란-무엇인가-part.2
2️⃣ 심벌 타입은 뭐죠?
Symbol
- 변경 불가능한 원시 타입의 값
- 다른 값과 중복되지 않는 고유한 값
- 오브젝트의 충돌이 없는 유일한 프로퍼티 키를 만들기 위해 사용할 수 있음
어떻게 사용할까?
const symbol = Symbol('symbol')Symbol 함수를 호출하여 생성
심볼 값은 Symbol 함수에 의해 생성, 외부로 노출되지 않아 확인 불가능함
문자열 인자는 심볼값에 의한 description으로, 선택적으로 넣을 수 있으며 디버깅 용도로 사용됨
메서드를 사용하면 심볼값은 암묵적으로 래퍼 객체를 생성함
래퍼 객체 : 일시적으로 임시 객체를 만들어서 메서드나 프로퍼티를 사용할 수 있게 한 후, 역할이 끝나면 다시 원시값으로 돌아옴
https://velog.io/@kim-jaemin420/Wrapper-Object래퍼-객체-jyt19omsconst a = Symbol('a') a.description // "a" a.toString() // "Symbol(a)" !a // false a + 'hi' // Uncaught Type Error
사용가능한 모든 심볼은 JS 엔진이 관리하는 전역 심볼 레지스트리에 저장
Symbol.for과 Symbol.keyFor을 통해 레지스트리에 접근
- 전역 심볼 레지스트리 테이블과 런타임 환경 사이에서 심볼 값을 전해주는 역할
Symbol.for
키와 일치하는 심볼이 있는지 검색
있으면 해당 심볼 반환
없으면 새로 생성하여 반환
const symA = Symbol.for('키 값')
Symbol.keyFor
심볼 값을 인수로 받아서 전역 심볼 레지스트리에 저장된 심볼 값 키를 가져옴
Symbol.keyFor(symA) /* '키 값' */
✏️ 심볼에 대해 더 알고 싶으시다면
🔗 https://another-light.tistory.com/105
🔗 https://ko.javascript.info/symbol
3️⃣ 데이터 타입은 왜 필요할까요?
데이터를 저장하는 경우
- 한정된 메모리 공간, 이 데이터를 저장하려면 필요한 메모리 공간은?
- 변수에 할당하려는 값의 데이터 타입에 따라 확보해야 할 메모리 공간의 크기가 달라짐
값을 참조해서 사용하는 경우
- 값을 참조하기 위해서는 한 번에 읽어 들여야 할 메모리의 크기를 알아야 함
- 데이터를 참조하는 과정에서 얼마의 메모리 공간을 읽어 들일지 알기 위해 필요
- ex) Number는 8바이트 단위로 읽지 않으면 원하는 값을 가져올 수 없음!
데이터를 해석하는 경우
값을 저장하고 참조한 후에 사용하려고 가져왔더니 2진수 형태로 저장되어 있다면?
01000001 65 or A2진수를 어떻게 해석할지 결정하는 방법으로 데이터 타입이 쓰일 수 있음
✏️ 참고글 : https://velog.io/@tpgus758/ad
4️⃣ 정적 타이핑이 뭔가요?
정적 타이핑이란?
변수를 선언할 때 데이터 타입을 써줘야 하는 언어
ex) C, Java …
5️⃣ 동적 타이핑이 뭔가요?
동적 타이핑이란?
변수를 선언할 때 데이터 타입을 써주지 않아도 되는 언어
ex) JS, Python …
- 동적 타이핑 언어는 런타임에 타입 지정이 실행됨
- 즉, 값을 할당할 때 타입이 정해짐
그렇다면, 동적 타이핑이 정적 타이핑보다 좋을까?
let name = 'hello';
console.log(name.toUpperCase()); /* HELLO */
name = 1;
console.log(name.toUpperCase()); /* Uncaught TypeError */➡️ 자유롭고 편하지만, 예상치 못한 에러를 막을 수 없고 실행 후에야 에러 발생 여부를 알 수 있음
➡️ 자바스크립트 개발자 설문 보고서 '스테이트 오브 자바스크립트 2021'
가장 원하는 기능은 정적타이핑
⭐ 정적 타이핑인 자바스크립트 ➡️ 타입스크립트
✏️ 참고글