자바스크립트로 코딩할 수 있는 코드 에디터
- VS Code : 개발자가 가장 많이 사용하는 무료 에디터 (https://code.visualstudio.com)
- Sublime Text : 기본 탑재 기능은 부족하지만 지원하는 플러그인이 다양해서 부족한 기능을 보충할 수 있는 가벼운 에디터 (https://www.sublimetext.com)
- WebStorm : 젯브레인에서 만든 실무에서 많이 사용되는 유료 에디터 (https://www.jetbrains.com/webstorm)
- Atom : 깃허브에서 만든 자바스크립트 에디터 (https://atom.io)
웹 브라우저 콘솔 사용법
자바스크립트는 웹 페이지의 작동을 담당하도록 개발된 언어이며, 대부분의 웹 사이트는 자바스크립트를 사용한다.
웹 브라우저는 자바스크립트 엔진이 내부에 내장되어 있기 때문에, 자바스크립트 코드를 실행할 수 있다.
각 브라우저가 사용하는 자바스크립트 엔진
| 브라우저 | 자바스크립트 엔진 |
| 크롬, 엣지, 오페라 | V8 |
| 파이어폭스 | 스파이더몽키(SpiderMonkey) |
| 사파리 | 웹킷(WebKit) |
모든 엔진은 자바스크립트 표준(ECMA-262)에 맞춰 자바스크립트 코드를 실행할 수 있다.
특별히, 크롬에서 사용하는 V8 엔진은 오픈소스 엔진으로 다양한 최적화 기법을 적용해 자바스크립트 실행 속도를 획기적으로 향상시켰다.
콘솔(Console)은 자바스크립트 명령어를 입력할 수 있는 도구로 브라우저에서 제공하는 기능이다. 브라우저의 개발자 도구에 있다. 브라우저의 콘솔은 코드를 입력받고(Read), 받은 입력을 평가하고(Eval), 결과를 출력(Print)한 뒤, 다시 프롬프트(>표시)가 나타나 새로운 입력을 기다리는 과정을 반복(Loop)한다. 이러한 특성때문에 콘솔을 REPL이라고도 한다. 자바스크립트는 코드를 한 덩어리씩(1줄~ 여러줄) 실행해 결과가 출력되는 인터프리터 방식이다.
cf. 콘솔에서 에러가 났을 때, 키보드의 위쪽 방향 화살표 키를 누르면 이전 코드가 다시 표시된다. 그 키를 계속 누르면 이전에 입력했던 코드가 역순으로 표시되는데, 히스토리 기능과 같다.
코드 작성 규칙
1. 세미콜론( ; )
자바스크립트는 하나의 명령이 끝날 때 세미콜론을 붙여도 되고 붙이지 않아도 되는데, 붙이지 않으면 자바스크립트 엔진이 자동으로 세미콜론을 붙여 주기 때문이다. 하지만, 혹시 모를 에러 발생을 방지하고 통일성을 위해 명령 뒤에 세미콜론을 붙이도록 한다. 특별히, 한 줄에 여러 명령을 넣을 때는 반드시 명령 뒤에 붙여 각 명령을 구분해야 한다.
2. 주석(comment)
컴퓨터는 무시하고 넘어가고, 사람만 알아볼 수 있도록 하는 설명으로,
한 줄 주석은 주석 앞에 //를 넣는다. 코드 앞에 놓으면 코드가 작동하지 않게 하고, 코드 뒤에 놓으면 설명을 작성한다.
여러 줄 주석은 주석 처리하고 싶은 앞 뒤 부분에 /*와 */로 감싼다.
3. 들여쓰기(indent)
보통 스페이스 2칸, 스페이스 4칸, 탭으로 4칸 공백을 들여쓰는 등 정해져 있지는 않고, 실행에 문제가 없지만 가독성 향상을 위해 규칙적으로 하는 것이 좋다.
자료형
1. 문자열(string)
① 문자열 안에서 따옴표 사용할 때는, 따옴표 앞에 \를 붙여 \ 다음에 나오는 문자를 기존과 다르게 처리하라고 엔진에게 알려준다.
그래서 \ 뒤에 나오는 따옴표는 보통의 문자로 해석되게 된다.
이렇게 문자가 다르게 해석되게 하는 행위를 이스케이핑(escaping)이라고 하며, 따옴표를 이스케이핑한다고 말한다.
\ 또한 문자열 내부에서 사용하고 싶으면 \를 덧붙여( '\\'과 같이) 이스케이핑하면 된다.
② 문자열을 여러 줄에 걸쳐 나타나게 하고 싶을 때는, 줄바꿈하고 싶은 곳 앞에 \n 문자를 넣는다.
\n은 특수한 역할은 하는 것으로 두 글자가 아닌 한 문자로 본다.
콘솔 창에서 Shift + Enter를 누르는 것으로 줄바꿈하는 것도 된다. \n 문자를 넣는 만큼 줄바꿈의 횟수가 정해진다.
③ 문자열을 표현할 때는, 큰따옴표와 작은따옴표 뿐만 아니라 백틱( ` , backtick)으로 감쌀 수 있는데
백틱으로 감싸진 문자열은 특별히 템플릿 리터럴(template literal)이라고 한다.
백틱 문자열 같은 경우에는, \n을 사용하지 않고 엔터로 줄바꿈이 가능해진다.
④ 문자열을 합칠 때, + 기호를 사용하는 것이 가능한다.
+ 기호는 연산자(operator, 어떠한 값에 특정 작업을 수행하라는 기호)로 여러번 사용하여 두 개 이상의 문자열도 합칠 수 있다.
문자열이 길어지면 줄바꿈할 때, 줄바꿈하는 문자열 앞에 붙여도 되고 줄바꿈 전의 문자열 뒤에 붙여도 상관없이 결과가 동일하지만
깔끔한 코드 작성을 위해 연산자 위치를 통일하는 것이 좋다.
cf. 현재 값의 자료형을 알고자 할 때 자료값 앞에 typeof를 붙여 확인할 수 있는데, 이 때의 typeof도 연산자이다!
⑤ 빈 문자열도 자료형이 문자열(string)이며,
빈 문자열 내부의 띄어쓰기가 다른 빈 문자열들은 동일한 빈 문자열이지만 각각 다른 값으로 여겨진다.
2. 숫자(number)
① 따옴표를 사용하지 않은 숫자, 따옴표를 사용하면 숫자가 아닌 문자열로 여겨진다.
② 매우 큰 숫자나 소수점 아래 자릿수가 많을 때 지수표기법으로 표현할 수 있다.
e 뒤에 나오는 숫자만큼의 10 제곱수를 의미한다.
ex. 7e3; // 7 * 1000
4e+5; // 4 * 100000
2e-4; // 2 * (1/10000)
③ 2진법은 숫자 앞에 0b를 붙이고,
8진법은 0o를 붙이고,
16진법은 0x를 붙인다. 16진법에서 10~15는 알파벳 a~f로 표현한다.
ex. 0b10; // 2
0o17; // 8 + 7 = 15
0x1d; // 16 + 13 = 29
④ 문자열을 숫자로 바꿀 때는,
parseInt()함수를 이용하여 정수로, parseFloat()함수를 이용하여 실수로 바꿀 수 있다.
cf. parseInt는 문자열을 숫자로 바꿀 때 뿐 아니라, 다른 기수법(진법)을 적용할 때에도 사용된다.
ex. parseInt(1111, 2); // 8 + 4 + 2 + 1 = 15
parseInt(1111, 3); // 27 + 9 + 3 + 1 = 40
⑤ 숫자가 아닌 것을 나타내는 값 Nan(Not a Number)은 아이러니하게도 자료형으로는 number이다.
⑥ 수학에서는 0으로 나누는 것을 성립하지 않지만, 자바스크립트에서는 숫자를 0으로 나누면 Infinity(무한)이라는 값이 나온다.
음수를 0으로 나누면 -Infinity 즉, 음수인 Infinity가 나온다. 자료형은 number이다.
이 Infinity에 어떤 사칙연산을 하게 되면 그 결과로 Infinity가 나온다.
단, 무한 값끼리 사칙연산시에는 Nan이 나온다.
ex. 3 / 0; // Infinity cf. 0 / 0; // Nan
typeof Infinity; // "number"
-7 / 0; // -Infinity
Infinity * 2; // Infinity
Infinity - Infinity; // Nan
⑦ 문자열과 숫자에 + 연산자를 사용하게 되면, 숫자를 문자열 자료형으로 바꾼후 더하게 된다.
숫자 외 다른 자료형도 마찬가지다.
문자열인 숫자와 그냥 숫자를 더하면 문자열로 나오게 된다.
+ 연산자는 숫자보다 문자열 자료형을 우선시한다.
⑧ 반대로 문자열과 숫자에 - 연산자를 사용하게 되면, 문자열을 숫자 자료형으로 바꾼후 빼게 된다.
이 때 문자열을 숫자 자료형으로 바꾸면 Nan이 되고, Nan에서는 어떠한 숫자를 빼도 Nan이므로 결과값은 Nan이 된다.
다만, 문자열인 숫자에서 그냥 숫자를 뺄 경우에는
문자열 숫자를 숫자 자료형으로 바꾼 뒤 그냥 숫자를 빼 숫자로 된 값을 얻게 된다.
ex. '안녕' + 7; // "안녕7"
'2' + 1; // "21"
'잘가' - 0; // Nan
'10' - 0; // 10
⑨ 자바스크립트의 연산자 우선순위는 수학의 사칙연산 우선순위와 유사하지만,
중괄호( {} )와 대괄호( [] )는 우선순위에 적용되지 않는다.
우선순위 ; 거듭제곱( ** ), 곱하기( * ), 나누기( / ), 나머지 연산자( % ) >>> 더하기( + ), 빼기( - )
우선순위가 같을 때는 왼쪽에서 오른쪽으로 실행된다.
실수를 계산할 때, 컴퓨터는 수를 0과 1로 접근하기 때문에
2진법으로 실수를 표현시 무한반복되는 실수가 생겨 근사값으로 저장하게 되고,
10진법으로 계산한 결과와 차이가 발생될 수 있다.
이를 부동소수점 문제라고 한다.
이것을 해결하기 위한 가장 간단한 방법은 실수를 정수로 바꿔서 계산하고 마지막에 다시 실수로 바꾸는 것이다.
ex. 0.1 + 0.7; // 0.7999999999999999
(0.1 * 10 + 0.7 * 10) / 10; // 0.8
3. 불 값(boolean, 영국의 수학자 조지 불에서 따온 이름)
① 컴퓨터가 인식하는 1과 0은 참(true)과 거짓(false)에 대응되고, 이를 불 값이라는 자료형으로 정하였다.
불 값을 표현할 때는 따옴표로 감싸지 않고 true와 false라고 입력한다.
참과 거짓은 논리식의 결과값으로 주로 사용하는데, Nan끼리 비교할 때는 != 비교연산 외에는 false가 나온다.
ex. Nan == Nan; // false
불 값끼리 비교할 때는 true가 1에 대응된 값이고, false는 0에 대응된 값이기 때문에 그렇게 생각하고 비교연산하면 된다.
ex. true > false; // true
true < false; // false
true != false; // true
② 문자열끼리 비교할 때는 문자의 번호를 따라서 한 글자씩 순차적으로 크기를 비교한다.
문자열의 글자들을 비교할 때 글자와 빈 글자를 비교하면 존재하는 어느 글자든 빈 글자보다 크다.
문자의 번호를 알아보고 싶다면, charCodeAt 함수를 사용한다.
ex. 'a'.charCodeAt( ); // 97
③ 문자열인 숫자와 그냥 숫자를 비교할 때는 문자열을 숫자로 형 변환한 후 비교한다.
그냥 문자열과 숫자를 비교할 때는 문자열이 숫자로 형 변환되는데 Nan으로 변환된다.
cf. Nan과의 비교는 false ex. 'ab' < 7; // false
④ 문자열 숫자와 불 값을 비교할 때는 문자열 숫자를 숫자로 형 변환하고 불 값은 그에 대응되는 숫자로 형 변환된 뒤 비교한다.
ex. '1' == true; // true
⑤ 자료형이 다른 경우 형변환을 한 뒤 비교하지만, 자료형까지 같은지 비교하기 위해서는 == 연산자 대신 === 연산자를 사용한다.
ex. '1' == 1; // true
'1' === 1; // false
'1' === '1'; // true
⑥ 논리연산자 &&와 ||와 !의 결과값으로 불 값이 사용된다.
ex. 7 > 3 && 6 < 4; //false
7 > 3 || 6 < 4; // true
! true; // false
⑦ 다른 자료형들을 !! 연산자를 사용해 불 값으로 형 변환을 할 수 있다.
대부분의 값은 불 값으로 형 변환했을 때 true이다.
ex. !! 'ab'; // true (원래의 값이 true인데 부정(!)을 하고 다시 부정(!)을 하였으므로 원래의 값인 true가 나왔다)
⑧ 불 값으로 형 변환시 false가 나오는 값은 다음의 것들만 있으니 기억하자.
ex. !! false; // false (false는 원래의 값으로 false를 가지므로 부정의 부정이 원래의 값 false가 나온 것이다)
!! ' '; // false (빈 문자열은 false의 값을 가진다)
!! 0; // false (0은 false에 대응되는 값이므로 부정의 부정 또한 false이다)
!! Nan; // false (숫자가 아닌 값인 Nan이라는 숫자는 false의 값을 가진다)
!! undefined; // false
!! null; // false
불 값으로 형 변환 후 false가 되는 값은 거짓인 값(falsy value)이라고 하고,
true가 되는 값은 참인 값(truthy value)이라고 한다.
⑨ ! 연산자의 우선순위가 < 연산자보다 높고, 소괄호( ( ) )로 우선순위 조정이 가능하다.
ex. !(5 > 4); // false
!5 > 4; // false (!5는 false이고, false > 4 는 false이다)
4. 빈 값(비어 있음을 의미)
① undefined : 보통 반환할 결과값이 없을 때 나온다. console.log 명령어는 콘솔에 무엇인가를 출력하지만, 그 자체로는 결과값이 없기 때문에 undefined가 반환된다.
ex. > console.log('Hello');
Hello
< undefined
불 값으로 형 변환하면 false가 나오지만, false와 같진 않다.
더불어 0도 아니고, 빈 문자열를 의미하는 것도 아니다.
ex. !! undefined; // false
undefined == false; // false
undefined == 0; // false
undefined == ' '; // false
참고로, undefined는 기본값으로 많이 사용된다.
② null : undefined와 같이 빈 값이지만 자료형은 null이다.
ex. undefined == null; // true
undefined === null; // false
불 값으로 형 변환하면 false가 나온다.
ex. !! null; // false (!!은 값을 불 값으로 형 변환하는 방법)
null == false; // false
null == 0; // false
null == ' '; // false
자료형은 object인데, 이것은 자바스크립트가 만들어진 초창기의 실수로 추후 끼치게 될 영향 때문에 바꾸지 않았다.
그래서 값이 null인지를 확인하기 위해서는 === null을 사용해야 한다.
[Let's Get IT] 자바스크립트 프로그래밍 - 조현영 저
TIL 노트
'컴퓨터 사이언스 > TIL 정리' 카테고리의 다른 글
| MGS Day 02 (0) | 2022.06.28 |
|---|---|
| MGS Day 01 (0) | 2022.06.28 |
| [파이썬] tkinter - messagebox 종류 (0) | 2022.06.01 |
| [파이썬] tkinter로 daum 로그인 창 만들어보기 (0) | 2022.06.01 |
| [파이썬] GUI프로그래밍 tkinter (0) | 2022.05.30 |
