그냥 단순히 finally에 return이 있으면 finally 없으면 try나 catch구문의 return

이라고 이해해도 사용은 가능 하지만

실제로는 결정 과정이 좀 복잡하다.

According to ECMA-262 (5ed, December 2009), in pp. 96:

The production TryStatement : try Block Finally is evaluated as follows:

1. Let B be the result of evaluating Block.
2. Let F be the result of evaluating Finally.
3. If F.type is normal, return B.
4. Return F.

And from pp. 36:

The Completion type is used to explain the behaviour of statements (break, continue, return and throw) that perform nonlocal transfers of control. Values of the Completion type are triples of the form (type, value, target), where type is one of normal, break, continue, return, or throw, value is any ECMAScript language value or empty, and target is any ECMAScript identifier or empty.

It's clear that return false would set completion type of finally as return, which cause try ... finally to do 4. Return F.

참조: https://stackoverflow.com/questions/3837994/why-does-a-return-in-finally-override-try

bind, call, apply 는 자바스크립트 함수를 부르는 강력한 방법이다.

하지만 지금 프로젝트에서는 context를 넘겨준다는 것에 대한 혼란스러움 때문에 지양되고 있다.

바인드로 함수를 부르면 일단 코딩을 줄 일 수 있다.

그런데 이렇게 하는 것이 얼마나 큰 효율을 얻을 수 있는 지는 생각해 봐야한다.

https://github.com/davidmarkclements/v8-perf

함수 콜에 대한 성능 이슈 관련링크인데 읽어볼만 하다

한줄 요약하면 arrow function 짱짱맨

callback 패턴은 가독성도 정말 안좋고

들여다 보지 않으면 뭔일이 일어나는 지도 파악하기도 힘들다.

함수 설계를 promise를 return하도록 바꿀 수 있다면 편하겠지만

건드릴 수 없는 함수들이 있다.

이럴 경우 래핑해서 await로 바꿀 수 있다.

다음 코드에서 nodeJs의 fs.reddir을 promsie를 리턴하는 함수로 감쌌다.

new Promise 안에 대상 함수를 넣어서 활용해야 한다.

javascript 라이브러리 검색할 때마다

require를 많이 본다.

라이브러리를 도대체 어디서 구해야 하는 지

npm으로 install해도 어떻게 사용해야 하는지 몰라서 한참 해맸다.

일단 저 require어는 require.js 가 아니다.

그리고 apache나 tomcat같은거로 백날 올려봤자 안된다.

nodeJs서버로 돌려야 사용가능하다.

기존 서버스크립트 개발 관점에서 nodeJs 라이브러리만 껴놓으려고 생각한거 자체가 잘못이다.

nodeJs는 자바스크립트를 해석하는 도구다.

html을 파싱하지 못한다.

javascript파일을 실행한다고 생각하면 된다.

node main.js

CLI에서 이와 같이 실행하는게 끝이다.

java 클래스 실행하는 것하고 똑같다.

그러니 당연히 http서버가 아니다.

java로 서버 만들듯이 라이브러리 임포트해서 해야한다.

하지만 훨씬 쉽다.

http와 fs가 없다고 뜨면

node i http fs

하고 모듈을 설치하면 된다.

html파일로 forward한다는 개념이 아니라

그냥 파일 읽어서 스트링을 브라우저에 던져준다고 생각하면 된다. (실제로는 binary로 간다.)

resources는 실제 파일 경로를 찾아간다. 이부분은 각자 편하게 해결해주면 된다.

위 파일을 main.js로 저장했다면 node main.js로 서버를 돌릴 수 있다.

nodeJs는 가장 많은 javascript 라이브러리를 가지고 있으니 프론트엔드 개발자는 nodeJs를 쓰면 많이 이점이 있다.

함수형 프로그래밍에는 여러 공통 함수들이 있다.

예시만 보면 파악할 수 있는 것들이 많은데

reduce는 예시만 봐서는 도대체 뭔지 하나도 모르겠다.

그리고 객체 지향 프로그램에서는 reduce와 같은 패턴을 쓸 경우가 많이 없어서 생각해 내기 쉽지 않다.

하지만 가장 기초적인 최대, 최소값을 구하는 경우 대표적으로 reduce 함수를 사용한다.

getMax함수는 numbers라는 숫자로 구성된 배열을 넣으면

max값과 다음 배열값을 계속 비교한 후

max값을 반환한다.

배열을 넣었더니 number로 줄어든 값을 반환했다.

reduce라는 것은 이렇게 뭔가 나열된 것을 하나로 줄여서 반환한다는 뜻이다.

그리고 reduce는 함수를 인수로 받는다.

그리고 이 함수는 이항함수이고 max와 number가 인수가 된다.

자바스크립트는 첫번째 인자에 reduce값을 반환한다.

이를 람다식으로 표현하면 아래와 같다.

(max, number) => max

이게 기본적으로 reduce에 들어가는 함수 형식이다.

return값만 필요한 알고리즘으로 구현해 주면 된다.

아래와 같이 더 줄여 쓸 수 있다.

추가로 reduce를 사용할 때 초기값 설정이 필요한 경우가 있다.

javascript에서는 reduce의 두번째 인자가 초기값인데

reduce( function, initialValue) 다.

function의 두번째 인자랑 헷갈리지 말긴 바란다.

초기화된 객체가 필요한 경우

reduce( function, {} )

이렇게 해주면 된다.

아직 프라미스도 익숙치 않지만

더 좋은 방법이 나왔다

다음은 

6 Reasons Why JavaScript’s Async/Await Blows Promises Away 라는 제목의 글이다.

https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9

var는 전역 let은 지역 대충 구분은 이러지만

서로 바꿔쓴다고 뭔가 달라진걸 느끼기 힘들다.

let이 왜 있나 했더니 지역 변수를 못잡아 주는 스코프에서 let을 쓰면 로컬화 할 수 있다.

대표적인 예가 for문이다.

for(var i = 0; i < 5; i++ ) {

  $(div).onClick = () => { alert( i ); }

}

for(let i = 0; i < 5; i++ ) {

  $(div).onClick = () => { alert( i ); }

}

javascript에서 비동기 함수를 만드려고

java에서 new Thread 블럭을 만드는 것처럼

setTimeout을 썼었다.

너무 부자연스러웠는데 역시나...

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function

비동기 함수를 wait할 수도 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/async_function

pseudo code는 dom요소가 아니기때문에 event를 붙일 수가 없다.

하지만 프로그래밍으로 안되는 건 없다.

:after 는 해당 태그의 돔으로 인식된다.

하지만 해당 태그의 width 밖에 있다.

offset.x로 포인터 좌표를 찾을 수 있다.

span = document.querySelector('span');
span.addEventListener('click', function (e) {

    if (e.offsetX > span.offsetWidth) {
        // pseudo event
    } else {
        // orginal dom event
    }
});

멋진 아이디어다.

Get 방식으로 서버에 넘길 때 인식 못하는 특수문자때문에 bad request(400)뜰  경우가 있다.

encodeUriComponent를 해줘서 넘기면 되지만

ajax의 data에 넣어서 보내면 알아서 encoding 해준다.