[자바스크립트]기본 타입 (Primitive value)

자바스크립트가 처리 할 수 있는 데이터들이 특정되어있습니다. 이를 유형별로 묶어 자료형이하는데요. 자바스크립트에는 여덟 가지 기본 자료형이 있습니다.
가령 프로그밍을 할 때 0은 숫자로 쓰일 때와 문자로 쓰일 때 처리하는 방식이 다르기 때문에
정확하게 자료형을 이해하고 목적에 맞도록 정확히 쓰는 것이 중요합니다.

1. 문자형

자바스크립트에서는 문자를 따옴표(' ' / "")로 감싸주면 문자열이라고 인식합니다.
작은 따옴표('')나 큰 따옴표("")의 기능적 차이는 없습니다.

const quote = ""꿈은 꾸는 자만이 꿀 수 있다""

인용한 명언을 문자열로 넘겨주고 싶은데 위와 같이 입력하면 에러가 발생합니다.
큰따옴표("")안에 큰따옴표("")를 썼기 때문인데요. 이를 해결하기 위해

const quote = '"꿈은 꾸는 자만이 꿀 수 있다"'

큰따옴표("")대신 작은따옴표('')로 묶어주면 됩니다.
이와 같이 다른 문장안에 따옴표가 들어간다면 문자열을 나타내는 따옴표는 다른 따옴표로 쓰면 됩니다.

그런데 "how're you?"같은 문장을 쓴다면 어떻게 해야할 까요?
이럴 때 백틱을(``)써주면 됩니다.

최신 자바스크립트가 지원하는 백틱은 따옴표와 달리 다른 특징이 몇가지가 있는데요.
1. 백틱은 따옴표와 달리 줄바꿈이 가능하고
2. ${here}안에 원하는 변수나 표현식을 넣어주고 백틱으로 감싸주면 문자열 중간에 변수나 문자열을 넣을 수 있습니다

2. 숫자형

숫자형은 정수, 부동소수점 숫자와 Infinity(무한대), NaN 등과 같은 특수 숫자 값이 포함됩니다.

만약 10000000이라는 숫자같이 0이 많이 붙는 숫자를 입력해야 하는데 실수로 0이 하나가 빠지게 된다면 아찔한 상황이 발 생할 수 있겠네요.이럴 때 지수(e)를 써줄 수 있습니다.

산술 연산자

연산자는 대표적으로 '+'(덧셈), '-'(뺄셈), '/'(나눗셈), '*'(곱셈)이 있죠.
이외에도 자바스크립트에서 쓸 수 있는 생소한 연산자가 몇가지 있습니다.

1. %: 나머지 연산자
나머지 연산자는 두수를 나눈뒤 나머지를 정수로 반환해 줍니다

alert(5 % 2); // 나머지인 1을 출력

2. : 거듭제곱 연산자
ab): a를 b번 곱한 결과를 반환합니다

alert(2**3)//8출력

3. ++ / -- 증가, 감소 연산자
변수에 담긴 수를 1씩 늘리거나 줄이는 연산자 입니다.
핵심은 변수에만 쓸 수 있다는 점입니다. 만약 5++같이 숫자에 직접 사용한다면 에러가 발생합니다

'+'연산자와 문자열

'+'연산자가 더하기의 역할을 하는 것은 숫자 뿐만 아니라 문자열에도 쓰일 수 있습니다.
문자열을 더한다. 즉 문자열을 병합한다는 것이죠. 주의해야할 것은 '+'를 사용할 때는 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 형변환 됩니다.

alert('123' +  4); //'1234'을 출력

parseInt, parseFloat과 Number

Number()를 사용하여 숫자열로 변형할 때는 피연산자가 숫자가 아니면 형변환에 실패 합니다

alert(Number('3월')) //NaN

만약 문자열에서 숫자만 가지고 오고 싶을 때 parseInt와 parseFloat을 사용하면 됩니다.

alert(parseInt('3월'))//3(숫자만 뽑아서 줌)

주의할 점은 무조건 숫자만 뽑아주지 않는 다는 것입니다. 두 함수는 불가능할 때까지 문자열에서 숫자를 읽는데요.
만약 'a123'과 같이 처음부터 문자가 나오면 그 즉시 숫자를 읽는게 중단되기 때문에 NaN을 반환합니다

parseInt 정수로 바꾸기 parseInt(3.14) = 3
parseFloat 소수로 바꾸기 parseFloat('3.14) = 3.14

3. 불린형

불린형은 true와 false 밖에 없습니다. 그대로 참과 거짓을 나타냅니다.

논리연산자

&&: AND 연산자

피연산자가 모두 참일 때만 true를 반환합니다.

AND 연산자의 추가기능 - 첫번째 falsy를 찾는다

result = value1 && value2 && value3;

And연산자의 동작 순서는 다음과 같습니다.
1. 왼쪽에서 오른쪽으로 순서대로 평가를 시작합니다.
2. 피연산자를 차례로 만나면서 불린형으로 변환합니다. 만약 변환 후 값이 false가 나왔다면 거기서 연산을 멈추고 false인 피연산자의 원래 값을 반환합니다.
3. 모든 피연산자가 true인 경우 마지막 피연산자의 원래 값을 반환합니다.

||: OR 연산자

인수중 하나라도 true면 true를 반환하고 모두 false인 경우만 false를 반환합니다.

or 연산자의 추가기능

result = value1 || value2 || value3;

or연산자의 동작 순서는 다음과 같습니다.

1. 왼쪽에서 오른쪽으로 순서대로 평가를 시작합니다.
2. 피연산자를 차례로 만나면서 불린형으로 변환합니다. 만약 변환 후 값이 true가 나왔다면 거기서 연산을 멈추고 true인 피연산자의 변환 전 원래 값을 반환합니다.
   즉 나머지 값은 평가를 하지 않는거죠.
3. 모든 피연산자가 false가 나온 경우 마지막 피연산자의 원래 값을 반환합니다.

이러한 특성으로 다음과 같은 용도로 or 연산자를 활용할 수 있습니다.

1. 첫번째 truthy얻기

let firstTopping = "";
let secondTopping = "";
let thirdTopping = "Pepperoni"
alert(firstTopping || secondTopping || thirdTopping ||"Cheese Pizza")// "Pepperoni"

or연산자 연산 방법에 따라 truthy값인 thirdTopping의 값을 반환합니다

2.단락평가

OR연산자는 truthy를 만나면 나머지 값은 연산하지 않은채 평가를 멈추는 데요. 이를 단락평가라 합니다. 단락평가는 연산자의 왼쪽조건이 falsy일 때만 실행하고자 할 때 쓰입니다.

NOT 연산자 : !

true를 false로 false를 true로 변환합니다.
!!를 사용하면 값을 불린형으로 형변환 할 수 있습니다

falsy(false와 같은 값)

-불린형으로 형변환 할 경우 false가 되는 값

1. false
2. '' (빈 문자열)
3. 0
4. NaN
5. undefined
6. null

4. undefined vs Null

undefined

보통 반환할 결괏값이 없을 때 사용됩니다. 변수는 선언했지만 값을 할당하지 않았을 때 해당 변수에 undefiend가 자동으로 저장됩니다.

null

undefined와 같이 빈 값이긴 하지만 의도적으로 빈값을 명시하고 싶을 때 주로 사용합니다.
변수가 비어있거나 알 수 없는 상태라는 것을 나타내고 싶을 때는 undefined 보다 null이 더 적합합니다. undefinded는 프로그램에서 빈 값일 때 자동으로 할당되는 값이니깐요~!

제로초님의 "ES2021 자바스크립트"강의와 모던 자바스크립트를 바탕으로 공부한것들을 정리한 내용입니다.
제로초 - ES2021 자바스크립트
모던 자바스크립트 - 자료형