up, down 메소드를 제공하는 객체 ladder가 있다.
let ladder = {
step: 0,
up() {
this.step++;
},
down() {
this.step--;
},
showStep: function() {
alert( this.step );
}
};
연어이 메소드를 호출하고 싶으면
ladder.up();
ladder.up();
ladder.down();
ladder.showStep();
이렇게 호출해야되는데 메소드 호출 체이닝을 이용하면
ladder.up().up().down().showStep();
이렇게 바꿀 수 있다. 그리고 각 메소드마다 호출을 연속적으로 하기 위해서는 return.this를 붙여서 쓰면된다.
메모이제이션은 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적계획법(Dynamic Programming)에 핵심이 되는 기술이다.
클로저는 자바스크립트의 중요한 개념중 하나이며 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다.
function outerFunc() {
var x = 10;
var innerFunc = function () { console.log(x); };
innerFunc();
}
outerFunc();
함수 outerFunc 내에서 innerfunc이 선언되고 호출되었다. innerfunc는 내부에서 선언되었기 때문에 변수 x에 접근할 수 있다.
스코프는 함수를 호출할 때가아니라 함수를 어디에 선언하였는지에 따라 결정되는데 이를 렉시컬 스코핑이라고 한다. 위에서 볼 수 있듯이 innerFunc는 함수 outerFunc내부에서 선언되었기 때문에 innerFunc의 상위 스코프는 outerFunc이다. 만약 innerFunc가 전역에서 선언되었으면 상위 스코프는 전역 스코프가 된다.
함수 innerFunc는 자신이 속한 렉시컬 스코프(전역, 함수 outerFunc, 자신의 스코프)를 참조 할 수 있다. 여기서 실행컨텍스트의 개념이 들어간다.
내부 innerFunc가 호출되면 자신의 실행 컨텍스트가 실행컨텍스트 스택에 쌓이고 변수 객체와 스코프체인 그리고 this에 바인딩할 객체가 결정된다. 이때 스코프체인은 전역 스코프를 가리키는 전역 객체와 함수 outerFunc의 스코프를 가리키는 함수 outerFunc의 활성 객체 그리고 함수 자신의 스코프를 가리키는 활성 객체를 순차적으로 바인딩한다. 스코프 체인이 바인딩한 객체가 바로 렉시컬 스코프의 실체이다.
여기서 이제 내부 함수 innerfunc를 함수 outerFunc내에서 호출하는 것이 아니라 반환하도록 한다.
function outerFunc() {
var x = 10;
var innerFunc = function () { console.log(x); };
return innerFunc;
}
var inner = outerFunc();
inner(); // 10
이러면 outerFunc은 innerFunc를 반환하고 콜스택에서 제거되므로 변수 x또한 더이상 유효하지 않게 되어 변수 x에 접근할 수 있는 방법이 없어보이지만 위의 실행값은 10이다. 이처럼 내부함수가 외부함수보다 더 오래 유지되는경우를 클로저(closure)라고 한다.
이벤트 모델은 DOM 구조를 두 번 순회한다. 이벤트가 호출되면 최상위 루트에서 자식 엘리멘트들을 타고 이벤트 타깃까지 내려가는 캡쳐 단계가 일어나고 다시 반대로 이벤트의 타킷으로부터 최상위 루트까지 올라가는 버블 단계가 일어난다. 이렇게 부모 요소와 자식 요소 두 곳에 click이벤트를 생성한 후 자식요소를 클릭하여 이벤트를 호출할 때 클릭하지 않은 부모 요소 에서 클릭이 발생하게 된다. 이런 반응이 나오는 경우는 이벤트 모델의 전파 과정 중 버블링 단계에서 이벤트를 발생하기 때문이다.
이벤트 전달을 막기위한 3가지 방법이 있다.
그래서 일반적으로 원하는 이벤트 동작만 하고 싶을때는 stopPropagation()과 perventDefault() 두개를 동시에 사용한다.
lazy-loading은 리소스를 non-blocking으로 식별하고 필요할 때만 로드하는 전략이다. 이는 렌더링 범위를 줄여서 페이지 로딩속도를 더 빠르게 가져올 수 있다.
검색 엔진 최적화란 웹페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹페이지를 구성해서 검색 결과의 상위에 나올 수 있게 하는 작업을 말한다. SPA의 경우 SEO가 잘 되지 않는 다는 약점이 있다 그래서 정보제공을 목적으로 하는 웹페이지의 경우는 SPA가 아니라 SSR방식을 써서 SEO에 대응할 수 있는 기술을 지원해야 한다.
다른 도메인에서 리소스 요청 시 cross-origin HTTP에 의해 요청을 하는데, 대부분의 브라우저는 보안 상의 이유로 이 요청을 제한한다. 이를 동일 오리진 정책(Same Origin Policy)이라고 한다. 요청을 보내기 위해서는 요청보내는 대상과 프로토콜이 같아야 하고, 포트도 같아야 한다. JSONP(JSON-padding)을 통해 해결하거나 특정 HTTP 헤더를 추가하여 이 이슈를 해결할 수 있다. 이와 같이 타 도메인 간 자원을 공유할 수 있게 해주는 것을 Cross Origin Resource Sharing(CORS)라고 한다.