1003 TIL (1)

오늘은 자바스크립트 강의를 보면서 공부! 📖

기초상식

한줄 주석

// 한줄 주석은 이렇게 표현합니다. (보통은 이걸 사용합니다.)

여러 줄 주석

/* 여러줄 주석은 이렇게 표현합니다 */

들여쓰기

if(condition){
  console('hello world!');
}

스페이스 2칸 띄우는 것

자료형

값(value)은 프로그램이 조작할 수 있는 데이터를 의미합니다. 값에는 여러 가지 종류가 있으며 이런 값의 종류를 자료형(data type)이라고 합니다.

문자열

문자열(string)입니다. ' ' 작은 따옴표나, " " 큰 따옴표로 감싸는 것을 말하는 것입니다. 최신 자바스크립트에서는 (``)백틱으로 감싸도 string으로 인지를 합니다.

줄바꿈을 하고 싶을 때는 \n을 붙이면 줄 바꿈이 됩니다.

내가 치고 있는 코드가 문자열인지 궁금할 때는 typeof라는 걸 쓰면 됩니다.

> typeof '문자열'
< "string"

그런데 안에 문자가 하나도 없는 경우가 있습니다. 그래도 문자열입니다. ''나 ""로 빈 문자열을 표현할 수 있습니다.

typeof ''
'string'
typeof ""
'string'
typeof ``
'string'

그리고 띄어쓰기가 많은 빈 문자열이 있다고 가정해보면 결과는 똑같이 string이지만 == (비교연산자) 를 써보면 둘은 false 로 나오는 것을 볼 수 있습니다. (띄어쓰기가 같으면 true로 나옵니다.)

'' == '    '
< false

그리고 따옴표를 문자로 감싸주고 싶다면 작은 따옴표는 큰따옴표나 백틱으로 다른 따옴표들도 마찬가지로 다른 따옴표들로 감싸주면 됩니다.

"how're you?"

하지만 죽어도 나는 같은 따옴표를 써야겠다고 할 때는 \ 를 이용하면 됩니다.

'how\'re you?'

연산자

문자열도 연산자가 가능합니다.

> '바나나' + '사과' //더하기
< '바나나사과'
> '바나나' - '사과' //빼기
< NaN
> '바나나' * '사과' //곱하기
< NaN
> '바나나' / '사과' //나누기
< NaN
> '바나나' % '사과' //나머지
< NaN
> 5/2
< 2.5
> 5%2
< 1  

나중에 아래와 같은 식을 많이 접하게 될 것입니다. 이때 주의할 점은 따옴표 안에 띄어쓰기를 같이 해줘야지 띄어쓰기가 적용이 된다는 것입니다.

'안녕하세요? '
+ '기멜입니다. '
+ '영어이름은 '
+ '스카일라입니다.'
< '안녕하세요? 기멜입니다. 영어이름은 스카일라입니다.'

숫자

숫자는 따옴표로 감싸지 않고 그대로 적으면 됩니다. 5;
소수는 소수점을 사용해 표현하면 됩니다. 5.04;
음수는 앞에 - 를 넣습니다. -0.5;

> 5e4
< 50000
> 5e-4
< 0.0005

0이 반복되면 위와 같이도 표현이 가능합니다.

0b111 //2진법
7
0111 //8진법
73
0x1a1 //16진법

NaN이란
typeof NaN을 하게 되면 결과는 "number"로 나오게 된다.
아이러니하게도 NaN의 풀네임은 Not a Number 이다.
NaN이라는 숫자가 있다 하지만 NaN은 숫자가 아니다. 공식적으론 숫자다. (쓰면서도 어이가 없지만)

'123' + 5
'1235'

이런 식이 있는데 123이라는건 따옴표에 감싸져있기때문에 128이 되는게 아니라 1235가 되어버린다. 만약에 문자열과 숫자를 합쳐서 128이 되게끔 하고 싶다면 문자열은 숫자로 변형해야한다.
방법은 두 가지가 있다.

Number('123') + 5
128
parseInt('123') + 5
128

눈을 믿으면 실수를 하는 경우가 많기때문에 초반에는 typeof로 확인을 하면서 코드를 짜야한다.

parseInt는 정수로 바꾸는 기능이 있다. 그래서 소수점까지 있는 숫자를 넣어도 그걸 정수로 바꿔버린다.

parseInt('3.14')
3

이럴때는 위해서 parseFloat라는 것이 있다. 이것을 쓰면 소수점까지 숫자가 제대로 나오게 된다.

parseFloat('3.14')
3.14

Number는 소수점과 숫자 둘 다 가능하지만 안되는 것이 존재한다.
바로 숫자와 문자가 같이 있는 경우..!

parseInt('3월')
3
Number('3월')
NaN

위에 코드를 보면 parseInt는 '3월'에서 '3'을 뽑아서 보여주는 반면 Number는 숫자를 인식하지 못하고 NaN이 뜬다.

'1234' .substr(0,2)
'12'
'1234' .substring(0,2)
'12'

막간 상식 ✏️

이렇게 숫자 앞에서 두개를 자르는 이런 형식이 있다. 어떻게 보면 똑같을 수 있는데 엄밀하게 보면 둘은 다른 점이 있습니다.
substr(시작 인덱스, 추출 갯수) n번째에서 시작해서 몇 개의 문자를 추출할거니? 라는 뜻
'가나다라마바사'라는 것이 있으면 처음 인덱스는 0부터 시작한다.
그래서 substr(4,3)는 4번째인 '마'부터 시작해서 3개의 문자 '마바사'를 가져오게 된다.
substring(시작 인덱스번호, 끝 인덱스 번호의 이전의 문자) n번째에서 시작해서 n번째 이전까지의 문자를 추출할거니? 라는 뜻
'가나다라마바사'라는 것이 있으면 역시 처음 인덱스는 0이고,
substring(0,2)는 0번째인 '가'부터 2번째 '다' 이전까지 추출하므로, '가나'라는 결과가 나옵니다. 특이점은 substring은 (5,2)라고 했을 때 (2,5)라고 판단을 한다는 것입니다.

다시 돌아와서 typeof parseInt(prompt()); 라는 것을 쓰면 팝업창이 뜨는데 여기에 입력한 값은 모두 Number라고 뜬다. 타입을 가려준다.
parseInt(prompt()) 라고 쳐도 팝업창이 뜨는데 이때는 팝업창에 쓴 것이 콘솔창에 나타나게 된다. 그런데 이 역시 문자를 쓰면 NaN 이라는 결과가 나오게 된다. parseInt때문에 숫자만 가능한 것 같다.
prompt()라고 치면 역시 팝업창이 뜨는데 prompt는 문자열을 입력받는 것이기때문에 숫자를 쳐도 문자를 쳐도 모두 문자열로 인식하게 된다.
prompt는 우리가 값을 입력할 수 있게하고, parseInt는 그것을 숫자로 바꾸고, typeof는 그거에 자료형을 알려주고.

문자열과 숫자를 더할려고 하면 숫자가 문자열로 바뀌게 된다.
반면 빼기는 숫자가 아닌 애들이 숫자로 변한다.

불 값

1과 0은 참(ture)과 거짓(false)에 대응됩니다. 자바스크립트에서는 불 값(boolean)이라는 자료형이 있습니다. 불 값을 표현할 때는 따옴표로 감싸지 않습니다.

typeof true;
'boolean'

프로그래밍에서 같다는 (==) 을 씁니다. (!=)는 양쪽 값이 다른지 비교하는 연산자입니다.

5 != 5
false

"5랑 5는 다르지?" 라고 물어봤고, 둘은 같으니까 "아닌데" 가 되어서 false가 됩니다.

5 != 6
true

이럴때는 true가 나옵니다. 그리고 특이한 케이스가 있는데 NaN과 NaN을 == 로 비교하면 false가 나옵니다. 다만, != 연산에서는 true를 출력합니다.
이런 경우도 있습니다.

true > false
true

true가 false보다 큰 값이라는 것. true는 숫자로 변환하면 1이고, false는 숫자로 변환하면 0입니다. 문자도 비교할 수 있습니다. 사전순으로 크기 비교가 됩니다.

여기서 비교연산자를 좀 더 심화있게 들어가봅시다.
=== 이라는 것이 있습니다. 값을 비교할 때 값뿐만 아니라 자료형까지도 같은지 비교합니다.
왠만하면 (===)을 쓰는 것이 좋습니다.

'1' === 1;
false
1 === true;
false
1 === '1';
false

!= 도 마찬가지입니다. 형 변환을 먼저 한 후에 비교하기 때문에 다음과 같은 결과가 나옵니다.
1과 '1'이 같다는 결과가 나옵니다.

1 != '1';
false

자료형까지 비교하려면 != 대신 !==연산자를 사용하면 됩니다.
자료형이 다르기때문에 true가 됩니다.

1 !== '1';
true

== 이나 != 연산자의 결과를 예측하려면 값들이 어떻게 변환되는지를 알아야 하기 때문에 입문하는 입장에서는 매우 어렵습니다. 따라서 ==와 != 대신 ===와 !== 연산자를 사용해 자료형까지 정확하게 비교하기를 권장합니다.

논리 연산자

"10은 5보다 크고(그리고), 6은 8보다 작다" 라는 문장은 참일까요, 거짓일까요?
프로그래밍에서는 '그리고'라는 것을 표현해주는 연산자가 있습니다. 바로 && 연산자입니다.

10 > 5 && 6 < 8;
true

'그리고'와는 다른 개념으로 '또는'이 있습니다. 이는 || 연산자로 표현합니다. 좌측 식이나 우측 식 둘 중 하나만 true면 ||의 결과는 true가 됩니다.

10 > 5 || 6 < 8;
true

좌측 식의 값이 false이지만 우측 식이 true이기 때문에 최종 결과값도 true가 됩니다.
||연산자에서는 양쪽의 식이 모두 false여야 false가 됩니다.

다른 자료형을 불 값으로 형 변환 할 수도 있습니다. ! 연산자를 연달아 두 번쓰면 됩니다.
두 번 연달아 썼기 때문에 참인 값은 참에서 거짓으로, 다시 거짓에서 참으로 변환됩니다.
거짓인 값은 거짓에서 참으로, 참에서 거짓으로 변환됩니다.
boolean('a');라는걸 줄여쓸려고 !!'a'; 라고 씁니다.

!!'a';
true

false가 되는 몇 개의 값입니다. 이것만 기억하면 됩니다.

> !!false
< false
> !!''
< false
> !!0
< false
> !!NaN
< false

false, ''(빈 문자열), 0, NaN, undefined, null 이 여섯 가지만 알면 됩니다.