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 이 여섯 가지만 알면 됩니다.
Author And Source
이 문제에 관하여(1003 TIL (1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kimhr08/1003-TIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)