[JavaScript] 03. 언어의 기초

< 프론트엔드 개발자를 위한 자바스크립트>>(2013 인사이트, 한선용 옮김) 의 책을 요약한 내용으로 자바스크립트 제대로 배우기 스터디 그룹(페이스북) 의 글입니다.

3.1 문법

- ECMAScript의 문법은 대부분 C언어, 자바, 펄등 C와 비슷한 언어에서 차용한 것이므로 다른 프로그래밍 언어에 익숙한 개발자는 ECMAScript이 느슨한 문법이 매우 쉽게 느껴질것이다.

3.1.1 대소문자 구분

- 변수, 함수 이름, 연산자 모두 대소문자 구분 (ex. test와 Test는 다른 변수, typeof은 함수 이름에 사용할수 없지만 typeOf는 사용가능한 함수 이름)

3.1.2 식별자

- '식별자'란 변수, 함수, 프로퍼티, 함수 매개변수의 이름. 식별자는 다음 형식에 따라 한 개 이상의 문자로 표기.

1. 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($) 중 하나여아한다.

2. 다른 문자에는 글자나 밑줄, 달러기호, 숫자를 자유롭게 사용가능

- 글자에는 확장 ASCII나 유니코드 문자를 사용할수 있지만 권장하지 않음

- ECMAScript는 관습적으로 카멜 케이스를 사용하며 이 형식을 따르길 권장한다. (카멜 케이스란 첫번째글자는 소문자로 쓰고 단어가 바뀔 때는 바뀐 단어의 첫 글자를 대문자로 쓰는 표기법) - ex). firstSecond, myCar 등등

3.1.3 주석

- ECMAScript는 한 줄 주석, 블록 주석 모두 C언어 스타일로 표기

* 한줄 주석은 (//) 슬래시 두기로 나타냅니다.

// 한줄 주석

* 블록 주석은 슬래시 다음에 *를 사용하여 (/*) 로 시작하며 그 반대 (*/)로 끝납니다.

/*

*이러한 형식을 사용하여

*주석을 여러 줄로 사용할수 있습니다

*/

- 두번 째와 세 번째 줄에있는 *는 가독성을 위해 추가한것이며 기업 애플리케이션에서 이런 형태를 선호합니다.

3.1.4 스트릭트 모드

- ECMAScript 5에서 '스트릭트 모드' 라는 개념을 도입하였는데 이는 기존 방식과는 다른 방식으로 JS를 파싱하고 실행하라고 지시하는것. 

- 안전하지 않는 동작에서는 에러를 반환

- 전체 스크립트에 스트릭트 모드를 적용하려면 다음 문장을 스크립트 최상단에 추가

"use strict";

- 이 선언은 변수에 저장하지 않는 문자열처럼 보이지만, 스트릭트 모드를 지원하는 자바스크립트 엔진은 이를 인식하고 스트립트 모드로 전환한다.

3.1.5 문장

- ECMAScript에서 각 문장은 세미콜론으로 종료.

- C 언어 스타일 문법을 써서 여러 문장을 코드 블록을 합칠 수 있다. {로 시작하여 }로 끝난다.

3.2 키워드와 예약어

- ECMAScript의 키워드와 예약어는 식별자 이름이나 프로퍼티 이름으로 사용하지 않아야한다.

3.3 변수

- ECMAScript는 느슨한 변수타입을 사용하여 변수에 어떠한 타입의 데이터라도 저장이 가능하다.

- 변수를 정의 할 때에는 var 연산자 다음에 변수 이름을 쓴다.

- 변수를 초기화하지 않으면 특별한 값 undefined 가 할당

- ECMAScript에서는 변수 초기화를 지원하여 변수를 선언하는 동시에 값을 할당 가능.

3.4 데이터 타입

- ECMAScript에는 다섯가지 기본적인 데이터 타입 존재 (Undefined, Null, Boolean, 숫자, 문자열)

- 객체라 불리는 복잡한 데이터 타입도 존재한다.

3.4.1 typeof 연산자

- typeof 연산자를 통해 데이터 타입을 알 수 있는데 값(변수)에 typeof 연산자를 적용하면 다음 문자열 중 하나를 반환

* 정의되지 않은 변수 : "undefined"

* 불리언 : "boolean"

* 문자열 : "string"

* 숫자 : "number"

* 함수를 제외한 객체 또는 null : "object"

* 함수 : "function"

3.4.2 undefined 타입

- 기본적으로 초기화하지 않는 변수에는 항상 undefined 값이 할당되므로 초기화할 필요 X

3.4.3 Null 타입

- null은 빈 객체를 가리키는 포인터이므로 null에 typeof를 호출하면 object를 반환한다.

3.4.4 불리언 타입

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

데이터 타입	true 값	false 값
불리언	true	false
문자열	비어 있지 않는 문자열	" "
숫자	0이 아닌 모든 숫자	0, NaN
객체	모든 객체	null
undefined	해당 없음	undefined

* 위 표의 변환 규칙을 반드시 이해하고 있어야 한다.

3.4.5 숫자 타입

- 기본적인 숫자 형식은 10진법

- 16진수, 8진수도 사용가능하지만 실제 계산시에는 10진수로 변환하여 계산

- 부등소수점 표현시 반드시 소수점이 있어야한다.

* NaN

- 숫자를 반환할 것으로 의도한 조작이 실패했을 때 반환하는 값 (에러를 반환하는것이 아니다!)

- 에러를 반환하는 값이 아니므로 NaN끼리도 서로 일치 하지 않는다.

* 숫자 변환

- 숫자가 아닌 값을 바꾸는 함수에는 Number(), parseInt(),  parseFlaot() 함수가 존재한다.

- Number() 함수는 어떤 데이터 타입에서도 쓸수 있으며 다른 두 함수는 문자열을 숫자로 바꾸는 용도로 생성됨.

- 정수 형태의 문자열을 숫자로 바꿀 때는 보통 parseInt() 함수를 사용한다.

3.4.6 문자열 타입

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

- 문자열은 큰따옴표나 작은따옴표로 감싸서 표현

- 문자 리터럴에 대해서 알아둘것

3.4.7 객체 타입

- 객체는 데이터와 기능의 집합

3.5 연산자

- ECMA-262에는 데이터 조작에 쓸 수 있는 연산자가 여러가지 존재한다.

- 계산 연산자, 비트 연산자, 관계 연산자, 일치 연산자 등이 잇다.

3.5.1 단항 연산자

- 단 하나의 값에만 적용되는 연산자를 단항 연산자라 한다.

* 증감 연산자 : C에서 차용한 것이며 피연산자의 앞에 쓸수도 있고 뒤에 사용할수도 있다, 피연산자 앞에 ++ 를 사용하면 피연산자에 1을 더한다.

3.5.2 비트 연산자

- 비트 연산자는 메모리에서 숫자를 표현하는 비트를 직접 조작하는 저수준 연산자이다.

3.5.3 불리언 연산자

- 불리언 연산자에는 NOT, AND, OR 세가지가 존재하며 매우 중요한 존재이다.

* 논리 NOT : 논리 NOT 연산자는 !로 표시하며 ECMAScript의 모든 값에 적용가능하며 결과를 부정하며 동작한다.

* 논리 AND : 논리 AND 연산자는 &&로 나타내며 둘 중 하나라도  값이 다를 경우 false 값을 반환한다.

* 논리 OR : 논리 OR 연산자는 ||로 나타내며 둘 중 하나라도 true 값을 나타내면 true 값을 반환한다.

3.5.4 곱셈 관련 연산자

- 곱셈 연산자는 *를 써서 나타내며 두 숫자를 곱하는데 사용된다.

- 나눗셈 연산자는 슬래시/를 써서 나타내며 첫 번째 피연산자를 두 번째 피연산자로 나눈다.

- 나머지 연산자는 퍼센트 기호%로 나타내며 값을 나눈 나머지 값을 반환한다.

3.5.5 덧셈 뺄셈 관련 연산자

- 덧셈, 뺄셈 연산자 존재

3.5.6 관계 연산자

- 관계 연산자에는 <, >, <=, >= 연산자가 존재하는데 두값을 비교하여 불리언 값을 반환한다.

3.5.7 동일 연산자

- 문자열, 숫자, 불리언 값에서는 비교가 쉽지만 객체가 결부되면 복잡해지면서 ECMAScript에서는 연산자를 두 벌로 분리해서 '동일' '비동일' 연산자는 비교 전에 타입을 변환하며 '일치' '불일치' 연산자는 타입 변환 없이 비교하는것으로 결정

* 동일, 비동일

- 동일 연산자는 ==로 표시하며 동일하면 true값을 반환, 비동일 연산자는 !=로 표현하며 두 값이 동일하지 않으면 true값을 반환

- 일치 연산자는 ===로 나타내며 피연산자의 타입을 변환하지 않아도 같을때에만 true값을 반환

- 불일치 연산자는 !==로 나타내며 피연산자의 타입을 변환하지 않는 상태에서 일치하지 않을때에만 true 값을 반환

3.5.8 3항 연산자

- 3항 연산자는 if else로 해결할 수 있지만, 이보다 더 간편이 사용할 수 있는 장점이 있기 때문에 가끔 쓰이곤 한다. 만일 int형 변수 a, b가 있고 b가 5보다 클 경우 a에 5를 넣고, 아닐경우 a에 b를 넣고싶다면 a = b > 5 ? 5 : b; 와 같이 넣어주면 된다. 할당할 곳 = 비교문? 참일때값 : 거짓일때 값

3.5.9 할당 연산자

- 단순한 할당은 =로 나타내며 단순히 값을 변수에 할당한다.

- 단순 표기목적으로한 복합 할당 연산자들이 존재한다.

3.5.10 쉼표 연산자

- 쉼표(,) 를 사용해 여러문장을 한 문장으로 합칠 때 사용한다.

3.6 문장

- ECMA-262에는 몇가지 문장이 정의되어 있는데 이를 '제어문'이라 부른다.

- ECMAScript 대부분이 문장을 통해 정의되며 일반적으로 키워드와 연결되어 있다.

3.6.1 if 문

- 다음 코드의 문법이 사용된다

if (condition) statement1 else statement2

3.6.2 do-while 문

- do-while 문은 평가전 루프이다. 이 말은 루프의 종료 조건을 평가하기 전에 루프 본문을 실행한다는 뜻이다.

- 루프 본문은 최소 한 번은 반드시 실행된다.

- 아래의 문법이 사용된다

do {

statement

} while (expression);

3.6.3 while 문

- while문은 평가 후 루프이다. 이 말은 루프 본문을 실행하기 전에 종료 조건을 평가한다는 뜻이다.

- 아래의 문법이 사용된다.

while(expression) statement

3.6.4 for 문

- for 문 역시 평가후 루프인데 for 문에서는 루프에 들어가기 전에 변수를 초기화 할 수 있으며 루프 후 코드도 지정할 수 있다.

- 아래의 문법이 사용된다.

for (initialization; expression; post-loop-expression) statement

3.6.5 for-in 문

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

- 아래의 문법이 사용된다.

for (property in expression) statement

3.6.6 문장 레이블

- 문장에 레이블을 붙였다가 나중에 사용가능하다

label: statement

3.6.7 break 문과 continue 문

- break 문과 continue 문을 통해 루프 내부의 코드 실행을 세밀히 조절 가능

- break 문은 즉시 루프에서 빠져나가 루프 다음 문장을 실행

- continue 문은 즉시 루프를 빠져나가지만 루프 실행은 지속됨

3.6.8 with 문

- with 문은 코드의 스코프를 특정 객체에 고정

- 아래의 문법이 사용된다.

with (expression) statement;

- with 문의 의도는 특정 객체를 코드에서 매우 자주 참조할 때 편리하게 작성하자는 것

- 스트릭트 모드에서는 with 문을 금지하면서 문법 에러로 간주

3.6.9 switch 문

- if 문과 관련이 깊으며 C언어 기반의 문법과 매우 비슷하다.

3.7 함수

- 함수는 문장을 캡슐화한 모든 언어의 핵심

- function 키워드로 정의하며 뒤에 매개 변수와 함수 본문을 순서대로 쓴다.

- 아래의 문법이 기본 문법이다.

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

statements

}

- 함수는 반환에 일관성이 있게 생성하는것을 권장한다. (이유 : 나중에 디버그하기 어려울 수 있다.)

3.7.1 매개변수의 이해

- ECMAScript 함수는 매개 변수 숫자를 따지지 않으며 데이터 타입도 체크하지 않는다.

3.7.2 오버로딩 없음

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

후기

1장과 2장에 비해 엄청난 양에 놀랐네요.. 이번장에서는 자바스크립트에 대한 기초 지식을 다루고 있다보니 문법 부분에서는 이해가 쉬웠으나 이론(?) 적인 부분에서는 상당히 난해한 부분도 있어서 복습을 해야할 단원일듯 합니다 ㅜㅜ