[Let's Get IT 자바스크립트 프로그래밍] 2장 기본 문법 배우기 - 코드 작성 규칙, 자료형

코드 작성 규칙
자료형

코드 작성 규칙

자바스크립트 코드를 작성할 때 기본이 되는 문법 사항

세미콜론

자바스크립트는 하나의 명령이 끝날 때 세미콜론을 붙여도 되고 붙이지 않아도 된다.

세미콜론을 붙이지 않으면 대부분의 경우 자바스크립트 엔진이 자동으로 세미콜론을 붙여 준다. 하지만 일부 명령에서는 가끔 에러가 발생하기 때문에 혹시 모를 에러 발생을 방지하고 통일성을 위해 모든 명령 뒤에 세미콜론을 붙이기를 권장한다.

 

주석

다른 사람이 작성한 코드를 볼 때 코드에 관한 별도의 설명이 없는 경우 코드를 이해하기 어렵다.

이럴 때 사람만 알아볼 수 있도록 설명을 작성한 부분을 주석(comment)이라고 합니다.

주석은 코드에 영향을 미치지 않습니다.

보통 주석은 코드에 관한 자세한 설명을 작성하거나 특정 코드를 임시로 사용하지 않게 할 때 사용합니다.

주석에는 한 줄 주석과 여러 줄 주석 두 가지가 있습니다.

 

한 줄 주석

주석 앞에 //를 넣습니다.

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

여러 줄 주석

한 줄로 작성하기에는 주석이 너무 길 때 여러 줄 주석을 사용합니다. 

/* */로 감싸면 됩니다.

/* console.log('Hello, world!');
console.log('Hello, comment!'); */

들여쓰기

자바스크립트는 들여쓰기에 제한이 없습니다. 

하지만, 자바스크립트 스탠다드를 참조해서 들여쓰기 시에 공백 2칸을 사용하도록 합니다.

if(condition) {
  console.log('Hello, world!');
}

들여쓰기를 사용함으로 코드의 가독성이 향상됩니다. 그러므로 들여쓰기를 규칙적으로 하기를 권장합니다.

 

자료형

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

 

문자열(string)

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

문자열은 작은따옴표나 큰따옴표로 감쌉니다.

'Hello, world!';
"Hello, world!";

다만, 시작과 끝이 다른 종류의 따옴표일 때는 문제가 발생합니다.

'Hello, world!";  // 또는 "Hello, world!'; 일 때
Uncaught SyntaxError: Invalid or unexpected token

따옴표 안에 문자가 없는 경우도 문자열입니다.

typeof '';
// 'string'

typeof 연산자(operator)는 해당 값의 타입을 출력한다.

 

문자열 안에서 따옴표 사용하기

문자열 안에 따옴표를 사용할 때에는 문자열 안에 따옴표와 다른 종류의 따옴표로 감싸면 됩니다.

"문자열 안에 작은따옴표(')가 있어요";
'문자열 안에 큰따옴표(")가 있어요';

백 슬래시(\)를 사용하는 방법도 있습니다.

'문자열 안에 작은따옴표(\')가 있어요';

원래는 따옴표가 문자열의 끝을 알리는 문자지만, \가 붙은 따옴표는 보통의 문자로 해석됩니다.

이렇게 문자가 다르게 해석되게 하는 행위를 이스케이핑(escaping)이라고 하며, "따옴표를 이스케이핑한다"라고 표현합니다.

 

문자열 여러 줄로 나타내기

문자열 내에서 문자들을 여러 줄에 걸쳐 나타나게 할 수 있습니다.

문자열 내부에 \n 문자를 넣으면 됩니다.

\n 문자를 사용하지 않고 줄 바꿈 하면 에러가 발생합니다.

'여러 줄에 걸쳐 \n표시됩니다.';
/* 여러 줄에 걸쳐
표시됩니다. */

 

템플릿 리터럴 사용하기

큰따옴표와 작은따옴표 외에 문자열을 표현하는 방법이 한 가지 더 있습니다. 바로 백 틱(`)으로 감싸는 방법입니다.

백 틱은 키보드에서 Tab 키 위에 있습니다.

`저도 문자열입니다.`;

이렇게 백 틱으로 감싸진 문자열을 템플릿 리터럴(template literal)이라고 합니다.

 

줄 바꿈 할 때는 백 틱 문자열이 편하다. \n 문자를 사용하지 않아도 줄 바꿈이 된다.

`여러 줄에 걸쳐
표시됩니다.

줄을 더 늘려볼까요.`;

문자열 합치기

코딩을 하다 보면 문자열이 가로로 너무 길어질 때가 있다. 이럴 때는 문자열을 나눈 후 두 개의 문자열 사이에 + 기호를 두면 양쪽의 문자열이 하나로 합쳐진다.

'Hello, ' + 'JavaScript';

// Hello, JavaScript

문자열을 합칠 때 사용한 + 기호도 연산자다.

두 개 이상의 문자열도 + 연산자를 여러 번 사용하면 된다.

 

1분 퀴즈
문자열을 합칠 때 가장 많이 하는 실수가 띄어쓰기를 제대로 하지 않는 것입니다. 다음은 문자열의 시작이나 끝에 띄어쓰기를 포함하지 않아서 문자열을 합친 결과가 이상하게 표현되었습니다. 이 문자열을 제대로 표현되게 만들어 보세요.

'문자열이 긴 경우에는' + '문자열을' + '나눈 뒤' + '다시 합칩니다.';
"문자열이 긴 경우에는문자열을나눈 뒤다시 합칩니다.

정답 및 해설

'문자열이 긴 경우에는 ' + '문자열을 ' + '나눈 뒤 ' + '다시 합칩니다.';

// 문자열이 긴 경우에는 문자열을 나눈 뒤 다시 합칩니다.

// 해설 : 작은 따옴표 사이에 공백을 포함하여 작성한다.

 

숫자(number)

숫자는 따옴표로 감싸지 않고 그대로 적으면 됩니다. 따옴표로 감싼 숫자는 문자열이지 숫자가 아닙니다.

// 숫자
5;

// 소수
5.04;

// 음수
-5;

지수표기법(exponential notation)은 매우 큰 숫자나 소수점 아래 자릿수가 많을 때 숫자를 표현하는 방식이다. e 뒤에 나오는 숫자만큼 10의 거듭제곱을 하면 원래 숫자가 된다.

5e4; // 5 * 10000 = 50000
5e+4; // 5 * 10000 = 50000
5e-3; // 5 * (1/1000) = 0.005

쉽게 생각해서 e뒤에 숫자만큼 0이 하나씩 더 생긴다.

typeof 5;
// number

typeof '5';
// string

숫자를 따옴표로 감싸면 숫자는 더 이상 숫자가 아니라 문자열이다. '5'와 5는 프로그래밍에서 완전히 다른 개념이다.

 

10진법 말고도 2진법, 8진법, 16진법으로 수를 표현할 수 있다.

10진법이 사람에게 친화적인 기수법이라면, 2진법이나 16진법은 컴퓨터에 친화적인 기수법이다.

2진법은 숫자 앞에 0b(숫자 0, 소문자 b)를 붙인다.

8진법은 0o(숫자 0, 소문자 o)을 붙인다.

16진법은 0x(숫자 0, 소문자 x)를 붙인다.

단, 숫자는 0부터 9까지 밖에 없으므로 16진법의 경우 10~15는 각각 알파벳 a, b, c, d, e, f로 표현합니다.

// 2진법
0b11;
// 3

// 8진법
0o15;
// 13

// 16진법
0x1c;
// 28

문자열을 숫자로 바꾸기

자바스크립트는 하나의 자료형을 다른 자료형으로 바꾸는 함수를 제공한다.

parseInt로 문자열을 숫자로 바꿀 수 있다.

parseInt('5');
// 5

typeof parseInt('5');
// number

parseInt는 문자열을 정수로만 바꾼다. 문자열을 정수가 아닌 실수로 바꾸고 싶으면 parseInt 대신 parseFloat를 사용하면 된다.

parseInt('3.14');
// 3

parseFloat('3.14');
// 3.14

대화창에 값 입력하기 promat();

 

다른 기수법 적용하기

parseInt는 문자열을 숫자로 바꿀 때도 사용하지만, 다른 기수법을 적용하는 데도 사용한다. 해석하려는 값 뒤에 적용하려는 기수법을 의미하는 숫자를 콤마로 구분해 적어준다.

parseInt(111, 2);
// 7

parseInt(111, 16);
// 273

NaN 알아보기

NaN은 Not a Number(숫자가 아님)의 약어입니다.

하지만 typeof NaN을 해보면 "number"라는 값이 출력된다.

NaN은 이름과는 다르게 값이 숫자라는 점을 외워야 한다.(자바스크립트에서 그렇게 정했으니까..)

 

산술 연산자 사용하기

// 사칙연산

1 + 2;
// 3
6 - 10;
// -4
3 * 4;
// 12
6 / 4;
// 1.5

// 나머지, 거듭제곱

6 % 4;
// 2
2 ** 4;
// 16

무한 값 알아보기

2 / 0;
// Infinity

-2 / 0;
// -Infinity

typeof Infinity;
// number

Infinity는 무한을 의미하는 값입니다. 자바스크립트에서는 무한이라는 수를 표현하는 Infinity 값을 사용합니다.

Infinity 값은 음수도 있습니다. 

단, 무한 값끼리 계산할 때는 다릅니다.

Infinity - Infinity;
// NaN

결과 값으로 NaN이 나왔습니다. 무한에서 무한을 빼는 것은 성립하지 않는다는 뜻입니다.

0과 0을 나눠도 마찬가지입니다.

Infinity 값은 자주 쓰지는 않지만 무한이라는 개념을 프로그래밍에서 사용할 때 유용합니다.

 

문자와 숫자 더하기

'문자열' + 0;
// 문자열0

'1' + 0;
// 10

문자열과 다른 자료형을 더하면 다른 자료형이 문자열로 바뀐 후 문자열과 더해진다.

이처럼 값의 자료형이 바뀌는 현상 또는 바꾸는 행위를 형 변환(type casting)이라고 한다.

더하기를 할 때는 숫자보다 문자열 자료형이 우선시됨.

 

'문자열' - 0;
// NaN

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

문자열을 숫자로 바꾸면 NaN이 되고, 여기서 0을 빼도 그대로 NaN이므로 결괏값도 NaN이 나온다.

 

숫자로 형 변환하기

문자열에서 숫자로 형 변환할 때, 변환한 뒤의 값을 추정하려면 parseInt를 실행한 결과를 생각해 보자.

 

연산자 우선순위 이해하기

자바스크립트도 사칙연산 우선순위를 따른다. 만약 더하기를 곱하기보다 먼저 하고 싶다면 수학에서처럼 소괄호로 감싸면 소괄호 부분이 먼저 계산된다. 소괄호도 연산자입니다.

다만, 자바스크립트에서 중괄호{}나 대괄호[]는 수학과는 다른 의미이기 때문에 연산자 우선순위를 바꿀 때는 사용하지 않는다.

1분 퀴즈
연산자 우선순위 표를 참고해 3 ** 2 + 1을 27로 만들어 보세요.

정답 및 해설

3 ** (2 + 1);

// 소괄호를 이용해 2와 1을 먼저 더한 후 3의 거듭제곱식을 곱한다.

실수 계산 시 주의할 점

자바스크립트로 정수뿐만 아니라 실수도 계산할 수 있다.

0.5 + 0.5;
// 1

그런데 실수 연산을 할 때는 주의해야 한다.

컴퓨터는 0과 1밖에 알지 못한다. 그런데 2진법으로 실수를 표현하면 무한 반복되는 실수가 있어서 어쩔 수 없이 근삿값으로 저장한다.

그래서 우리가 사용하는 10진법으로 계산한 결과와 차이가 발생하는 경우가 생긴다. 바로 이게 대부분의 프로그래밍 언어가 겪고 있는 부동소수점 문제이다.

가장 간단한 방법은 실수를 정수로 바꿔서 계산하고 마지막에 다시 실수로 바꾸는 것이다.

(0.3 * 10 - 0.1 * 10) / 10;
// 0.2

불 값(boolean)

1과 0은 참(true)과 거짓(false)에 대응된다. 자바스크립트에도 true와 false를 나타내는 불 값(boolean)이라는 자료형이 있다. 영국의 수학자 조지 불(George Boole)에서 따온 이름이다.

 

불 값 표현하기

불 값을 표현할 때는 따옴표로 감싸지 않고 true와 false를 입력한다.

true;
// true
false;
// false

typeof true;
// boolean

비교 연산자 사용하기

참과 거짓은 논리식의 결괏값으로 주로 사용된다.

5 > 3;
// true

5 < 3;
// false

>는 왼쪽 값이 오른쪽 값보다 크다(초과), <는 왼쪽 값이 오른쪽 값보다 작다(미만)는 뜻이다.

크거나 같다(이상), 작거나 같다(이하)를 표현할 때는 >=, <= 연산자를 사용한다.

5 >= 5;
// true

5 <= 4;
// false

비교 연산자에는 초과, 미만, 이상, 이하를 나타내는 연산자 외에 두 값이 같음과 같지 않음을 나타내는 연산자도 있다.

5 == 5;
// true

5 == 6;
// false

5 != 5;
// false

5 != 6;
// true

== 는 양쪽 값이 같은지 비교하는 연산자이고,!=는 양쪽 값이 다른지 비교하는 연산자입니다.

 

NaN끼리 비교하기

NaN은 비교할 때 독특한 성질을 보인다. NaN끼리 비교하면 false 값을 가진다는 것이다. 이는 숫자, 문자열, 불 값을 통틀어 false가 나오는 유일한 값이다.

NaN == NaN;
// false

NaN은 비교 연산에서 false를 출력한다. 다만 != 연산에서는 true를 출력한다.

 

true > false;
// true

true가 false보다 큰 값임을 기억해야 한다. true는 숫자로 변환하면 1이고, false는 숫자로 변환하면 0이다.

'b' > 'a'; // b는 98, a는 97
// true

문자열끼리 비교하는 경우에는 기본적으로 문자의 번호를 따른다. 문자의 번호가 클수록 값이 크다.

'ad' > 'ab';
// true

첫 문자인 a가 서로 같으므로 다음 문자를 비교한다. b와 d 중에서 d의 값이 더 크기 때문에 결괏값은 true

'ab' > 'a';
// true

첫 문자가 a로 같으므로 두 번째 문자끼리 비교한다. 그런데 ab에서 두 번째 문자는 b지만 a에는 두 번째 문자가 없다. 이때는 다음 문자가 존재하는 문자열이 값이 더 크다. 결괏값은 true

 

문자의 번호 알아보기

문자의 번호를 알아보려면 charCodeAt을 사용한다. 찾고자 하는 문자열 뒤에. charCodeAt()를 붙이면 문자의 번호가 나온다.

'a'.charCodeAt();
// 97

다른 자료형끼리 비교

'3' < 5;
// true

빼기 연산자 때처럼 다른 자료형이 모두 숫자로 형 변환된 후 비교한다.

'abc' < 5;
// false

문자열 abc를 숫자로 바꾸면 NaN이 됩니다. NaN과의 비교는 false이므로 결괏값은 false

불 값도 비교 연산을 할 때는 숫자로 형 변환된다.

'0' < true;
// true

문자열 0도 숫자 0으로 변환되고, true도 숫자 1로 형 변환된다.

 

==와 === 차이 이해하기

'1' == 1;
// true

1 == true;
// true

1 == '1';
// true

자료형이 다르면 형 변환한 후 비교하기 때문에 앞의 예제에서 모두 true가 출력된다.

이러한 특성은 외우기도 힘들뿐더러 값을 비교하려는 취지에 맞지 않는 경우도 있습니다.  ===는 자료형까지 비교하는 연산자입니다.

'1' == 1;
// false

1 == true;
// false

1 == '1';
// false

자료형까지 같을 때만 true가 나온다.

1 != '1';
// false

1 !== '1';
// true

!=도 마찬가지로, 형 변환을 먼저 한 후에 비교하므로 자료형까지 비교하려면 != 대신 !=== 연산자를 사용해야 한다.

 

==나 != 연산자의 결과를 추정하려면 값들이 어떻게 형 변환되는지를 알아야 하므로 입문자는 ===, !==를 사용해 자료형까지 정확하게 비교하는 것을 권장한다.

 

논리 연산자 사용하기

프로그래밍에서는 '그리고'를 표현하는 연산자가 있다.

10 > 5 && 6 < 8;
// true

&& 연산자의 좌측 식과 우측 식이 모두 true여야 &&의 결과도 true가 된다.

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

10 < 5 || 6 < 8;
// true

좌측 식의 값이 false이지만 우측 식의 값이 true이므로 최종 결괏값은 true이다.

|| 연산자에서는 양쪽의 식이 모두 false여야 false가 된다.

참을 거짓으로, 거짓을 참으로 만드는 연산자도 있다.

식 앞에 !를 붙이면 참인 값은 flase가 되고, 거짓인 값은 true가 된다.

!true;
// false

!false;
// true

! 연산자를 두 번 연이어 쓰면 참인 값은 참에서 거짓으로, 다시 거짓에서 참으로 변환된다. 거짓인 값은 거짓에서 참으로, 다시 참에서 거짓으로 변환된다.

결국은 참인 값은 참 이 나오고, 거짓인 값은 거짓이 나오는데 굳이 왜 쓰는지 모르겠어서 이 부분은 정리 생략;;

 

논리 연산자들도 우선순위가 있다. 그룹 연산자(소괄호)를 이용해 조정할 수 있다.

!(2 < 0);
// true

!2 < 0;
// false

! 연산자의 우선순위가 < 연산자보다 높기 때문에 소괄호가 없으면 결괏값은 false가 나온다.

 

1분 퀴즈
숫자와 불 값에서 배운 것을 활용해 다음 연산의 결과가 true가 되게 만들어 보세요.
연산자만 추가하거나 수정할 수 있습니다. 정답은 여러 개입니다.
5 + 4 * 3 === 27;

정답 및 해설

!(5 + 4 * 3 === 27);
// 전체 계산식을 소괄호로 묶고 !를 계산식 전에 넣으면 false 결과값이 true로 바뀜

(5 + 4) * 3 === 27;
// 소괄호를 이용해 5와 4를 먼저 더한 후 3을 곱하면 값은 27로 결과값은 true

빈 값 사용하기

문자열, 숫자, 불 값 이외에도 네 가지(undefined, null, object, symbol)가 더 있다. 

undefined와 null 이 둘은 빈 값(비어 있음을 의미)을 표현한다는 공통점이 있지만 차이점도 있다.

 

undefined 알아보기

undefined는 보통 반환할 결괏값이 없을 때 나온다.

console.log 명령어는 콘솔에 무언가를 출력하지만 그 자체로는 결괏값이 없기 때문에 undefined가 반환된다.

기본값으로 undefined를 많이 사용한다.

 

null 알아보기

빈 값을 의미하지만 undefined와 같지는 않다.

underfined === null;
// false

null의 자료형을 typeof로 확인해보면 object가 나온다.

typeof null;
// object

이 현상은 자바스크립트에서 유명한 버그다. 원래는 "null"이 나와야 하지만, 언어가 만들어진 초창기 실수 때문에 "object"가 됐다. 그 이후로는 바꿀 수 없게 됐다. 바꾸고 나면 기존에 typeof null 식을 사용하는 모든 곳에 영향이 있기 때문이다.

따라서 값이 null인지 확인하기 위해서는 === null을 사용해야 한다.