[자바스크립트 과외] 6. Day1 요점정리

[자바스크립트의 역사]

2009년에 권고된 ECMAScript5와
2015년 6월에 권고된 ECMAScript6의 차이가 크다고 할 수 있다.

ECMAScript6에 강력하고 유용한 기능이 많이 추가되었기 때문에 사용이 권장되지만,
Internet Explorer 11버전에서의 구현율이 11%이기 때문에, 선택과 집중을 해야한다.

대신 다른 브라우저들의 경우에는 최신 버전을 기준으로 97% 이상 구현되었기 때문에,
IE를 사용하지 않는다는 전제하에서는 ECMAScript6로 마음껏 개발할 수 있다.

아래는 웹 브라우저별 ES6의 구현 상황을 확인할 수 있는 웹사이트이다.
https://kangax.github.io/compat-table/es6/

ECMAScript 6 compatibility table

[토큰(Token)]

토큰이란, 소스코드에 있어서 프로그램을 구성하는 최소 단위(어휘)라고 할 수 있다.
자바스크립트는 인터프리터 언어이기 때문에, 구동시에 소스코드를 토큰 단위로 분해한다.
그리고 분해된 토큰들이 올바른 구문 규약인지 확인하는데, 이를 구문 분석(파싱)이라고 한다.
구문을 분석한 결과, 소스코드에 문제가 없으면 프로그램을 실행한다.
때문에, 중간에 잘못된 구문이 있으면 그 아래 나머지 프로그램이 구동되지 않는 특징을 갖는다.
예를들어 function tmp(){ return 0; }를 토큰 단위로 |를 구분자로 하여 구분하면,
function | tmp | ( | ) | { | return | 0 | ; | }
와 같이 분해할 수 있다.
특히, 토큰과 토큰 사이에는 공백을 넣어도 무관하다.

[문장]

일반적인 문장을 작성할 때에 한 문장이 끝나면 이와 같이 그 끝에 마침표를 찍는다.
자바스크립트의 소스코드도 마찬가지로 한 문장이 끝나면 그 끝에 세미콜론(;)을 찍는다.
자바스크립트의 한 문장은 여러개의 토큰이 모여 이루어지기 때문에
세미콜론이 있어야 그 끝을 명확하게 알 수 있는 것이다.
이와 같은 세미콜론은 자바스크립트에서 자동으로 추가하는 경우도 있고,
자동으로 추가되지 않는 경우도 있으므로 개발자가 명시적으로 표시해주는 것이 가장 좋다.
또한 가독성을 위해 한 줄에는 하나의 문장만 있는 것이 가장 이상적이다.
복합문(블록문)이란, 중괄호 {, } 로 감싸져 있는 문장을 의미한다.

[주석]

여러 줄 주석은 /* */ 로 표현하며, 한 줄 주석은 //로 표현한다.

[변수]

변수를 선언하게 되면, 메모리의 특정 주소에 그 공간을 확보하게 된다.
선언한 변수에 값을 할당하게 되면, 확보된 메모리 공간에 그 값을 저장하게 된다.
변수 선언은 아래와 같다.
var a;
let b;
선언한 변수에 값을 할당하는 것은 아래와 같다.
a = 3;
b = 5;
아래와 같이 선언과 할당을 동시에 할 수도 있다.
var a = 3;
let b = 5;
const PI = 3.141592;

변수 선언 문장과 함수 선언 문장은
기본적으로 호이스팅(Hoisting)이라는 끌어올림을 실행하게 되는데,
이에 따른 혼돈과 에러가 발생할 확률이 존재하기 때문에
가급적이면 변수와 함수의 선언은 자바스크립트 문의 초입에 하는 것이 가장 좋다.
호이스팅을 할 때, 할당하는 문장은 끌어올리지 않는 것이 특징이다.

변수, 함수, 레이블 이름 등 개발자가 직접 정의하는 이름을 식별자라고 하는데,
이런 식별자 이름은 다음과 같은 명명규칙을 따른다.

1. 사용할 수 있는 문자는 알파벳 대소문자, 숫자, 밑줄(_), 달러기호($)이다.
2. 단, 첫글자로 숫자를 사용할 수 없다.
3. 예약어는 식별자로 사용할 수 없다.

예약어란, 자바스크립트 문법을 규정짓기 위해 정의된 특수한 키워드를 의미한다.
예를들면, if, else, this, catch, const, let, var, while 등과 같은 것들이 있다.
이외에도 미리 정의된 전역변수나 전역함수의 이름도 피하는 것이 좋다.
에러는 발생되지 않지만, 사전에 정의된 유용한 변수와 함수들을 사용할 수 없게 되기 때문이다.

[데이터 타입(자료형)]

데이터 타입은 크게 두 가지로 나뉜다. 원시타입과 객체타입.
원시타입에 해당하는 6개만 외워두고 그 이외 나머지는 모두 객체타입이라고 생각하면 쉽다.
원시타입 6가지는 다음과 같다.
숫자형, 문자열형, 논리형, undefined, null, symbol
이외에는 모두 객체 타입이다.
많은 객체 타입 중에 원시타입과 매핑시켜둔 객체가 있는데 그것이 바로
Number객체, String객체, Boolean객체이다.

원시타입은 초기에 할당된 메모리의 공간에 적힌 값이 바뀌지 않는 Immutable 값이며,
객체타입은 초기에 할당된 메모리의 공간에 적힌 값이 바뀌는 Mutable 값이다.
즉, 원시타입에 해당하는 값을 바꾸려면 새로운 메모리 공간을 재할당 해주어야 한다.

문자열은 일반적으로 '로 감싸거나, "로 감싸는 형태로 나타낸다.
이스케이프 문자인 \를 적절히 사용하여 나타낼 수도 있다.
문자열을 나타내는 방식 중 ES6에서 도입된것이 `로 감싸는 형태인데,
${}로써 변수를 문자열에 나타내는 보간 표현식이 특히 유용하다.

[객체]

객체란, 속성(Property, Attribute)와 기능(Function, Method)을 가지고 있는 것을 말한다.
단, 자바스크립트에서는 이 둘을 구분짓지 않고, 기능도 하나의 속성으로 취급한다.
(대신, 그 속성의 경우 함수를 값으로 갖고 있다.)

객체는 아래와 같이 중괄호를 사용하여 선언 및 할당할 수 있다.
const obj = {name : "itisik", age : 28, height : 174};
위 객체에서 이름을 가져오는 방법은 아래와 같다.
obj.name;
obj["name"];
하지만, 가급적 위 방법으로만 값을 가져오기를 추천한다.

위 객체에 새로운 값을 할당하는 방법은 아래와 같다.
obj.weight = 70;
이를 활용해 새로운 속성, 새로운 메서드를 추가할 수 있다.

위 객체에 기존의 값을 삭제하는 방법은 아래와 같다.
delete obj.weight;
이를 활용해 기존의 속성, 기존의 메서드를 삭제할 수 있다.

in 연산자를 통해 특정 객체에 특정 속성(Property, Attribute)이 있는지 여부를 확인할 수 있다.
"weight" in obj;

toString 프로퍼티는 obj 객체에서 만든적이 없지만,
다음 코드를 보면 toString 프로퍼티가 있다고 나오는데,
이는 Object 객체를 상속받았기 때문이며, 이는 뒤에서 자세히 다룬다.
"toString" in obj;

아래의 객체를 통해, this의 개념과 속성, 메서드의 개념을 잡고 이해하는 실습을 진행했다.
const circle = {
center : { x: 1.0, y: 2.0},
radius : 2.5,
area : function () { return Math.PI * this.radius * this.radius; }
}
또, 본인의 신상정보를 담는 객체를 만들고, 호출시 키를 10cm 키우는 메서드를 만들어보기도 했다.

this란, 그 함수를 메서드로 가지고 있는 객체를 의미한다.

[함수]

함수의 이름은 동사 또는 동사로 시작하는 이름으로 짓는다.
함수를 호출할 때 직접 기입하는 값을 argument(인수)라고 하고,
함수를 정의할 때 변수로서 기입하는 값을 parameter(인자)라고 한다.

함수 호출시에는, 호출한 코드에 있는 인수가 함수의 정의문의 인자에 대입되고,
함수 정의문의 중괄호 안에 있는 문장이 차례대로 실행된 뒤,
return문이 실행되면 그 값을 들고 함수를 호출한 코드로 돌아가고,
return문이 실행되지 않으면 undefined를 들고 함수를 호출한 코드로 돌아가게 된다.

인수 여러개를 객체로써 함수에게 전달해주는 방법도 있다.
단, 이 방법을 사용할 때에는
함수 내부의 파라미터의 이름과
전달해주는 객체의 key 값이 일치해야 하므로 주의해야 한다.