[책] CH2 상수와 변수

※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다.

기본 자료형 - 문자열, 숫자, 불

(그리고 null, bigint, undefined, symbol타입까지가 기본 자료형이지만 설명을 생략한다)

문자열

이스케이프 문자 활용하기

> "동해물과 백두산이\n마르고 닭도록"
'동해물과 백두산이
마르고 닳도록'
> "이름\t나이"
'이름    나이'

> " \ "
"  "

> "\"
Uncaught SyntaxError: Invalid or unexpected token
(따옴표 안 닫았다는 그것)

> "\\ \\ \\ \\"
'\ \ \ \'
(라는데 크롬 콘솔창에 실험하면 '\\ \\ \\ \\' 그대로 뜬다. 왜지??)
(아! console.log()로 찍어줘야 '해석'되어서 나온다)

> console.log('[\\\]') 
[\]
(=> \\\: 두번의 역슬래시를 '\'로 인식 후, 세번째 역슬래시 즉 홀로 있는 역슬래시는 '인식하지 않는다'는 규칙에 따라 저렇게 된듯) 
(=> 그렇다면 홀수 개의 연이은 역슬래시는 무조건 하나가 떨어져 나가고 2로 나눈 개수개로 치환되겠군!)

> console.log('[\\ \\\\\]')
[\ \\]
> console.log('[\\\ \\\]')
[\ \]

이스케이프 문자(\ 역슬래시)를 마스터하엿다..! 결과는 훌륭했다!

문자열에 이스케이프 문자(\)를 사용 가능한 것에 더해,

인덱싱이 가능하고

.length로 길이를 구할 수 있다.

숫자

정수와 소수를 모두 하나의 자료형 ‘number’로 사용한다.

연산자 우선순위는 사칙연산의 그것과 같다.

괄호로 하위 순위를 우선해줄 수 있다. ⇒ (5 + 3) * 2

숫자 연산자:

불

true / false

비교 연산자:

불(논리) 부정 연산자: !true

불 논리합/논리곱 연산자: &&(또는) 와 ||(혹은)

( +추가)

불리언 연산

falsy (거짓 같은 값): 불리언 문맥(형변환이 일어날 때)에서 false로 평가되는 값들. 8가지가 있음.

false, 0, -0, 0n, '', null, undefined, NaN

항상 truthy로 판단되는 자료형: Array, Object

불리언 연산이 적용되는 경우: if-else문의 조건식에서, &&, ||, !의 논리 연산에서, for문의 조건문에서,

논리 연산에서 조건을 여러 개 사용하는 것을 chaining이라고 부른다.

(chaining 조건에서) 논리합(&&)의 경우 가장 처음 발견한 falsy값을 반환한다.

‘String’ && true && [] && {} && undefined ⇒ undefined 반환

아무 falsy값도 발견하지 못했다면 마지막 truthy값을 반환한다.

‘String’ && true && [] && {} && 1 ⇒ 1 반환

논리곱(||)의 경우 가장 처음 발견한 truthy 값을 반환한다.

false || '' || 0 || null || 'Value!!' || undefined ⇒ ‘Value!!’

아무 truthy 값도 발견하지 못했다면 마지막 falsy값을 반환한다.

false || '' || 0 || null || 'Value!!' || NaN ⇒ NaN

이를 응용한 sugar syntax!

각 조건이 존재하는지 condition1부터 체크하며 값이 존재하면 해당 조건에 있는 값을 최종적인 name값으로 설정하고 싶을 때, 원래라면

let name;

if (condition1)
	name = condition1;
else if (condition2)
	name = condition2;
else if (condition3)
	name = condition3;
else
	name = '강승현';

이렇게 쓸 코드를, OR 논리곱 연산자를 응용하여 이렇게 쓸수도 있다:

const condition1 = false
const condition2 = null
const condition3 = '벤자민'
const name = condition1 || condition2 || condition3 || '강승현';
name // '벤자민'

⇒ 앞에서부터 쭉쭉 보다가 ‘벤자민’이라는 truthy한 값이 나오자마자 이를 반환하여 name에 저장하였다.

마찬가지로 AND 논리 연산자도 모든 값이 truthy할 때 맨 뒤의 값을 변수로 할당하고 싶을 때 사용할 수 있다.

자료형 검사

typeof 연산자: typeof(10) 혹은 typeof 10

> typeof ‘문자열’
‘string’

> typeof(typeof 10)
'string'

💡

자바스크립트의 typeof 연산자의 결과로는 ‘string’, ‘number’, ‘boolean’, ‘undefined’, ‘function’, ‘object’, ‘symbol’, ‘bigint’ 이렇게 총 8가지가 나온다고 한다. (⇒ 이 중 ‘object’와 ‘function’을 뺀 6가지에 ‘null’값을 포함한 7개가 원시형(기본 타입)이다)

템플릿 문자열: 백틱(`)으로 감싼 문자열. 내부에 ${~} 기호를 사용하여 문자열 내부에서 표현식을 계산한 결과를 출력하는 게 가능해졌다.

> console.log(`13 + 2 = ${13 + 2}`)
13 + 2 = 15

(그냥)문자열: 따옴표(’)로 감싼 문자열. ${~} 기호를 사용할 시 이 모양 그대로를 출력한다.

> console.log('13 + 2 = ${13 + 2}')
13 + 2 = ${13 + 2}

== 연산자와 === 연산자:

===와 !==는 ‘값과 자료형이 모두 같은지’를 비교

==와 !=는 ‘값이 같은지’만 비교
```
> '10' === 10
false
> '10 == 10
true
```

한 마디로 “==” 이게 다른 자료형끼리도 유연하게 비교를 해준다는 의미.

자료형까지 깐깐하게 비교하려면 “===”, 대강 뜻만 통하게 만들려면 “==”.

“==”검사가 false면 “===”검사는 볼 것도 없이 false.

“===” 비교는, 타입 검사를 정확히 하고 싶을 때 주로 쓰이는 듯 하다.

> typeof('10') === 'string'

자바스크립트의 수퍼 플레이 비교 예시:

> 1 == "1"
true
> false == "0"
true
> "" == []  => Boolean([]) = true 지만 이같은 경우는 []를 false로 변환하고 계산한다고 한다.  
true
> 0 == []
true

!과 !! :

불타입을 반대로 부정하는 “!” : !10 ⇒ false

불타입이 아닌 타입을 불타입으로 바꿔주는 “!!” : !![] ⇒ true

⇒ 논리 부정을 두 번 하니까 원래대로의 참/거짓 값에, 타입만 불타입이 되는 것!

[]는 타입은 object고 불형으로 바꾸면 true가 나온다(Boolean()으로 하든지 !![]으로 하든지).

{}도 타입은 object고 불형으로 바꾸면 true가 나온다(Boolean(), !!{} 양 방법 다).

근데 [] === {}는 false임은 물론이고 [] == {} 마저도 false이다.

또한 []==는 나머지 한 쪽이 “”이거나 0인 경우 true가 됐는데, =={}는 0과 “” 모두 false를 뱉는다. 심지어 {}== 이렇게 {} 부터 시작해주면 Unexpected token ==’ 에러가 뜬다.

⇒ 뭐가 정확히 false로 치환돼서 비교되는지 모르겠다.

⇒ 그냥 “” == [] 와 0 == []만 특수 케이스라고 생각하고, 다른 모든 false가 될 수 있는 (불이 아닌)값들은 명시적으로 불 타입으로 바꿔줘야(Boolean()으로든 !으로든) 서로 등가 비교가 가능하다고 일단 정리해놓자.

// 명백한 boolean과 boolean이 아니지만 false값을 갖는 것들의 비교:
> NaN == false
false
> !NaN == !null
true
> !!"" == !{}
true
> !!{} == !undefined
true
> !"1" == !{}
true

추가: REPL 시나리오

10 === 10
// Print: true

10 === 100
// Print: false

10 !== 100
// Print: true

10 !== 10
// Print: false

'10' === 10
// Print: false

'10' == 10
// Print: true

'10' !== 10
// Print: true

'10' != 10
// Print: false

syntax sugar 예시 - 인간이 읽고 쓰기에 더 간결하고 분명한 방식으로 코드 문법을 (재)정의한 것.
+= -= variable++ variable-- 등이 바로 ‘구문 설탕’이다.

상수와 변수

const 상수 : 변하지 않는 값

let 변수 : 바꿀 수 있는 값

상수와 변수를 선언하고 거기 값을 할당한다.

상수를 다룰 때 발생 가능한 오류error 모든 경우의 수 3종:

똑같은 이름으로 또 선언(과 할당)하려고 한 경우:

> const dog = "cute"
undefined
> const dog = "handsome"
Uncaught SyntaxError: Identifier 'dog' has already been declared

선언만 하고 할당까지 한꺼번에 끝내지 않은 경우:

> const pi
Uncaught SyntaxError: Missing initializer in const declaration

한 번 선언(하고 할당)한 상수를 또 할당하려고 한 경우:

> const dog = "handsome"
undefined
> dog = "awesome"
Uncaught TypeError: Assignment to constant variable.

변수를 다룰 때 발생 가능한 오류error:

상수 때와 같은 경우로 2, 3번 오류는 없다.

콘솔에서는 편의를 위해 1번 에러를 발생시키지 않는다. 즉,

const name = ‘dog’

const name = ‘cat’

이렇게 중복으로 해도 된다. 변수 중복 선언도 된다.

근데

const name = ‘dog’

let name = ‘cat’

이렇게 상수/변수 교차 중복은 1번 에러를 잘 띄운다. 아마 상수나 변수로 “상자”가 정해졌는데 그걸 바꾸겠다고 하니 안된다고 하는 것 같다.

변수에 적용할 수 있는 연산자:

복합 대입 연산자:
- a += 1
- a -= 1
- a *= 1
- a /= 1
- a %= 1
```
> let value = 10
undefined
> value /= 2
5
```

증감 연산자:
- a++ (후위postfix: a를 쓰고서 1을 더해줌)
- a—
- ++a (전위prefix: 1을 먼저 더해주고서 a를 사용)
- —a
```
> let number = 10
> alert(number++)
> alert(++number)
> alert(number--)
> alert(--number)

결과:
10
12
12
10
```

Undefined 자료형이 나타나는 2가지 경우:

💡

Uncaught ReferenceError와 짝인 경우. 즉, 선언하지도 않은 식별자를 불러댄 경우. >typeof(고양이) ⇒ ‘undefined’ >고양이 ⇒ Uncaught ReferenceError…

💡

변수를 선언만 한 상태(값을 할당하지 않은 상태)인 경우. 해당 식별자는 undefined 자료형이 된다. 상수는 선언 시 할당까지 필수이므로 값이 없는 상수는 존재할 수 없음. >let 고양이; typeof(고양이) ⇒ ‘undefined’

💡

그리고… 변수/상수 선언과 할당을 하고 콘솔창에서 Enter 를 눌렀을 때 결과로 뜨는 것도 경우라면 경우.

자료형 변환 - 문자열, 숫자, 불

문자열 입력받기: prompt(’경고창에 띄울 말을 적어주세요’, ‘할 말:’)

불 입력받기: confirm(’수락하시겠습니까?’)

숫자 자료형으로 변환하기: Number(”27”)

>Number(”$27”)

NaN (Not a Number) ⇒ 타입은 숫자형(”number”)지만 수로 나타낼 수 없는 것을 뜻함.

>typeof(Number(”$27”))

“number”

(+ 추가)

NaN에 대하여:

NaN이 나타나는 경우: 숫자가 아닌 값을 숫자로 변환한 경우.

NaN을 판별할 수 있는 두 가지 방법: 현재 값이 NaN이거나 숫자로 변환했을 때 NaN이 된다면 isNaN()이 true를 반환한다. Number.isNaN()은 현재 값이 NaN이어야만 true를 반환한다.

참고로 NaN은 다른 모든 값과 비교했을 때 같지 않으며, 다른 NaN과도 같지 않다.

NaN === NaN;        // false
Number.NaN === NaN; // false
isNaN(NaN);         // true
isNaN(Number.NaN);  // true

숫자 자료형으로 변환하기: 숫자 연산자로 쉽게

>”42” - 0 ⇒ 42

>”35” / 5 ⇒ 7

>true + 1 ⇒ 2

사칙연산에서는 문자열이나 불보다 숫자형이 더 우선되는(더 쎈) 것 같다.

다만 덧셈 연산자는 문자열이 무조건 더 우선된다.

>”3.5” + 3 ⇒ “3.53”

>”3.5” - 3 ⇒ 0.5

문자열 자료형으로 변환하기: String(52.2)

문자열 자료형으로 변환하기: 문자열 연산자(+)로 쉽게

>27 + “” ⇒ “27”

>false + “” ⇒ “0”

불 자료형으로 변환하기: Boolean(0)

0과 NaN, 빈 문자열(’’ 혹은 “”), null, undefined 이렇게 다섯 개의 자료형만 false로 ‘변환’할 수 있고, 나머지는 true값이 된다. (변환한다는 것은 Boolean()이나 !을 통해 불형으로 바꾼다는 걸 의미)

>Boolean(””) ⇒ false

>let something; Boolean(something) ⇒ false

불 자료형으로 변환하기: 논리 부정 연산자 “!” 두번으로 쉽게

>!!24 ⇒ true

>!!”” ⇒ false

한 번으로도 가능하다:

>!”2” ⇒ false

inch ⇒ cm로 출력하는 프로그램:

<script>
		const rawInput = prompt('inch 단위의 숫자를 입력해주세요.')
		const inch = Number(rawInput)
		const cm = inch * 2.54
		alert(`${inch}inch는 ${cm}cm 입니다.`)
</script>

참고:

[책] 혼자 공부하는 자바스크립트 - 윤인성

Uploaded by N2T