언어의 기초

3장 언어의 기초

이 포스팅은 "프론트엔드 개발자를 위한 자바스크립트(2013 인사이트, 한선용 옮김)"에서 발췌 요약한 것입니다.
 

3.1 문법 훑어보기
3.2 데이터 타입
3.3 제어문
3.4 함수 이해

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


대소문자 구분
변수, 함수이름, 연산자 모두 대소문자를 구분한다.


식별자
식별자란 변수나 함수, 프로퍼티, 함수 매개변수의 이름으로 다른문자에는 자유롭게 사용할수 있으나 첫글자는 반드시 글자나 밑줄(_),달러기호($)중 하나로 한다.

ECMAScript 식별자는 내장 함수와 객체가 카멜케이스로 표기되어 있어 이 형식을 따른다.
- 키워드와 예약어 및 true, false, null은 식별자로 사용할 수 없다.


주석

// 한줄주석
/* 
* 블럭주석은 슬래시다음 아스테리스크를 쓴 형태(/*)로 시작하며
* 그 반대(*/)로 끝난다. 
*/

스트릭트 모드
ECMAScript 5에서 도입한 '스트릭트 모드'는 기존과 다르게 자바스크립트를 파싱하고 실행하라는 것으로 스크립트 맨 위에 "use strict"; 를 추가하여 적용한다.
함수 하나만 스트릭트 모드로 전환하려면 함수본문 앞에 추가한다.

문장
ECMAScript에서 문장은 세미콜론으로 종료하며 세미콜론으로 끝내지 않으면 압축했을때 문법 에러가 발생할수 있고 C언어 스타일의 문법과 같이 코드블록은 여는 중괄호 {} 로 시작해서 닫는 중괄호 {}로 끝난다.



3.2 키워드와 예약어
키워드와 예약어는 식별자 이름이나 프로퍼티 이름에 쓸수 없다.



3.3 변수
키워드와 예약어는 식별자 이름이나 프로퍼티 이름에 쓸수 없다.

변수를 정의할때는 var 연산자 다음에 변수 이름을 쓰는데 var는 키워드이며 변수 이름은 식별자다.
변수를 초기화하지 않으면 특별한 값 undefined가 할당되는데 ECMAScript에서는 변수 초기화를 지원하므로 변수를 선언하는 동시에 값을 할당할 수 있다.

   
var message = "hi"; 

var 연산자는 변수를 로컬 스코프에서 정의한다. 함수안에서 var를 써서 변수를 정의하면 해당 변수는 함수를 종료하는 즉시 파괴된다.

변수를 여러개 선언하려면 다음과 같이 각변수를 쉼표(,)로 구분하여 한문장에서 선언할수 있다.

   
var message = "hi",
    found = false,
    age = 29; 

3.4 데이터 타입
ECMAScript에는 '원시 데이터 타입'이라고도 부르는 Undefined, Null, Boolean, 숫자, 문자열 다섯가지 기본적인 데이터 타입이 있다.
복잡한 데이터 타입이라고 불리는 객체는 이름-값 쌍의 순서없는 목록이고 모든 데이터는 여섯가지 타입중 하나에 속하며 한가지 데이터 타입이 여러 특성을 가질수 있다.


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

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

typeof는 함수가 아니라 연산자이므로 괄호는 쓰지 않아도 되고 기술적으로 함수는 객체로 간주된다.

   
var message = "some string";
console.log(typeof message); // "string"
console.log(typeof 94); // "number" 

3.4.2 undefined 타입
var를 써서 변수정의를 했지만 초기화하지 않았다면 undefined가 할당됩니다. 

var message; // var message == undefined
console.log(message == undefined); // true

undefined는 빈 객체를 가리키는 포인터인 null과의 비교의 목적으로 추가된 속성으로 추가되었다. 

console.log(age); // 에러 

정의하지 않은 변수에 typeof를 호출하면 "undefined"를 반환한다.



3.4.3 Null 타입
null은 빈 객체를 가리키는 포인터이므로 typeof를 호출하면 "object"를 반환하고 null == undefined를 비교하면 true를 반환하지만 두 값은 다르게 쓰인다.
객체를 사용해야 하지만 해당 객체를 이용할 수 없을때는 항상 null이 와야한다.


3.4.4 불리언타입
불리언타입은 true, false 두가지 리터럴 값만 가지고 있지만 Boolean() 함수를 호출하여 모든 타입을 불리언 값으로 변환할수 있다. 

   
var message = "Hello world";
var messageAsBoolean = Bollean(message); 

3.4.5 숫자타입
기본적인 숫자 리터럴 형식은 10진법이다.
대단히 크거나 작은 부동소수점 숫자를 표현할때는 'e-표기법'을 쓴다.

NaN
숫자를 반환할 것으로 의도한 조작이 실패했을 때 반환하는 값으로 에러가 아니다.
NaN에는 고유한 특성이 있는데 NaN이 포함된 조작은 항상 NaN을 반환하고 어떤 값과도 일치하지 않으므로 ECMAScript에서는 isiNaN() 함수를 따로 제공한다.
isNaN() 함수는 받은 값이 '숫자가 아닌 값'인지 검사하고 숫자로 바꿀 수 있는 값 'number', boolean은 숫자로 변환하므로 숫자로 변환할수 없는 값을 넘기면 true를 반환한다.

- isNaN() 함수에 객체를 넘길수도 있는데 이때 객체의 valueOf() 메서드를 호출하여 확인하고 없다면 toString() 메서드를 호출해서 반환받은 값을 숫자로 바꿀수 있을지 확인한다.

숫자변환
숫자가 아닌 값을 숫자로 바꾸는 세가지 함수는 어떤 데이터 타입에도 사용가능한 Number() 함수와, 문자열을 숫자로 바꾸는 parseInt(), parseFloat() 함수가 있다.


Number() 함수의 매개변수로

불리언 값을 넘겼다면 true, false를 각각 1과 0으로 바꿔 반환한다.
null을 넘겼다면 0을 반환한다.
undefined을 넘겼다면 Nan을 반환한다.
객체를 넘겼다면 valueOf() 메서드를 호출하고 결과가 NaN이라면 toString() 메서드를 호출한후 반환한다.

perseInt() 함수는 항상 진법 매개변수를 함께 명시하는 습관을 들이는것이 좋다.
perseFloat() 함수는 항상 10진수를 기준으로 파싱한다.


3.4.6 문자열 타입
문자열 데이터 타입은 16비트 유니코드 문자의 연속이다

문자 리터럴

\n 줄바꿈
\t 탭
\\ 역슬래시
\' 따옴표

문자열 변환
- 값에 toString() 메서드가 존재한다면 매개변수 없이 호출하여 결과를 반환한다.
- 값이 null이라면 "null"을 값이 undefined라면 "undefined"를 반환한다.


3.4.7 객체타입
ECMAScript에서 객체는 데이터와 기능의 집합으로 Object 타입의 '인스턴스'를 만들고 프로퍼티나 메서드를 추가하여 객체를 만들수 있다. 

var o = new Object(); 

Object타입은 자바의 java.lang.Object 처럼 이 타입에서 파생하는 모든 객체의 원형이고 Object 타입의 인스턴스는 Object 타입의 프로퍼티와 메서드를 모두 상속한다.




3.5 연산자
ECMAScript에는 '원시 데이터 타입'이라고도 부르는 Undefined, Null, Boolean, 숫자, 문자열 다섯가지 기본적인 데이터 타입이 있다.
복잡한 데이터 타입이라고 불리는 객체는 이름-값 쌍의 순서없는 목록이고 모든 데이터는 여섯가지 타입중 하나에 속하며 한가지 데이터 타입이 여러 특성을 가질수 있다.


단항 연산자
단 하나의 값에만 적용되는 연산자이며 가장 단순한 연산자이다.


증감 연산자
C언어에서 차용한 것이며 피연산자의 앞이나 뒤에 쓴다. ++을 피연산자 앞에 쓰면 피연산자에 1을 더하고 -- 를 쓰면 피연산자에서 1을 뺀다.
증감연산자를 변수 앞에 쓰면 변수의 값을 바꾼 다음 문장을 평하하는데 이를 보통 부작용이라고 말한다.


단항 플러스와 단항 마이너스
단항플러스는 숫자형 값에는 변화가 없고 숫자가 아닌 값에 적용하면 형 변환 함수인 Number()와 마찬가지로 동작한다.
단항마이너스 연산자는 숫자형 값의 부호를 바꾸는 용도로 사용하고 숫자가 아닌 값에 적용하면 단항 플러스와 같은 규칙을 적용하고 그 결과의 부호를 바꾼다.



3.5.2 비트 연산자
비트 연산자는 IEEE-754 64비트 표현을 직접 조작하지는 않지만 값을 32비트 정수로 변환하여 비트 연산자를 적용한 후 결과를 다시 64비트로 바꾼다.


3.5.3 불리언 연산자
불리언 연산자에는 NOT과 AND, OR 세 가지가 있다.

논리 NOT
느낌표(!)로 표시하며 데이터 타입에 관계없이 항상 불리언 값을 반환하는데 먼저 피연산자를 불리언 값으로 변환한 다음 그 결과를 부정하며 동작한다.
논리 NOT 연산자는 값을 불리언 타입으로 바꾸는데 유용한데 연달아 두개를 쓰게 되면 Boolean() 함수를 쓴 것과 마찬가지 효과가 있다.

논리 AND
앰퍼센트 2개(&&)로 나타내며 피연산자가 불리언 값이 아니어도 사용할수 있다.

논리 OR
파이프 2개(||)로 표현하며 피연산자가 불리언 값이 아니어도 사용할수 있는데 피연산자중 하나가 불리언이 아니라면 논리 OR에서 불리언 값을 반환하지 않을수도 있다.
논리 OR 연산자의 행동을 이용해서 변수에 null이나 undefined가 저장되지 않게 할수 있다. 

var myObject = preferrendObject || backupObject; 

3.5.4 곱셈관련연산자
피 연산자 중 숫자가 아닌 값은 이면에서 Number() 함수를 이용해 타입을 바꾸는데 빈 문자열은 0으로 취급되고 불리언 true는 1로 취급된다.

곱셈
피연산자 중 하나가 숫자가 아니면 이면에서 Number()를 적용하고 기타 규칙을 적용해 숫자로 변환한다.

나눗셈
슬래시(/)기호로 구분하고 첫번째 피연산자를 두번째 피연산자로 나눈다

나머지
퍼센트 기호(%)로 나타내며 두 피연산자가 모두 숫자라면 일반적인 나눗셈을 적용하고 나머지를 반환한다.



3.5.5 덧셈 관련 연산자
피연산자중 하나가 문자열인 경우 두번째 문자열을 첫번째 문자열에 합친다.
피연산자 중 하나가 문자열이라면 다른 피연산자를 문자열로 변환하고 두 문자열을 합친다.



3.5.6 관계연산자
관계연산자는 미만(<)과 초과(>), 이하(<=), 이상(>=)이 있고 불리언 값을 반환한다.



3.5.7 동일연산자
동일/비동일 연산자는 비교하기 전에 타입을 변환하며 일치/불일치 연산자는 타입변환 없이 비교하는것으로 정했다.

동일과 비동일
두 변수가 동일한지 판단하는 동일 연산자는 == 로 표시하며 두 연산자가 동일하면 true를 반환한다.
비동일 연산자는 != 로 나타내며 두 연산자가 동일하지 않으면 true를 반환한다.
이렇게 피연산자를 비교하기 전에 변환하는 것을 '타입강제'라 부른다.

두 연산자가 모두 객체라면 같은 객체인지 비교하고 두 피연산자가 모두 같은 객체를 가리킨다면 동일 연산자는 true를 반환한다.

일치와 불일치
일치 연산자는 === 로 나타내며 피연산자의 타입을 변환하지 않아도 같을 때에만 true를 반환한다.



3.5.8 3항 연산자
이 코드는 boolean_expression을 평가한 결과에 따라 변수 variable에 다른값을 저장하는데 true로 평가되면 true_value가 저장되고 false로 평가되면 false_value가 저장된다. 

var max = (num1 > num2) ? num1 : num2; 

num1이 num2보다 크다면 max에 num1이 저장되고 작거나 같다면 num2를 max에 저장한다.



3.5.9 할당 연산자
단순한 할당은 = 로 나타내며 덧셈이나 곱셈 관련 비트 시프트 연산자와 = 기호를 합쳐 복합 할당 연산자를 반들수 있다. 

   
var num = 10;
num += 10; // num = num + 10 

3.5.10 쉼표 연산자
문장을 하나의 문장으로 합칠때 사용한다.

   
var num1 = 1, num2 = 2, num3 = 3; 

쉼표 연산자를 값할당에 쓰면 항상 표현식의 마지막 값을 반환한다 

   
var num = (5, 1, 3, 8, 0); // num에는 0이 저장된다 

3.6 문장
ECMAScript에 '제어문'이라고 정의된 몇가지 문장이 있다.


3.6.1 if문

if (condition) {
 statement1
} else {
 statement2
}

condition(조건)에는 어떤 표현식이든 사용가능하며 불리언 값으로 평가되지 않는것도 자동으로 해당 표현식의 결과에 Boolean() 함수를 호출해 불리언 값으로 바꾼다.
condition이 true로 평가되면 statement1을 실행하고 false로 평가되면 statement2가 실행된다.


3.6.2 do-while문(평가전 루프)
루프의 종료 조건을 평가하기 전에 루프 본문을 실행하는 루프로 최소 한번은 반드시 실행된다

do {
 statement
} while (expression);

3.6.3 while문(평가후 루프)
루프 본문을 실행하기 전에 종료 조건을 평가하는 루프로 루프 본문을 단 한번도 실행하지 않을 수도 있다.

while (expression) {
 statement
}

3.6.4 for문(평가후 루프)
루프에 들어가기 전에 변수를 초기화 할수 있으며 루프 코드도 지정할수 있다

for (initializetion; expression; post-loop-expresstion){
 statement
}

for루프는 조건 표현식이 true로 평가될 때만 실행하므로 while문과 마찬가지로 루프 본문의 코드를 실행하지 않을 때도 있고 루프 본문을 실행하면 루프 후 코드 역시 실행하여 변수(i)의 값을 바꾼다.


3.6.5 for-in문
엄격한 반복문으로 for-in문은 객체의 프로퍼티를 나열하는데 사용한다.

for (var property in expression) {
 statement
}

3.6.6 문장레이블
label : statement



3.6.7 break 문과 continue 문
break 문과 continue 문을 통해 루프내부의 코드 실행을 세밀히 조절할수 있다.
break문은 즉시 루프에서 빠져나가 루프 다음 문장을 실행하는 반면 continue문은 루프를 즉시 빠져나가긴 하지만 루프 실행은 계속된다.

var num = 0;
for (var i = 1; i < 10; i++){
 if(i % 5 == 0){
  break;
 }
 num++;
}

3.6.8 with문
코드의 스코프를 특정 객체에 고정하여 사용하므로 특정 객체를 코드에서 자주 참조할때 편리하게 작성하자는 의도로 사용한다.

with (expresstion) {
 statement;
}

with문 내부의 변수는 우선 지역변수로 간주하지만 지역변수에서 식별자로 찾을수 없다면 location 객체의 프로퍼티 중에서 같은 이름으로 검색하여 location 객체의 프로퍼티로 평가된다.
스트릭트 모드에서는 width문을 금지하며 문법 에러로 간주하고 성능에 악영향이 있어 with문을 쓰는것은 좋지않은 사례로 간주한다.


3.6.9 switch문
switch문은 if문과 관련이 깊고 C기반 언어의 문법과 매우 비슷하다

switch (expression){
 case value : statement
  break;
 case value : statement
  break;
 case value : statement
  break;
 default : statement
}

switch문의 각 case는 '표현식이 value와 일치하면 statement를 실행하라'는 의미다.
break 키워드를 만나면 코드 실행을 멈추고 switch 문을 빠져나가라는 의미로 break 키워드를 쓰지 않으면 다음 case를 계속 평가한다.
default 키워드는 case 중 value로 평가되는 것이 없을 때 실행한 문장을 가리키는 else문과 같은 역할을 한다.


각 case 문은 불리언 값을 반환하므로 각 case 문을 순서대로 평가하면서 true인 것을 찾거나 default 문을 만날때까지 진행한다.
switch 문은 일치 연산자(===)로 값을 비교하므로 타입 변환은 일어나지 않는다




3.4 함수
함수는 문장을 캡슐화하여 언제든 실행할 수 있게 하는 모든 언어의 핵심으로 ECMAScript 에서 함수는 function 키워드로 정의하며 그 뒤에 매개 변수와 함수 본문을 순서대로 쓴다.

function functionName(arg0, arg1, ..., argN){
 statement
}

함수는 이름으로 호출하며 매개변수를 넘길 땐 괄호 안에 넣는데 매개변수가 여러개라면 쉽표로 구분한다.

   
 funtion sayHi(name, message){
 alert("Hello" + name + "," + message);
}

sayHi("Nicholas", "how are you today?");

함수를 호출하면 "Hello Nicholas, how are ypu today?"가 표시된다.

ECMAScript의 함수는 꼭 값을 반환하지 않아도 되고 모든 함수는 언제든 return 문 뒤에 반환할 값을 써서 값을 반환할 수 있다. 

   
 
   
 


function sum(num1, num2){
 return num1 + num2;
 alert("Hello world"); // 실행되지 않음
}

var result = sun(5, 10); // result: 15

return 문 뒤에 반환값을 쓰지 않아도 되는데 이렇게 하면 return 문을 만나는 즉시 멈추고 undefined 값을 반환하므로 일반적으로 함수에서 값을 반환할 필요가 없고 함수 실행을 멈추기만 할 때 return 문의 반환값을 생략하여 사용한다.
함수는 항상 값을 반환하거나 항상 반환하지 않도록 일관성있게 작업해야 혼란이 없고 디버그하기 쉽다.


스트릭트 모드에서는 함수에 여러가지 제한이 있다.
- 함수 이름과 매개변수 이름에 eval 이나 arguments는 사용할수 없다.
- 서로 다른 매개변수에 결코 같은 이름을 쓸 수 없다.

3.7.1 매개변수의 이해
ECMAScript는 매개변수 숫자를 따지지 않고 데이터 타입도 체크하지 않는다.
매개변수가 배열로 표현되기 때문에 함수에서 매개변수를 두 개 받도록 만들었더라도 반드시 두개가 아닌 한 개, 세 개, 또는 아에 넘기지 않아도 에러로 간주하지 않는다.
이 배열은 항상 함수에 전달되지만 함수는 배열에 어떤 값이 들어있는지 체크하지 않는다.
함수는 arguments라는 객체를 하나 갖는데 이 객체를 통해 매개변수 값에 접근할 수 있고 arguments[0], arguments[1] 형태로 접근하며 매개변수 갯수를 length 프로퍼티를 통해 알수 있다는 면에서 배열처럼 동작하기는 하지만 Arrat의 인스턴스는 아니다. 

   
function sayHi(){
 alert("Hello" + arguments[0] + "," + arguments[1]);
} 

위 함수와 같이 name과 message 매개변수를 쓰지 않아도 같은 결과를 얻을수 있다.
ECMAScript에서는 매개변수에 이름을 붙인다고 해서 함수 시그니처를 만들고 나중에 검사하지 않기 때문에(유효성 검사를 하지 않는다) 이름 붙은 매개변수는 편리하긴 하지만 반드시 필요한것은 아니다.

arguments 객체의 length 프로퍼티를 통해 함수에 매개변수가 몇개 전달되었는지 알수 있고 이런 방법을 통해 개발자는 함수가 넘겨받는 매개변수에 맞게 반응하는 코드를 만들수 있다.
또한 arguments 객체를 이름 붙은 매개변수와 함께 쓸수 있다.

3.7.2 오버로딩 없음
ECMAScript 함수에는 다른 언어에서 사용하는 오버로딩이 없다.