자바스크립트는 왜 그 모양일까? 11장 ~ 15장

{ " number " : 11 , " chapter " : " 문장 " }

- 프로그래밍 언어는 표현 언어( expression language )와 문장 언어( statement language ) 로 나눌 수 있다.

    ㆍ문장언어는 문장과 표현식을 가지고 있다

    ㆍ표현언어는 표현식만 가지고 있다.

 

선언문

let 문

    ㆍ현재 스코프에 새로운 변수를 선언한다

    ㆍ초기화 없이 변수 선언 가능

    ㆍ초기화를 할 수도 있지만, 초기화하지 않을 경우 변수의 초기 값은 undefined로 지정

    ㆍlet문에서는 여러 개의 변수를 한번에 선언 가능

    ㆍ구조분해 할당 ( destructuring, 디스트럭처링 )도 허용

 

* 구조 분해 할당 : 객체나 배열로 부터 여러 개의 변수를 선언하고 값을 초기화하는 일종의 문법 꼼수?!

let {huey, dewey, louie} = my_little_object;

// -----------------------------------
let huey = my_little_object.huey;
let dewey = my_little_object.dewey;
let louie = my_little_object.louie;

OR

let [zeroth, wunth, twoth] = my_little_array;

// ------------------------------
let zeroth = my_little_array[0];
let wunth = my_little_array[1];
let twoth = my_little_array[2];

 

function 문

    ㆍfunction 문은 세미콜론으로 끝나지 않지만, let 문과 선언문은 세미콜론으로 끝난다

    ㆍ호이스팅( hoist )이 된다.

    ㆍ즉, 해당 선언문은 여러분이 지정한 위치가 아닌, 함수 몸체나 모듈의 최상위로 옮겨진다.

    ㆍfunction문에 만들어진 모든 let문 역시 함수 최상위 위치로 옮겨지고, 그 다음 함수 객체를 해당 변수로 할당하는 문자이 위치한다.

 

const 문

    ㆍ초기화가 반드시 있어야 하며, 변수가 나중에 선언될 수 없다는 것이다.

    ㆍconst를 사용하면 프로그램을 훨씬 깔끔하게 만들 수 있다. const 선호!

    ㆍconst는 당연히 constant( 상수 )의 줄임말이다.

    ㆍconst는 변수이지 값이 아니다. ( 변수: 값에 대한 참조를 담음 , 값 : 절대 변수를 가질 수 없다. ) 

 

표현식

할당문

    ㆍ변수의 참조를 바꾸거나, 변경 가능한 객체 혹은 배열을 수정

    ㆍ4가지 부분으로 구성

1. 좌측값( value ), 즉 값을 받을 표현식

    ㆍ변수, 또는 객체와 객체 내부의 속성에 대한 접근을 나타내는 점(.) 및 속성 이름을 나타낼 수 있는 표현식

          ( 예 : varialbe.prop_a )

    ㆍ또는 배열과 배열의 요소 또는 속성을 나타낼 수 있는 대괄호 표현식

          ( 예 : my_array[0], my_array["prop"] )

2. 할당 연산자

    ㆍ = : 할당

    ㆍ += : 더하기 할당

    ㆍ -= : 빼기 할당

    ㆍ *= : 곱하기 할당

    ㆍ /= : 나누기 할당

    ㆍ%= : 나머지 할당

    ㆍ **= : 지수 할당

    ㆍ >>>= : 오른쪽 밀기 할당

    ㆍ >>= : 부호 확장 오른쪽 밀기 할당

    ㆍ <<= : 왼쪽 밀기 할당

    ㆍ &= : 비트 곱(and) 할당

    ㆍ |= : 비트 합(or) 할당

    ㆍ ^= : 비트 배타적 논리합(xor) 할당

3. 저장할 값을 나타내는 표현식

4. 세미콜론 ( ; )

 

    ㆍ ++ 나 -- 같은 증감 연산자는 사용하지 않는 것이 좋다.

 

- 표현식은 순수하지 않다.

- 할당문과 delete는 그 이름대로 무언가를 변화시킨다.

- 반환 값이 필요없거나 버리는 호출문은 함수의 사이드 이펙트 ( side effect )에 의존한다.

- 표현식은 고유 식별자 키워드로 시작하지 않는 유일한 문장이다.

 

분기

- 자바 스크립트는 두 개의 분기문, 즉 if와 switch를 가지고 있다

- switch문 사용 권장 X

- 순수 함수 스타일로 코드를 작성할 것이라면, 삼항 연산자를 쓰는 것이 좋다.

- 삼항 연산자 전체를 괄호로 둘러싸라!

 

반복문

- 자바스크립트는 for, while, do 라는 세 가지 반복문을 제공

- for문은 안쓰는 것이 좋다.

- while 과 do 의 차이

    ㆍwhile : 조건문이 반목문의 가장 위에 있으며 반복문 시작전에 체크

    ㆍdo : 조건문이 가장 아래에 있으면 반복 후에 체크한다는 것

- 반복문을 만드는 가장 좋은 방법은 꼬리 재귀 ( tail recursion )를 사용한다는 것이다.

 

중단문

- 자바스크립트에는 4가지 중단문, 즉 break, continue, throw, return 이 있는데, 이들 중 그 어떤 것도 goto가 아니다.

- break : 반복문을 빠져나갈 때 사용

- continue : goto문을 쓴 것처럼 반복문의 가장 꼭대기로 실행 흐름을 변경한다.

- throw : 예외를 발생시킨다

- return : 함수의 실행을 끝내고 반환 값을 지정

 

그외 내용들

- debugger 문은 실행의 중단을 유발할 수 있는데, 중단점에 도달한 것과 비슷하다.

- debugger 문은 개발 과정에서만 사용해야 하며, 완성된 프로그램에서는 반드시 제거 해야한다.

 

{ " number " : 12 , " chapter " : " 함수 " }

- 확산 연산자 ( ... )는 인자 목록이나 매개변수 목록에서 사용할 수 있다

- 확산 연산자를 인자 모록에서 쓰면 전개( spread )문이라고 부른다.

- 배열을 받아서 전개함으로써 배열의 각 요소가 구분된 인자처럼 전달되도록 해준다.

 

- 함수를 호출되면 활성 객체 ( activation object )가 만들어진다

- 활성 객체는 눈에 보이지 않고, 숨겨진 데이터 구조로서 호출된 함수의 반환 주소와 실행에 필요한 정보를 저장하고 이를 호출된 함수에 바인딩해준다.

 

- 함수 객체는 prototype이라는 속성을 가지고 있다.

- prototype은 특정 상태에 있는 요소를 선택하기 위한 의사 클래스 모델 (pseudoclassical model)에서 사용되는데, prototype의 사용은 권장하지는 않는다.

- prototype 속성은 Object.prototype에 대한 델리게이션 링크와 constructor 속성을 가진 객체의 참조를 가지고 있는데, constructor 속성은 또한 함수 객체에 대한 역참조를 가지고 있다.

 

- 자유 변수 ( free variable ) : 함수가 함수 바깥에 선언된 함수를 사용하는 것

- 묶인 변수 ( bound variable ) : 매개변수를 포함해서 함수 내부에 선언된 변수

 

{ " number " : 13 , " chapter " : " 제너레이터 " }

- 자바스크립트는 ES6부터 제너레이터 ( generator ) 라는 기능 도입

- 제너레이터는 어설픈 객체 지향 프로그래밍 ( OOP, Object-Oriented Programming ) 인터페이스 사용

- ES6 제너레이터가 필요없다. 쓸만한 다른 기능이 생길 때까지 쓰지 않기를 권장

// 제너레이터 함수
function* counter() {
    let count = 0;
    while(true) {
        count +=1;
        yield count;
    }
}

// 위와 같은 기능 ( 추천 )
function counter() {
    let count = 0;
    return function counter_generator() {
        count += 1;
        return count;
    }
}

 

- 제너레이터는 순수 함수와 비순수 함수 사이의 경계에 있다.

- constant 팩토리로 만들어진 제너레이터는 순수 함수이지만, 대부분의 제너레이터는 완벽하게 비순수 함수이다.

 

{ " number " : 14 , " chapter " : " 예외 " }

- 문제가 생기면 throw 문을 통해 신호가 발생

- 자바스크립트는 throw에 어떤 값이든 허용

- throw로는 Error 생성자로 만들어진 값을 던지는 것이 일반적이지만 필수는 아니다.

throw "That does not compute.";

- try문의 예외 핸들러에 코드 블록을 붙일 수 있다. 예외 핸들러는 catch 절에 있다

- 하나의 함수에서는 try를 두 번 이상 쓰지 않도록 주의해야 한다.

 

되감기

- 예외 처리가 신경 써야 할 중요한 점 하나는 제대로 동작하는 프로그램에는 성능 패널티가 없어야 한다는 것

- 예외가 발생하면 성능이 저하될 수도 있지만 그런 상황은 극히 드물며, 설령 저하된다 해도 그 폭이 크지 않다.

 

예외 동작 메커니즘

- 자바스크립트 컴파일러는 컴파일하는 모든 함수에 대한 캐치맵( catchmap )을 만든다.

- 캐치맵은 함수 몸체의 명령어 위치와 이들을 처리하는 catch 문을 연결해 준다.

- 프로그램이 정상적으로 동작할 때는 캐치맵이 쓰일 일이 없다

- throw문이 실행되면 예외가 발생하고 현재 함수에 대한 캐치맵을 참조

- 지정된 catch 절이 있으면 해당 절이 제어권을 얻어 실행

- 지정된 catch 절이 없으면 함수를 호출한 곳을 찾는다.

- 함수를 호출한 측이 ' 현재 함수 '가 되며 함수를 호출한 위치가 문제를 일으킨 새로운 위치가 된다

- 이 과정을 반복해서 catch 절을 찾을 때까지 가상의 호출 스택을 타고 내려간다

- 호출 스택이 없다면 처리할 수 없는 예외가 된다.

 

일상적인 예외

- 얽히고 설킨 결합들로 아주 많은 실행 경로가 만들어지며, 할당된 자원을 해체하는 작업이 아주 어려워질 수 있다

- 이 문제를 해결하기 위해 finally 절이 추가되었다.

- finally 절은 매개변수가 없는 함수로서 try 및 각 catch 절의 모든 탈출 시점에서 묵시적으로 호출된다.

 

비동기 프로그래밍에서의 예외 처리

- 예외 처리는 스택을 거꾸로 되감으면서 진행된다.

- 예외로 발생된 값은 스택의 더 아래쪽에 있는 함수 호출로 전달된다.

- 스택이 아래에서 위로 쌓인다는 점을 생각하면, 결국 가장 처음 함수를 호출한 곳까지 전달

- 비동기 프로그래밍에서 스택은 매 회 비워진다.

- 그래서 더 이상 존재하지 않는 스택을 거슬러 가서 예외 값을 전달할 수가 없다. 현재 존재하는 지역적인 문제만 알릴 수 있다.

 

신뢰성

- 예외 객체의 세부 사항은 아주 중요하며 프로그래머가 알아야 할 유용한 정보

 

{ " number " : 15 , " chapter " : " 프로그램 " }

- 자바스크립트 코드는 일반적으로 이벤트나 메시지를 전달받으면 실행되도록 등록되거나, 혹은 다른 쪽에서 사용할 수 있도록 함수를 익스포트(export)하는데 많이 사용된다.

 

전역변수

- 옛날 브라우저의 프로그래밍 모델에서는 함수 바깥의 모든 함수 선언이 페이지(page) 스코프에 추가됨

- 전역(global) 스코프라고도 알려져 있다

- 이는 좋지 않다. 공유된 전역 변수를 통해서 보안 취약점이 발생할 수 있다.

- 전역 변수는 악의 근원이다!

 

모듈

- 함수 바깥에 변수를 선언하는 더 좋은 방법은 모듈( module ) 스코프에 선언하는 것이다.

- 모듈 스코프의 변수들은 해당 소스 유닛에 있는 함수들만 볼 수 있다.

- 더 강하고, 더 안전하고, 더 보안이 강한 설계를 할 수 있다

- 다른 소스 단위와 함께 쓰려면 import와 export 문을 써서 명시적으로 하게 된다.

export & import

- 익스포트함으로써 모듈은 다른 모듈에게 자신의 기능을 사용할 수 있도록 허용한다.

- 모듈은 일반적으로 하나의 함수, 또는 함수로 가득찬 한 개의 객체와 같이 한 가지만 익스포트해야한다.

- 익스포트된 것은 다른 많은 모듈이 사용할 수 있으므로, 예상하지 못한 오류나 교차 오염을 막기 위해서 익스포트되는 내용을 동결하는 것이 좋다

- 익스포트는 일종의 인터페이스다. 인터페이스는 간단하고 명료해야함!

 

- 소스 유닛의 코드 몸체는 한 번만 실행된다.

- 즉, 임포트하는 여러 주체들은 동일한 익스포트 내용을 공유한다.

- 익스포트된 내용이 자체 상태를 가지고 있는 데 반해, 임포트해서 쓰는 곳에서는 이들이 아주 깨끗하고 공유되지 않는 인스턴스라고 생각하는 경우 문제가 생길 수 있다.

- 깨끗하고 공유되지 않은 인스턴스를 만들 수 있는 팩토리 함수를 익스포트하는 것이 좋다

- export 문은 인스턴스를 만들지 않는다.

export default exportation;

- import 문은 다른 위치에서 초기화된 값을 가져오는 특수한 const문 처럼 사용할 수 있다.

import name from string literal;

- export 문은 한번만 쓰는게 좋지만, import 문은 필요한 만큼 많이 사용해도 상관없다

- import 문은 파일의 최상단에, export 문은 가장 아래에 쓸 것

 

응집도 ( Cohension ) 과 결합도 ( Coupling )

- 좋은 모듈은 응집도가 높다.

- 다시말해 모듈의 모든 요소가 어우러져 하나의 목적을 이루기 위해 함께 동작한다는 것!

- 나쁜 모듈은 좋지 않은 구조와 더불어 모듈에서 너무 많은 일을 하려고 하다 보니 응집도가 낮다

- 좋은 모듈들은 약하게 결합되어 있다.

- 좋지 않은 모듈은 강한 결합도를 초래한다.

- 상호 의존적인 모듈은 결국 서로 강하게 결합할 수 밖에 없죠. 전역 변수만큼 나쁘고 쓸데 없이 거창한다.

- 모듈 인터페이스를 간단 명료하게 만들어라, 의존성을 최소화해라, 

→ 높은 응집도와 약한 결합도가 좋은 모듈