[DEEP DIVE] 5. 표현식과 문
Js나 다른 컴퓨터 공학 전반에서 자주 사용되는 용어의 의미에 대해서 주의 깊게 살펴보자! 1. 값 평가 ❔ 식을 해석해서 값을 생성하거나, 참조 하는 것 10 + 20; 위의 식은 평가되어 숫자 값 30을
hwdev.tistory.com
여기서, 모든 값은 데이터 타입을 가진다고 했었다
Js의 데이터 타입에 대해서 자세히 알아보자!
1. 숫자 타입
C, Java 는 정수, 실수, 차지하는 메모리 공간에 따라 int, float, double등 다양한 숫자 타입이 존재한다
Js는 하나의 숫자 타입만 존재한다
var inteager = 10;
var double = 10.12;
var negative = -20;정수만 표현하기 위한 데이터 타입이 따로 존재 X
그리고, 모든 수를 실수로 처리한다.
var binary = 0b01000001;
var otcal = 0o101;
var hex = 0x41
위의 값을 참조하면 모두 10진수로 해석된다!
모든 수를 실수로 처리 하므로, 정수로 표시된다고 해도 실수라는 것을 의미한다
console.log(1 === 1.0) // true
console.log(4 / 2) // 2
console.log(3 / 2) // 1.5 -> 실수 / 실수 = 실수특별한 3가지 값
- Infinity : 양의 무한대
- -Infinity : 음의 무한대
- Nan(Not - a - Number) : 산술 연산 불가 ❗대소문자를 구별하므로 Nan, nan으로 표현하지 않도록 주의
2. 문자열 타입
텍스트 데이터 를 나타내는데 사용.
작은 따옴표(' '), 큰 따옴표(" "), 백틱(` `) 으로 감싸서 사용
var day = Monday // ReferenceError : Monday is not defined프로그램에서 사용하려는 문자열을 감싸지 않고 사용하게 되면, 키워드나 식별자 같은 토큰으로 인식한다
그래서, 구별 해주기 위해 꼭 감사줘야 한다!
3. 템플릿 리터럴
이스케이프 시퀀스 사용하지 않고 편리한 문자열 처리 기능을 제공
백틱(` `) 을 통해서 사용
📌ES5의 문자열 처리
var str = 'hello
world.';
// SyntaxErrorvar template = '<ul>\n\t<li><span> Hello World! </span><li>\n<ul>'
console.log(template)
줄바꿈이 허용되지 않고, 사용하기 위해서는 이스케이프 시퀀스를 사용해야한다.
var first = 'hyun-woong'
var last = 'choi'
console.log('My name is ' + first + ' ' + last + '.');문자열 연산자 +를 사용해서 변수와 문자열을 연결할 수 있다.
+ 연산자는 피연산자중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작, 그 이외의 경우에는 덧셈 연산자로 동작
📌 ES6의 템플릿 리터럴 사용해서 표현식 삽입하기
var first = 'hyun-woong'
var last = 'choi'
console.log(`My name is ${first} ${last}`);console.log(`1 + 3 is ${1 + 3}`);4. 불리언 타입
True or False 로 프로그램 흐름 제어
5. undefined 타입
키워드를 사용해서 처음 선언한 변수는 암묵적으로 undefined로 초기화.
확보한 메모리 공간에 처음 값이 할당될때 까지 빈 상태로 두지 않고 undefined로 초기화.
참조했을때, undefined가 반환 된다면 초기화되지 않은 변수임을 알수 있다.
var name;
console.log(name) // undefined선언으로 메모리 공간만 확보하고, 의도적으로 값이 없는것을 명시하고 싶을때는?
-> null을 할당한다!
6. null 타입
null 타입의 값은 null이 유일하다.
대소문자를 구별 하므로 Null, NULL 등과는 다르다
📌변수에 null을 할당한다는 것의 의미
이전에 참조하던 값을 더 이상 참조하지 않겠다.
메모리에 할당되어 있던 값을 명시적으로 제거한다는 의미
더이상 참조하지 않는 메모리 공간에 대해서 가비지 콜렉션을 수행한다
좀 별로..
var name = 'woong'
console.log(name) // woong
name = null
console.log(name) // null📌null을 반환하는 함수
함수가 유효한 값을 반환할 수 없는 경우에는 명시적으로 null을 반환한다
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<span class="name">my name is woong!</span>
<script>
// HTML 문서에 username을 클래스로 가지고 있는 요소가 없기 때문에 null을 반환
var userName = document.querySelector('username')
userName.innrText = "choi"
</script>
</body>
</html>7. symbol 타입
변경 불가능한 원시 타입의 값, 다른 값과 중복되지 않는 유일무이한 값
❕❕symbol 이외의 원시값은 모두 리터럴을 통해 생성하지만 symbol은 함수를 호출해서 생성한다
외부에 노출되지 않는다.
var userName = Symbol('userName')
var user = {};
// 이름이 충돌할 위험이 없는 중복되지 않는 값을 프로퍼티 값(key)으로 사용
user[userName] = 'woong'
console.log(user[userName])
console.log(user)
8. 객체 타입
Js의 데이터 타입은 크게 원시 vs 객체 타입으로 나뉨
자바스크립트를 이루고 있는 거의 모든 것이 객체!
원시 이외의 타입은 모두 객체 타입이다
9. 타입의 필요성
10, 'hello', true, [], {} 등등.. Js 에는 정말 다양한 데이터 타입이 존재한다.
왜 타입이 꼭 필요한 것일까?
값은 메모리에 저장되고 참조할 수 있어야 한다
하나의 변수를 선언할때, 몇 바이트 크기의 메모리 공간을 사용해야 손실과 낭비가 없을까?
var age = 2424 리터럴로 표현된 값을 저장하기 위해서 메모리 공간을 확보하고, 그 공간에 24를 2진수 형태로 저장한다.
숫자값을 저장하기 위해 필요한 공간의 크기를 알아야한다
변수에 할당되는 데이터 타입에 따라, 확보해야 하는 메모리 공간의 크기가 달라진다
숫자타입의 값 24를 저장하기 위해서 Js 엔진은 8바이트의 메모리 공간을 확보한다.
var age = 24;
console.log(age);이제 선언된 age 변수를 참조해서 콘솔 창에 띄우는 경우에 대해서 생각해보자
age를 통해서, 숫자 타입의 값 24가 저장되어 있는 선두 메모리 셀의 주소로 찾아간다
시작 주소는 알고 있는데 어디까지 읽어야 하는지 어떻게 알수 있을까?
age 변수에는 24 인 숫자 타입의 값이 할당되어 있으므로 숫자로 인식해서 8바이트 단위로 끊어서 읽어들인다.
어디까지 데이터를 읽어야 할지 알았다.
하지만, 2진수로 메모리에 저장된 값을 어떤 리터럴로 바꿀지 어떻게 알 수 있을까?
마찬가지로 24가 숫자타입 이므로 메모리에 저장된 2진수 값들을 읽어올때, 숫자로 해석한다
0100 0001 을 숫자타입으로 읽으면 65 이지만 문자열로 읽으면 'A'이다
📌필요한 메모리 공간의 크기를 알기 위해서 사용한다
📌한번에 읽어들이는 메모리 공간의 크기를 알기 위해서 사용한다
📌메모리에 저장되어 있는 2진수를 어떻게 해석할지에 대해 알기 위해서 사용한다
10. 동적 타이핑
C Java 같은 언어들은 정적 타입 언어 이다.
int a = 10;
char c = 'h';명시적으로 타입을 선언 해줘야 한다.
그리고, 한번 선언한 데이터 타입을 변경할 수 없다.
선언한 데이터 타입과 일치하는 값만 변수에 할당할 수 있다.
컴파일 시점에 타입 체크를 하고, 통과하지 못하면 프로그램의 실행 자체를 막는다. 타입의 일관성 강제
📌동적 타입 언어 Js
변수를 선언할 때, 타입을 선언하지 않고 var, let, const와 같은 키워드를 사용한다
동적 타입 언어이기 때문에, 어떠한 데이터 타입의 값이라도 자유롭게 할당이 가능함
var test = 1
console.log(typeof test) // number
test = 'hi'
console.log(typeof test) // string
test = false
console.log(typeof test) // boolean
test = null
console.log(typeof test) // null
test = Symbol()
console.log(typeof test) // symbol제일 처음 확보한 메모리 공간에서 값을 지웠다 썻다를 반복하는 것이 아니라, 값을 변경할때 마다 메모리 주소가 달라진다는 것을 기억하자!
더이상 사용하지 않는 값을 가지고 있는 메모리 주소는 가비지 콜랙션에 의해서 처리
'javascript > DeepDive' 카테고리의 다른 글
| [DEEP DIVE] 9. 타입 변환과 단축 평가 (3) | 2022.10.03 |
|---|---|
| [DEEP DIVE] 8.제어문 (0) | 2022.09.30 |
| [DEEP DIVE] 7. 연산자 (0) | 2022.09.28 |
| [DEEP DIVE] 5. 표현식과 문 (0) | 2022.09.26 |
| [DEEP DIVE] 4. 변수 (0) | 2022.09.25 |