문법

주석

자바스크립트에서 주석은 한 줄 주석(//), 여러 줄 주석(/* */)의 두 가지를 제공합니다.

// 한 줄 주석

/* 여러 줄
   주석*/

기본 데이터 타입

자바스크립트에선 값이 변하지 않는(immutable) 데이터를 기본 데이터 타입 이라 합니다.

숫자, 문자열, 불리언, null, undefined 가 기본 데이터 타입 에 속합니다.

변수의 선언은 var 로 시작됩니다. 변수를 선언함과 동시에 값을 초기화할 수 있습니다.

var someNumber = 1;

Note

> var str = 'hello';
> str += ' world!';
hello world!

문자열의 값이 변한 것처럼 보이지만 사실은 단지 str 에 새 문자열 'hello world!' 를 바인딩한 것 뿐입니다.

숫자

자바스크립트에서 수는 모두 기본적으로 실수(floating-point)입니다.

하지만 다른 언어에서와 같이 정수 타입도 있다고 생각하셔도 큰 문제는 없습니다.

> 1.0
1
> 3.14
3.14

일반적인 수가 아닌 Infinity, NaN (Not a Number)도 있습니다.

Infinity 는 일반적인 무한의 개념과 같이, 어떤 수를 더고 빼거나 곱해도 무한(Infinity)입니다.

NaN 은 number 타입이지만 다른 어떤 수, 심지어는 자기 자신과도 같지 않습니다.

> 1 / 0
Infinity

> + '0'
0
> + 'hello'
NaN

문자열

문자열은 작은 따옴표(‘) 두 개, 혹은 큰 따옴표(”) 두 개로 표현할 수 있습니다.

문자열은 객체는 아니지만 length, substr 등의 속성을 가지는 유사 객체입니다.

또한 문자열은 배열처럼 인덱스를 통해 접근할 수 있습니다.

> 'single'
'single'
> "double"
'double'

> 'single'.length
6
> 'single'[2]
'n'

생성자 new String() 을 통해서도 문자열을 생성할 수 있습니다.

> var strobj = new String('mock');

하지만 new String() 을 통해 선언한 것은 문자열 객체 이므로 문자열 리터럴과는 서로 같지 않습니다.

> typeof strobj
'object'
> typeof 'mock'
'string'

불리언

불리언은 참(true)과 거짓(false)의 두 가지 값을 표현합니다.

> 1 === 1
true
> 1 === 2
false

null

null 은 빈 참조(reference)를 가리킬 때 쓰입니다.

하지만 정의되어 있다는 점에서 undefined 와는 다르니 구분해야 합니다.

> var a = null;
> a === undefined
false

undefined

undefined 는 변수 혹은 멤버가 정의되지 않은 경우 반환됩니다.

> someobj // undefined

> var obj = {
    name: "Cheol",
    age: "unknown"
};
> obj.height === undefined
true

문장

문장은 하나의 실행 단위입니다. 변수의 선언이나 하나의 표현식이 하나의 문장이 될 수 있습니다. 변수를 선언하거나 표현식을 실행할 때는 항상 마지막에 세미콜론(;)을 삽입해야 합니다.

> var myPhone = 'iPhone';
> 3 + 2;
5

또한 자바스크립트는 그 문법을 C에서 빌려 왔기 때문에 if, while, switch, for 문 등을 그대로 가집니다.

if문

if문은 괄호 안의 표현식의 값에 따라 블럭 내의 문장을 실행할 지를 결정합니다.

> if (apple.price < 100) {
    buy(apple);
}

Note

블럭은 중괄호 ‘{‘, ‘}’로 묶인 부분을 의미합니다. 다른 언어들과 달리 자바스크립트는 블록은 새로운 변수 유효범위(scope)를 생성하지 않으므로 변수는 항상 블록 안에서가 아니라 함수의 첫 부분에서 정의해야 합니다.

> if (apple.price < 100) {
    buy(apple);
    var bought = true; // 블럭 내에서 선언됨
}
> console.log(bought);
true // 블럭 밖에서도 유효

switch문

switch문은 주어진 표현식을 모든 case의 표현식과 비교하여 일치하는 표현식을 찾으면 해당 case 절에 있는 문장들을 실행합니다.

만약 일치하는 표현식을 찾지 못하는 경우에는 default 절의 문장들을 실행합니다. (default는 선택사항)

case 절의 마지막에는 다음 case 절로 넘어가지 않게 break 문을 사용해야 합니다. 그렇지 않은 경우 다음 case의 문장들까지 실행하게 됩니다.

> var myFruit = 'banana';
> switch(myFruit) {
    case 'apple':
        pay(100);
    case 'banana':
        pay(200);
        break;
    case 'grape':
        pay(300);
        break;
    default:
        buy('grape');
}
// 첫 번째 case 절에서 break를 하지 않았으므로 pay(100), pay(200)이 실행됩니다.

while문

while 문은 단순한 반복 수행 문장입니다. 괄호 안의 표현식이 참인 동안은 블록을 반복해서 실행하며, 표현식이 거짓이면 반복 수행은 끝납니다.

> while (due - today > 1) {
    drink();
    today++;
}

for문

자바스크립트는 두 가지 형태의 for문을 제공합니다. 하나는 C나 초기 자바에서 제공되는 초기화-조건-증가 형태의 for문입니다.

for문의 괄호는 세 개의 표현식과 그를 나누는 두 개의 세미콜론을 포함합니다.

1. for문이 처음 실행되면 첫 번째 표현식인 초기화가 실행됩니다.
2. 두 번째 표현식은 조건문인데, 그 조건을 만족하는 동안 블럭이 실행됩니다.
3. 그리고 각 블럭이 실행된 후에 세 번째 표현식을 실행합니다.

> for (var i = 1; i < 10; i++) {
    console.log('2 * ' + i + ' = ' + (2*i));
}
2 * 1 = 2
2 * 2 = 4
...
2 * 9 = 18

for문의 다른 한 종류는 보통 for in 문이라 불리는 것입니다. 파이썬의 for 문이나 자바 1.5에서 추가된 foreach 문이 이러한 형태를 하고 있습니다.

이 형태의 for문은 각각의 반복 실행마다 객체에 있는 각각의 속성 이름을 변수에 할당합니다.

> var fruits = {
    apple: 100,
    banana: 200,
    grape: 300
};
> for (var i in fruits) {
    console.log(i + ': ' + fruits[i]);
}
apple: 100
banana: 200
grape: 300

return문

return문은 함수 내부에서 실행되며, 자신을 호출한 곳으로 되돌아가는 역할을 합니다. 그와 동시에 반환값을 돌려줍니다.

> function add(a, b) {
    return a + b;
}

> add(1, 2); // 함수를 호출한 부분
3

표현식

표현식(expression)은 리터럴 값(문자열, 숫자 등), 괄호로 묶인 표현식, 변수, 함수 호출 등 값 들과 연산 (+, -, && 등) 들의 조합으로, 어떤 하나의 값을 결과로 가지는 식을 말합니다.

> 2 + 3;
5

> isNaN(10);
false

> new String('cat');
{ '0': 'c',
  '1': 'a',
  '2': 't' }

자바스크립트에서 사용할 수 있는 연산자는 다음과 같습니다.

연산자	기능
. [] ()	세부지정이나 호출
delete new typeof + - !	단항 연산자
+ - * /	산술 연산자
>= <= < >	비교 연산자
=== !==	동등 연산자
&& ||	논리 연산자
?:	삼항 연산자

대부분 연산자는 기대한 대로 작동합니다만, 동등 연산자(===, !==)와 논리 연산자(&&, ||)는 다른 언어들과 조금 다르기에 사용하는 데 주의를 요합니다.

논리 연산자 &&, ||

많은 언어에서 논리 연산자는 좌우 항으로 불리언을 기대하며 결과값으로 불리언을 가집니다. 자바스크립트에서도 대부분의 경우 비슷하게 사용될 수 있습니다만 의미가 조금 다릅니다.

자바스크립트의 && 연산자는 첫 번째 피연산자가 거짓(false)일 경우 첫 번째 피연산자의 값을 취하고, 그렇지 않은 경우에는 두 번째 피연산자의 값을 결과값으로 취합니다.

> 1 === 1 && 0
0
> NaN && 1
NaN

반대로 || 연산자는 첫 번째 피연산자가 참(true)이면 이 값을 취하고 그렇지 않으면 두 번째 피연산자를 취합니다.

> 1 === 1 || 0
true
> NaN && 1
1

동등 연산자 ===, !==

많은 언어에서 비교 연산으로 ==, != 를 사용하는데, 자바스크립트는 특이하게도 주로 ===, !== 를 주로 사용합니다.

===, !== 는 타입과 값 모두를 비교합니다.

> 1 === 1
true
> 1 === 2
false
> 1 === '1'
false
> {a:1} === {a:1}
false                       // 서로 다른 객체
> var obj1 = obj2 = {a:1}
> obj1 === obj2
true                        // 같은 객체 참조

사실은 자바스크립트에도 ==, != 연산자가 있습니다. 원래는 타입 변환(coersion)을 동반하는 동등 연산으로 사용되기 위해 만들어졌는데, 잘못된 설계로 직관적으로 동작하지 않습니다.

> ' ' == '0'
false
> 0 == '0'
true
> 0 == ' '
true // -_-;;;;

따라서 항상 ===, !== 을 사용해야 합니다.