3장 언어의 기초

문법

ECMAScript 의 문법은 대부분 C언어, 자바나 펄 등 C와 비슷한 언어에서 차용한 것이다.

대소문자 구분

가장 먼저 이해해야 할 개념은 어디서든 대소문자를 구분한다. 변수나 함수 이름, 연산자 모두 대소문자를 구분한다.

식별자

‘식별자’란 변수나 함수, 프로퍼티, 함수 매개변수의 이름이다. 식별자는 다음 형식에 따라 한 개 이상의 문자로 표기한다.
첫 번째 문자는 반드시 글자나 밑줄( _ ), 달러 기호($)중 하나여야 한다.
다른 문자에는 글자나 밑줄, 달러 기호, 숫자를 자유롭게 쓸 수 있다.

ECMAScript 식별자는 관습적으로 카멜 케이스로 쓴다. 카멜 케이스란 다음과 같이 첫 번째 글자는 소문자로 쓰고 단어가 바뀔 때는 바뀐 단어의 첫 글자를 대문자로 쓰는 표기법이다.
(우리나라에서는 낙타표기법이라고도 한다.)
firstSecond
myCar
doSomethingImportant

단, 키워드와 예약어 및 true, false, null은 식별자로 사용할 수 없다.

주석

// 한줄 주석
/*
* 이런 형식을 써서
*주석을 어려 줄로 쓸 수 있다.
*/

스트릭트 모드

ECMAScript 5에서는 ‘스트릭트 모드’라는 개념을 도입했다. 스트릭트 모드는 기존과는 다른 방식으로 자바스크립트를 파싱하고 실행하라고 지시하는 것이다.
function doSomething(){
“use strict”;
//함수 본문
}

문장

각 문장은 세미콜론으로 종료한다. 세미콜론을 생략하면 다음 예제처럼 자바스크립트 엔진에서 문장이 끝나는 위치를 판단한다.

var sum = a + b // 세미콜론이 없어도 유효하지만 권장하지 않는다.
var diff = a – b; //이렇게 쓰길 권장

if 문 같은 제어문에서 실행하는 문장이 하나뿐이라면 코드 블록을 쓰지 않아도 되지만 코드블록을 쓰면 의도를 더 명확하게 표현 할 수 있고 나중에 수정할 때 에러가 생길 가능성이 적다.

변수

변수에 어떤 타입의 데이터라도 저장할 수 있다는 의미이다.
변수를 정의할 때는 다음과 같이 var 연사자 다음에 변수 이름을 쓴다.

var message = “hi”;

위 코드는 message 변수가 문자열 값 “hi”를 저장한 것으로 정의 했다.

var 연산자는 변수를 로컬 스코프에서 정의한다는 점을 반드시 기억해야 한다. 예를 들어 함수 안에서 var 키워드 써서 변수를 정의하면 해당 변수는 다음과 같이 함수를 종료하는 즉시 파괴된다.

function test(){
var message = “hi”; //지역변수
}
test();
alert(message); //에러

 

여기에서 messag 변수는 함수 내부에 정의되었다. test() 함수를 호출하면 변수를 생성하고 값을 할당한다. 그 직후 변수는 파괴되므로 이 예제의 마지막 줄은 에러를 일으킨다.
var 연산자를 생략하면 변수를 전역으로 정의 할수 있다.

function test(){
message = “hi”; //지역변수
}
test();
alert(message); // hi

 

var 연산자를 제거함으로서 message 변수는 전역 변수가 되었다. test() 함수를 호출하는 즉시 변수가 정의되며 함수 외부에서도 이 변수에 접근할 수 있다.

주의: var 연산자를 생략해서 전역변수를 정의할 수 있긴 하지만 가급적 이런 패턴은 피하길 권장한다. 전역 변수를 로컬에서 정의하면 관리하기도 어렵고 var 키워드를 의도적으로 생략한 것인지 실수인지 바로 알 수 없어서 혼란스럽기 때문이다.

var message = “hi”,
found = false,
age = 29;

 

변수 세개를 정의하고 초기화했다.

데이터 타입

ECMAScript에는 다섯 가지 기본적인 데이터 타입이 있습니다. 이를 ‘원시primitive 데이터 타입’이라 부르기도 하는데 Undefined, Null, 불리언Boolean, 숫자, 문자열이 이에 해당한다.
객체라 불리는 복잡한 데이터 타입도 있다. 객체는 이름-값 쌍의 순서 없는 목록이다.

typeof연산자

변수의 데이터 타입을 알아내야할 때가 있는데 typeof 연산자를 통해 데이터 타입을 알 수가 있다. 값(변수)에 typeof 연산자를 적용하면 다음 문자열 중 하나를 반환한다.

• 정의되지 않은 변수 : “undefined”
• 불리언: “boolean”
• 문자열: “string”
• 숫자: “number”
• 함수를 제외한 객체 또는 null: “object”
• 함수: “function”

typeof 연산자는 다음과 같이 사용한다.

var message = "some string";
alert(typeof message); //"string"
alert(typeof(message)); //"string"
alert(typeof 95); //number

이 예제에서는 변수(message)와 숫자 리터럴을 typeof 연산자에 전달했다. typeof는 함수가 아니라 연산자이므로 괄호는 쓰지 않아도 된다.

Point:기술적으로 말해 ECMAScript의 함수는 객체로 간주된다. 하지만 함수에는 다른 객체에 없는 특별한 프로퍼티가 존재하므로 typeof 연산자가 함수를 다른 객체와 구별해 반환하는 것이 합리적이다.

undefined 타입

undefined라는 값은 특별한 값이다. var를 써서 변수를 정의했지만 초기화되지 않았다면 해당 변수에는 다음과 같이 undefined가 할당된다.
Point:리터럴 값 undefined는 빈 객체를 가리키는 포인터인 null과 초기화되지 않은 변수를 비교할 목적으로 ECMA-262 3판에 추가 되었다.

var message //이 변수는 선언되었지만 값은 undefined이다.

//이 변수는 선언되지 않았다.
//var age

alert(message); // "undefined"
alert(age); //에러를 일으킨다.

이 예제에서 첫 번째 alert()은 값이 “undefined”인 변수 message를 표시한다. 두 번째 alert()에는 아직 정의한적 없는 변수 age를 넘겼으므로 에러가 일어난다. 정의하지 않은 변수에 실행할 수 있는 유의미한 조작은 typeof뿐이다.

Null 타입

Null타입 역시 값 하나만을 갖는다. Null 타입의 값은 특별한 값인 null이다. null은 빈 객체를 가리키는 포인터이므로 null에 typeof를 호출하면 다음 예제처럼 “object”를 반환한다.

var car = null;
alert(typeof car); // "object"

변수를 정의할 때 해당 변수가 객체를 가리키게 할 생각이라면 해당 변수에는 다른 값을 쓰지 말고 null로 초기화하길 권한다. 그렇게 하면 다음과 같은 코드를 써서 해당 변수가 객체를 가리키는지 명시적으로 확인할 수 있다.

if(car != null){
//car를 사용하는 코드
}

null과 undefined 사이에 있는 == 연산자는 항상 true를 반환한다. 하지만 이렇게 두 값이 같다고 나오는 이유는 == 연산자가 피연산자를 비교할 때 암시적으로 타입 변환을 하기 때문이다.

불리언 타입

불리언 타입은 script에서 가장 많이 쓰이는 데이터 타입중 하나이며, true 와 false 두 가지 리터럴 값만 가진다.

숫자 타입

NaN

숫자형 값 중에는 NaN(Not a Number)이란 특별한 값이 있다. 이 값은 숫자를 반환할 것으로 의도한 조작이 실패했을 때 반환하는 값이다. 에러를 반환하는 것이 아님에 유의해야 한다.
NaN에는 몇 가지 고유한 특징이 있다. 먼저 NaN이 포함된 조각(예를 들어 NaN/10)은 항상 NaN을 반환한다. 이런 특징은 여러 단계를 계산할 때 어느 단계에서 처음으로 NaN을 반환했는지 파악하기 어려우므로 골칫거리가 될 수 있다. 둘째, NaN은 어떤 값과도 일치하지 않으며 심지어 NaN끼리도 일치하지 않는다.
alert(NaN == NaN); // false;
이런 문제로 인해 isNaN();함수를 따로 제공한다. 이 함수는 매개변수를 하나 받으며 해당 값이 ‘숫자가 아닌 값’인지 검사한다.

alert(isNaN(NaN)) //true
alert(isNaN(10)); //falase - 10은 숫자입니다.
alert(isNaN("10")); //false - 숫자 10으로 바꿀 수 있습니다.
alert(isNaN("blue")); //true - 숫자로 바꿀 수 없습니다.
alert(isNaN(true)); //false - 숫자 1로 바꿀 수 있습니다.