모던자바스크립트 Deep Dive에서 발췌한 데이터 타입, 연산자 관한 내용을 적어보자
데이터 타입
데이터 타입
- 데이터 타입(줄여서 타입)은 값의 종류를 말함.
- ES6는 7개의 데이터 타입(원시타입 6개, 객체 타입)을 제공. 원시 타입(primitive type)과 객체 타입(object type)으로 분류 가능.
출처 : https://yunjeongloper.github.io/2019/11/19/core-javascript-1.html
-
Number(숫자 타입)의 값 1과 String(문자열 타입)의 값 '1'은 다른 값 : 숫자 타입의 값과 문자열 타입의 값은 생성한 목적과 용도가 다름. 확보해야 할 메모리 공간의 크기도 다르고 메모리에 저장되는 2진수도 다르며 읽어 드령 해석하는 방식도 다름.
- 숫자 타입 : 주로 산술 연산을 위해 생성.
- 문자열 타입 : 주로 텍스트를 화면에 출력하기 위해 생성.
-
개발자는 명확한 의도를 가지고 타입을 구별해서 값을 생성 > JS 엔진은 타입을 구별해서 값을 취급
숫자 타입(Number)
- 자바스크립트는 하나의 숫자 타입이 존재(모든 수를 실수로 처리)
- 숫자 타입은 추가적으로 세 가지 특별한 값도 표현 가능
- Infinity : 양의 무한대
- -Infinity : 음의 무한대
- NaN : 산술 연산 불가(not-a-number)
console.log(10/0); // Infinity
console.log(10/-0); // -Infinity
console.log(1 * 'String'); // NaN문자열 타입(String)
- 문자열 타입은 텍스트 데이터를 나타내는 데 사용
- 작은따옴표(''), 큰따옴표(""), 백틱으로 텍스트를 감싸서 표현
var string;
string = '문자열';
string = "문자열";
string = `문자열`; // 백틱(ES6) - 다른 타입의 값과 달리 문자열을 따옴표로 감싸는 이유는 키워드나 식별자 같은 토큰과 구분하기 위해서 > 따옴표로 감싸지 않으면 JS 엔진의 식별자나 키워드 같은 토큰으로 인식
- 따옴표로 문자열을 감싸서 공백도 문자로 포함시킬 수 있음
템플릿 리터럴
- ES6부터 템플릿 리터럴이라고 하는 새로운 문자열 표기법이 도입됨
- 템플릿 리터럴은 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능 제공
- 템플릿 리터럴은 일반 문자열과 비슷해 보이지만 따옴표 대신 백틱을 사용해 표시함
var template = `Template literal`;
console.log(template); // Template literal
멀티라인 문자열
- 일반 문자열과는 달리 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄바꿈이 허용되며, 모든 공백도 있는 그대로 적용됨
- 예시
var template = `<ul>
<li><a href="#">Home</a></li>
</ul>;
console.log(template);
출력의 결과
<ul>
<li><a href="#">Home</a></li>
</ul>
표현식 삽입
- 문자열은 문자열 연산자 +를 사용해 연결 가능
- +연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작, 그 외의 경우에는 덧셈 연산자로 동작
var first = "Ung-mo"
var last = "Lee"
console.log('My name is ' + first + ' ' + last + '.');
출력의 결과
My name is Ung-mo Lee.
- 표현식을 삽입하려면 ${}으로 표현식을 감싼다. 이 때 표현식의 평가 결과가 문자열이 아니더라도 문자열로 타입이 강제로 변환되어 삽입된다.
- 표현식 삽입은 반드시 템플릿 리터럴 내에서 사용해야 함
var first = "Ung-mo"
var last = "Lee"
console.log(`My name is ${first} ${last}.`);
출력의 결과
My name is Ung-mo Lee.
--------
console.log(`1+2 = ${1+2}`);
출력의 결과
1 + 2 = 3
불리언 타입
- 불리언 타입의 값은 논리적 참, 거짓을 나타내는 true와 false 뿐
var foo = true;
console.log(foo); // true
foo = false
console.log(foo); // false
undefined 타입
- undefineds는 개발자가 의도적으로 할당하기 위한 값이 아니라 JS 엔진이 변수를 초기화 할 때 사용하는 값
- 변수에 값이 없다고 명시하고 싶을 때는 null을 할당
null 타입
- 프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용
- 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미
<!DOCTYPE html>
<html>
<body>
<script>
var element = document.querySelector('.myClass');
console.log(element); // null
</script>
</body>
</html>
심벌 타입
- 심벌은 ES6에서 추가된 7번째 타입으로 변경이 불가능한 원시 타입의 값
- 심벌 값은 다른 값과 중복되지 않는 유일무이한 값
- 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용
- 심벌 이외의 원시 값은 리터럴을 통해 생성하지만 심벌은 Symbol 함수를 호출해 생성
var key = Symbol('key');
// 객체 생성
var obj = {};
// 이름이 충돌할 위험이 없는 유일무이한 값이 심벌을 프로퍼티 키로 사용한다.
obj[key] = 'value';
console.log(obj[key]); // value객체 타입
- 자바스크립트는 객체 기반의 언어
- 자바스크립트를 이루고 있는 거의 모든 것이 객체
데이터 타입의 필요성
데이터 타입에 의한 메모리 공간의 확보와 참조
- 값은 메모리에 저장하고 참조할 수 있어야 함
- 메모리에 값을 저장하려면 먼저 확보해야 할 메모리 공간의 크기를 결정해야 함
- JS 엔진은 데이터 타입, 즉 값의 종류(데이터 타입)에 따라 정해진 크기의 메모리 공간을 확보 함
데이터 타입에 의한 값의 해석
- 데이터 타입은 값의 종류를 말함. JS의 모든 값은 데이터 타입을 가짐
- 데이터 타입이 필요한 이유
- 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
- 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
- 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해
동적 타이핑
- 정적 타입 언어는 변수의 타입을 변경할 수 없으며, 변수에 선언한 타입에 맞는 값만 할당할 수 있음
- 정적 타입 언어는 컴파일 시점에 타입 체크를 수행
- JS는 정적 타입 언어와 다르게 변수를 선언할 때 타입을 선언하지 않음. 다만 var, let, const 키워드를 사용해 변수를 선언.
- JS의 변수는 정적 타입 언어와 같이 미리 선언한 데이터 타입의 값만 할당할 수 있는 것이 아니다. 어떠한 데이터 타입의 값이라도 자유롭게 할당 가능.
- 동적 타이핑 : JS의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)되며, 재할당에 의해 변수의 타입은 언제든지 변할 수 있음
연산자
연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자라고 한다.
산술 연산자
- 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만듬
- 산술 연산이 불가능한 경우, NaN을 반환한다.
- 산술 연산자는 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 구분
이항 산술 연산자
- 이항 산술 연산자는 2개의 피연산자를 산술 연산하여 숫자 값을 만든다
- 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과가 없다
- 이항 산술 연산자의 종류
+: 덧셈-: 뺄셈*: 곱셈/: 나눗셈%: 나머지
단항 산술 연산자
- 단항 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.
- ++(증가)/--(감소) 연산자는 피연산자의 값을 변경하는 부수 효과가 있다
- 이항 산술 연산자의 종류
++: 증가--: 감소+: 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.-: 양수를 음수로, 음수를 양수로 반전한 값을 반환한다.
- 활용 예시
var x = 1;
x++;
console.log(x);
> x = x +1 // 2
x--;
console.log(x);
> x = x -1 // 1-단항 연산자는 피연산자의 부호를 반전한 값을 반환
-(-10); // 10
- true; // -1
-'Hello'// NaN
문자열 연결 연산자
+연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작. 그 외의 경우는 산술 연산자로 동작.- 예시
'1'+2; // '12'
1+'2'; // '12'
1+2; // 3
> true는 1으로 타입이 변환된다
1 + true; // 2
> false는 0으로 타입이 변환된다
1 + false; // 1
> null는 0으로 타입이 변환된다
1 + null; // 1
> undefined는 숫자로 타입이 변환되지 않는다
+undefined; // NaN
1 + undefined; // NaN
암묵적 타입 변환(타입 강제 변환)
JS 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다
할당 연산자
- 할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당
- 할당 연산자는 좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수 효과가 있음
- 할당 연산자의 종류
- 문자열 연결 연산자의 예시
var str = 'My name is ';
str += 'Lee' // str = str + 'Lee'
console.log(str); // 'My name is Lee'
비교 연산자
- 비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환
- 비교 연산자는 if문이나 for문과 같은 제어문의 조건식에서 주로 사용.
동등/일치 비교 연산자
- 동등 비교 연산자와 일치 비교 연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환. 그런데 비교하는 엄격성의 정도가 다름
- 동등 비교(==) 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교 > 결과를 예측하기 어렵고 실수 가능성 때문에 일치비교연산자(===) 사용하는 경향이 있음
동등비교
5 == 5; // true
타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 동등하다
5 == '5'; // true- 일치 비교(===) 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환
일치비교
5 === 5; // true
일치 비교 연산자는 암묵적 타입 변환을 하지 않음
5 === '5'; // false일치 비교 연산자에서 NaN을 주의하자. 자신과 일치하지 않는 유일한 값이다.
NaN === NaN; // false
숫자 0도 주의하자. 양의 0과 음의 0이 있는데 이들을 비교하면 true를 반환한다
0 === -0; // true
0 == -0; // true
대소 관계 비교 연산자
- 대소 관계 비교 연산자는 피연산자의 크기를 비교하여 불리언 값을 반환
삼항 조건 연산자
- 삼항 조건 연산자는 조건식의 평가 결과에 따라 반환할 값을 결정. 부수효과는 없다.
- 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값
ex) var result = score >= 60 ? 'pass' : 'fail';
-> scroe가 60 이상일 때, result 값으로 pass 반환, scroe가 60 이하일 때, result 값으로 fail 반환 - 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문.
논리 연산자
- 논리 연산자는 우항과 좌항의 피연산자(부정 논리 연산자의 경우 우항의 피연산자)를 논리 연산
- 예시
// 논리합(||) 연산자
true || true; // true
true || false; // true
false || true; // true
false || false; // false
// 논리곱(&&) 연산자
true && true; // true
true && false; // false
false && true; // false
false && false; // false
// 논리부정(!) 연산자
!true; // false
!false; // true
- 논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가됨
쉼표 연산자
- 쉼표 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환
var x, y, z;
x= 1, y=2, z=3; // 3
그룹 연산자
- 소괄호('()')로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가
- 연산자의 우선순위를 조절할 수 있음
- 그룹 연산자는 연산자 우선순위가 가장 높음
10 *2 + 3 ; // 23
10 *(2 + 3) ; // 50
typeof 연산자
- typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환
- typeof 연산자로 null 값을 연산해보면 "null"이 아닌 "object"를 반환(버그)
- 값이 null 타입인지 확인할 때는 typeof 연산자를 사용하지 말고 일치 연산자(===)를 사용
var foo = null;
typeof foo === null; // false
foo === null; // true
- 선언하지 않은 식별자를 typeof 연산자로 연산해 보면 ReferenceError가 발생하는 것이 아니라 undefined를 반환
지수 연산자
- ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환
- 예시
2 ** 2; // 4
3 ** 2; // 9
2 ** 0; // 1
2 ** -2; // 0.25
- 음수를 거듭제곱 밑으로 사용해 계산하려면 괄호로 묶어야 함
(-5) ** 2 ; 25- 지수 연산자는 다른 산술 연산자와 마찬가지로 할당 연산자와 함께 사용할 수 있음
var num = 5;
num **= 2; // 25
- 지수 연산자는 이항 연산자 중에서 우선순위가 가장 높음
2 * 5 ** 2; // 50
연산자의 부수 효과
- 일부 연산자는 다른 코드에 영향을 주는 부수 효과가 있음
- 부수효과가 있는 연산자 : 할당 연산자(=), 증가/감소 연산자(++/--), delete 연산자
연산자 우선순위
- 연산자 우선순위란 여러 개의 연산자로 이뤄진 문이 실행될 때 연산자가 실행되는 순서를 말한다. 우선순위가 높을 수록 먼저 실행됨
- 그룹 연산자
()가 우선순위가 가장 높다. 이것을 사용해서 우선순위를 명시적으로 조절하느 것을 추천
♪(^∇^*) 워-후!!（＾∀＾*）ﾉｼ