코드 작성 규칙
세미콜론(semiconlon)
- 하나의 명령이 끝날 때 세미콜론을 붙여도 되고 안 붙여도 됨
- 명령의 종료 지점을 컴퓨터에게 알려줌
- 세미콜론을 붙이지 않으면 대부분의 경우 JS 엔진이 자동으로 세미콜론을 붙여주지만 일부 명령에서는 가끔 에러가 발생하는 경우도 있음
- 에러 발생을 방지하고 통일성 있게 모든 명령 뒤에 세미콜론을 붙이는 것을 권장
주석(comment)
- 코드 작성 시 코드에 대한 별도의 설명이 없으면 코드를 이해하기 어려운 경우가 많음
- 이럴 때 사람만 알아볼 수 있도록 설명을 작성하는 부분을 주석(comment)라고 함
- 주석에 적은 내용은 코드에 영향을 미치지 않음
- 보통 주석은 코드에 대한 자세한 설명을 작성하거나 특정 코드를 임시로 사용하지 않도록 만들 때 사용함
한줄 주석과 여러 줄 주석
> const hello = '엄청 어려운 코드!'
// 사람이 알아볼 수 있는 설명을 작성하자! 이것이 바로 주석(comment)
/*
여러 줄의 주석을 작성하고 싶은 경우, 코드와 코드 사이에 주석을 넣을 수도 있음
*/들여쓰기(indent)
- JS는 파이썬이나 루비와 달리 들여쓰기에 제한이 없음
- 보통 스페이스로 2칸, 스페이스로 4칸, 탭으로 4칸 공백을 두지만 다른 종류의 들여쓰기를 해도 코드 실행에는 문제가 없음
- 코드를 들여쓰기 하지 않아도 실행에는 아무 문제가 없음
- 문법을 배우다 보면 들여쓰기를 하는 경우가 있기 때문에 들여쓰기를 하나로 통일하는 것이 좋음
//들여쓰기 하지 않는 경우
if(condition){
console.log('hello, world!')
}
//탭 들여쓰기
if(condition){
console.log('hello, world!')
}자료형(date type)
- JS에 존재하는 값들을 알아보자
- 값(value)는 프로그램이 조작할 수 있는 데이터를 의미함
- 이러한 값을 카테고리 별로 분류한 것을 자료형(date type)이라고 함
문자열(string)
- 프로그래밍에서 하나의 글자를 문자라고 함
- 문자들이 하나 이상 나열되어 있다고 해서 문자열이라고 함
> const hello = 'hello' // single quote
> const world = "world!" // double quote
> const helloWorld = `hello world!` // bactic or back quote문자열 기본
문자열을 표현하는 방법
따옴표
- single quote 또는 double quote 가능
- 줄바꿈이 불가능하고 열어준 quote로 닫아줘야 함
> const hello = 'hello"
> hello // Uncaught SyntaxError: Invalid or unexpected token- 만약 일반 따옴표로 줄바꿈을 하고 싶다면
\n(역슬래시+n)을 사용하면 됨
> const helloWorld = 'hello\nworld!\n'
> helloWorld
// hello
// wolrd
// !- 따옴표 자체를 문자열로 만들고 싶으면 문자열을 표현하는 다른 quote나 backtic을 사용
- 만일 같은 quote를 쓰고 싶은 경우에는
\(역 슬래시)를 사용
- 만일 같은 quote를 쓰고 싶은 경우에는
\없이 동일한 quote나 backtic으로 문자열 표현 시, 유효하지 않은 / 예상치 못한 토큰이라는 에러 메세지 출력- JS 엔진이 앞에서부터 문자열을 파악하기 때문
> const whoIam = "I'm a programmer";
> whoIam // I'm a programmer
> const helloWorld = '"hello world!"'
> helloWorld // "hello world"
> const howAreYou = 'how\'re you?'
> howAreYou // how're you?백틱
- 줄바꿈 가능
Escape
문자열 합치기(연산자)
+연산자를 통해 문자열을 합칠 수 있음
> 'hello'+' world'+'!' // hello world!숫자(Number)
숫자 기본
- 기본적으로 일반 수학과 동일하게 작성 가능
- 뒤에 0이 붙은 숫자의 경우는 아래와 같이 쓸 수 있음
> 50000 // 50000
> 5e4 // 50000, 소숫점 위로 0이 4개
> 5e-4 // 0.0005, 소숫점 아래로 4자리
> 0b111 // 7, 2진법으로 표현한 7
> 0o111 // 73, 8진법으로 표현한 73
> 0x1a1 //417, 16진법으로 표현한 417string을 number로 형 변환하는 함수
- Number
> Number('3') // 3
> Number('3.14') // 3.14
> Number('3월') // NaN- parseInt
- 문자열을 정수(whole numbers)로 바꾸는 함수
- 문자열을 정수로 바꿀 때도 사용하지만 다른 기수법을 적용하는 데도 사용함
- 기수법을 의미하는 숫자(radix)를 콤마로 구분하여 인자값으로 적어주면 어떤 기수법이 사용되었는 지 명시 가능
> parseInt('123')+5; // 128
> typeof parseInt('123'); // number
> parseInt('3.14'); // 3
> parseInt('3월'); // 3
> parseInt(111, 2); // 7, 즉 2진수 111은 10진수로 7- parseFloat
- 문자열을 소수(decimals)로 바꾸는 함수
> parseFloat('3.14'); // 3.14NaN
- Not A Number의 약어
- 이름과 다르게 NaN의 타입은 number라는 점에 주의하자
> 0/0 // NaN
> parseInt(prompt()) // ("abc" 입력) // NaN
> typeof NaN // numberInfinity
- 무한대를 나타내는 타입
- 무한을 나타내는 값이므로 사칙연산을 하더라도 결괏값이
Infinity로 나옴 - 단, 무한한 값끼리 계산할 때는 다름
- NaN
- 무한에서 무한을 계산하는 것은 성립하지 않는다는 뜻
> 2/0 // Infinity
> -2/0 // -Infinity
> typeof -Infinity // number
> Infinity - Infinity // NaN산술 연산자(arithmetic operator)
| 연산자 | 이름 | 의미 |
|---|---|---|
+ | Addition | 더하기 |
- | Substraction | 빼기 |
* | Multiplication | 곱하기 |
/ | Division | 나누기 |
% | Remainder = Modulo | 나머지 |
** | Exponent | 제곱 |
typeof operator
typeof다음에 나오는 변수의 데이터 유형을 반환하는 특별한 연산자- 내가 쓴 데이터의 타입을 확인하고 싶을 때 사용
> const helloWorld = 'hello world!'
> typeof helloWorld; // string
> typeof `문자열`; // string
숫자와 + 연산자
- 숫자(numeric values)와 문자열을
+연산자로 더하게 되면, JS는 숫자값을 문자열로 변환시킴 - 즉, 다른 자료형이 문자열로 바뀐 후 문자열과 더해짐
> '문자열' + 0 // 문자열0
> '1' + 0 // 10숫자와 기타(-,*,/) 산술 연산자
+연산자가 아닌 다른 산술 연산자를 사용할 때는 다른 자료형이 먼저 숫자로 형 변환된 후 빼기를 함- 따라서 문자열을 숫자로 바꾸면
NaN이 되고, 여기서 0을 빼도 그대로 NaN이 됨
> '문자열' - 0 // NaN = Number('문자열') - 0
> '3' - 0 // 3 = Number('3') - 0
> '3월' - 0 // NaN = Number('3월') - 0형 변환(type conversion = type casting = type coercion = type juggling)
-
프로그래밍에서 자료형을 다른 형태로 변경하는 것
-
JS는 동적으로 작성된 언어(dynamically typed language
- 즉, 선언 시 변수의 데이터 타입을 지정할 필요 없음
- 또한 이는 스크립트가 실행되는 동안 필요에 의해 자동으로 데이터 타입이 전환됨을 의미
연산자 우선순위(operator precedence)와 소수 계산 주의점
연산자 우선순위(operator precedence)
- 산술 연산자 중에서는 거듭제곱, 곱하기, 나누기, 나머지 연산자가 더하기, 빼기 연산자보다 우선순위가 높음
- 우선 순위가 같을 때는 왼쪽에서 오른쪽으로 실행됨
<참고>
| 우선순위(우선순위 높은 순서대로) | 연산자(,로 구분) |
|---|---|
| 20 | () 그룹화 |
| 19 | . , [] , new , () 함수호출 |
| 18 | new 인수없이 |
| 17 | ++ 후위 , -- 후위 |
| 16 | ! , ~, + 단항 , ++ 전위 , typeof , void , delete , await |
| 15 | ** |
| 14 | * , / , % |
| 13 | + 다항, - 다항 |
| 12 | <<, >>, >>> |
| 11 | <, <=, >, >=, in, instanceof |
| 10 | ==, !=, ===, !== |
| 9 | & |
| 8 | ^ |
| 7 | ` |
| 6 | && |
| 5 | ` |
| 4 | ? : 삼항연산자 |
| 3 | = , +=, -=, **= , *= , /= , %= , <<= , >>= , >>>= , &= , ^= , ` |
| 2 | yield , yield* |
| 1 | , 쉼표 |
소수 계산 주의점(부동 소수점 문제)
-
컴퓨터는 0과 1로 된 데이터만을 읽고 해석할 수 있기 때문에 2의 배수로 나눈 것들은 계산을 잘함
-
하지만 2진수로 나타내기 어려운 애들은 미세하게 값이 달라짐
- 컴퓨터의 부동 소수점 문제
> 0.1+0.2 // 0.30000000000000004
> 0.3-0.1 // 0.19999999999999998- 부동 소수점 문제에 대처하는 가장 간단한 방법은 실수를 정수로 바꿔서 계산한 뒤 마지막에 다시 실수로 바꾸는 것
> (0.3 * 10 - 0.1 * 10) / 10 // 0.2