제로초의 자바스크립트 입문 2일차 : 2장-1 기본 문법 배우기 (2.1, 2.2)

2일차!

자바스크립트 기본 문법

2.1 코드 작성 규칙

1. 세미콜론(;) : 하나의 명령이 끝날때 세미콜론을 붙여 그다음 명령과 구분한다.

2. 주석

• 한줄 주석 (//)

console.log('Hello, Comment'); //Hello, Comment 출력

• 여러 줄 주석 ( /* */)

/* console.log('Hello, Comment'); 
Hello, Comment 출력 */

3. 들여쓰기 : 코드의 가독성 향상을 위해 사용한다.

2.2 자료형

값(value)은 프로그램에서 조작할 수 있는 데이터를 의미한다.
값의 종류를 자료형 (data type) 이라고 한다.

1. 문자열 (string) : 작은 따옴표로 감싸진 값

프로그래밍에서 하나의 글자를 문자라고 하는데, 문자들이 하나 이상 나열되어 있다고 해서 문자열 이라고 한다.

값이 나오는 명령을 식 (또는 표현식, expression) 이라고 한다.

• type of {연산자(operator)} : 어떠한 값에 특정 작업을 수행하라는 의미를 나타내는 기호

> type of 'Hello, World';
< 'string'

• 백슬래시(\) : 그다음에 나오는 문자를 기존과 다르게 처리하라고 엔진에 알리는 역할

• 이스케이핑(escaping) : 기호를 다르게 해석하게 하는 행위

• \n : 한 문자열을 여러 줄로 표시하기

• 백틱(`, backtick 또는 backquote)
  템플릿 리터럴(template literal) : 백틱으로 감싸진 문자열
  행갈이 할 때는 백틱 문자열이 편한다. \n 문자를 사용하지 않아도 행갈이가 된다.

• + {연산자} : 문자열 사이에 + 기호를 두면 양쪽의 문자열이 하나로 합쳐진다.

2. 숫자 (number)

• 문자열을 숫자로 바꾸기
  parseInt() , Number() 함수는 문자열을 숫자로 바꿀수 있다.

> parseInt('5');
< 5
> Number('5');
< 5

> type of parseInt('5');
< 'number'

parseInt() 함수는 문자열을 정수로만 바꾼다. 정수가 아닌 값을 입력하면 정수 부분만 추출해 표시한다.

> parseInt('3.14');
< 3
> parseInt('3등');
< 3

문자열을 실수로 바꾸고 싶으면 parseInt() 함수 대신에 parseFloat() 함수 또는 Number() 함수를 사용한다.

> parseFloat('3.14');
< 3.14
> Number('3.14');
< 3.14

• NaN (Not a Number)

> type of NaN;
< 'number'

• 산술연산자

• 무한값 (Infinity)

• 문자와 숫자 더하기
  형변환 (type casting) : 값의 자료형이 바뀌는 현상 또는 바뀌는 행위

> '1' + 0
< '10'

+ 연산자를 사용할 때는 숫자보다 문자열이 우선시 됨

> '9' - 5;
< 4

- 연산자를 사용할 때는 다른 자료형이 먼저 숫자로 형 변환된 후 빼기

3. 불 값 (boolean)

1과 0은 참(true)과 거짓(false)에 대응된다.

• 불 값 표현하기

> true;
< true
> false;
< false

> type of true'
< boolean

• 비교 연산자 사용하기

> 5 > 3 
< true
> 5 < 3;
< false

• 문자의 번호 알아보기 charCodeAt()

> 'a'.charCodeAt();
< 97

• ==와 ===의 다른점
  값이 같은지 비교할 때 사용하는 연산자
  ===연산자 : 자료형까지 같은지 비교한다.
  자료형 까지 비교하려면 != 대신 !== 연산자를 사용한다.

• 논리 연산자 사용하기

&& 연산자 : 왼쪽 식과 오른쪽 식이 모두 true여야 &&의 결과도 true가 됨

> 10 > 5 && 6 < 8
< true

|| 연산자 : 왼쪽 식이나 오른쪽 식 둘 중 하나라도 true 면 ||의 결과도 true가 됨

> 10 < 5 || 6 < 8
< true

• 논리 연산자 사용 시 유의할 점

&& 연산자는 앞에 나오는 값이 참인 값이면 뒤에 나오는 값을 결과로 보내고, 앞에 나오는 값이 거짓인 값이면 앞에 나오는 값을 그대로 결과로 보낸다.

> 5 && 4
< 5
> '' && 6
< ""

|| 연산자는 반대로 앞에 나오는 값이 참인 값이면 앞에 나오는 값을 그대로 결과로 보내고, 앞에 나오는 값이 거짓인 값이면 뒤에 나오는 값을 결과로 보낸다.

> 'hi' || 5
< 'hi'
> 0 ||  6
< 6
> null || 6
< 6

?? 연산자 : 널 병함 연산자(nullish coalescing operator)
앞에 나오는 값이 null 이나 undefined면 뒤에 가오는 값을 결과로 보내고, null도 undefined도 아니면 앞에 나오는 값을 결과로 보낸다.

> 'hi' ?? 5
< 'hi'
> 0 ?? 6
< 0
> null ?? 6
< 6

4. 빈 값 사용하기

• undefined
• null