모던 자바스크립트 Deep Dive # 2

자바스크립트 개발환경과 실행방법

자바스크립트 실행환경

• 자바스크립트는 브라우저 환경 또는 Node.js 환경에서도 실행할 수 있다.
• 브라우저에서 동작하는 코드는 Node.js환경에서도 동일하게 동작한다.
• 브라우저와 Node.js는 용도가 다르다.
• 브라우저: HTML,CSS,자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 목적
• Node.js: 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적이다.
• 브라우저와 Node.js 모두 자바스크립트 코어인 ECMAScript를 실행할 수 있다.
• ECMAScript이외에 추가로 제공하는 기능은 호환되지 않는다.

💡 브라우저는 DOM API를 기본적으로 제공한다.

💡 Node.js는 DOM API를 제공하지 않는다. 브라우저 외부 환경에서는 HTML요소를 파싱해서 객체화한 DOM을 직접 다룰 필요가 없기 때문이다.

웹크롤링이란 서버에서 웹사이트의 콘텐츠를 수집하기 위해 웹사이트에서 HTML 문서를 가져온
다음 이를 가공해서 필요한 데이터를 추출하는 경우가 있다. 이를 웹 크롤링이라 한다.
서버 환경은 DOM API를 제공하지 않으므로 DOM라이브러리를 사용해 HTML문서를 가공하기도 한다.

💡 크롬 개발자도구에서 콘솔창에 자바스크립트 코드를 실행할 떄 줄바꿈이 필요한 경우 shift누른 상태에서 엔터키를 누른다.

콜백함수

// n만큼 어떤 일을 반복한다.
function repeat(n) {
	// i를 출력한다.
for (var i = 0; i<n; i++) console.log(i);
}

repeat(5); // 0,1,2,3,4

• repeat 함수는 매개 변수를 통해서 전달받은 숫자만큼 반복한다.
• console.log(i)를 호출한다.
• repeat 함수의 반복문 내부에서 다른 일을 하고싶다면 함수를 새롭게 정의해야 한다.

// n만큼 어떤 일을 반복한다.
function repeat2(n) {
    for(var i = 0; i< n; i++) {
				// i가 홀수일때만 출력한다.
        if (i%2) console.log(i);
    }
}

repeat2(5); // 1,3

• 두 함수들은 반복하는 일들은 변하지 않으며 공통적으로 수행된다.
• 함수의 일부분이 다르기 때문에 매번 함수를 새롭게 정의해야 한다.
• 이 문제는 함수를 합성하는 것으로 해결할 수 있다.
• 함수의 변하지 않는 공통로직은 정릐하고 경우에 따라서 변경되는 로직은 추상화해서 함수 외부에서 함수 내부로 전달하는 것이다.

// 외부에서 전달받은 f를 n만큼 반복 호출한다.
function repeat(n,f) {
	for(var i = 0; i < n; i++){
	f(i);	// i를 전달하면서 f를 호출한다.
	}
}

var logAll = function (i) {
	console.log(i);
};

// 반복 호출할 함수를 인수로 전달한다.
repeat(5,logAll); // 0 1 2 3 4

var logOdds = function (i) {
	if (i % 2) console.log(i);
};

// 반복 호출할 함수를 인수로 전달한다.
repeat(5,logOdds); // 1 3

• repeat함수는 경우에 따라서 변경되는 일을 함수 f로 추상화하고 이를 외부에서 전달받는다.
• 함수의 매개변수를 통해 다른 함수의 내부로 전달하는 함수를 콜백 함수라고 한다.
• 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 한다.
• 고차 함수는 콜백 함수를 자신의 일부분으로 합성한다.

// logOdds 함수는 단 한 번만 생성된다.
repeat(5,function(i) {
	if(i % 2) console.log(i);
};

// 고차 함수에 함수 참조를 전달한다.
repeat(5, logOdds); // 1 3

• 콜백 함수를 익명 함수 리터럴로 정의하면서 곧바로 고차 함수에 전달하면 고차 함수가 호출될 때마다 콜백 함수가 생성된다.
• 콜백 함수는 함수형 프로그래밍 패러다임뿐만이 아니라 비동기 처리 (이벤트 처리,Ajax통신,타이머 함수등)에 활용되는 중요한 패턴이다.

// 콜백 함수를 사용한 이벤트 처리
// myButton 버튼을 클릭하면 콜백 함수를 실행한다.
document.getElementById('myButton').addEventListener('click',function(){
	console.log('button clicked!');
});
// 콜백 함수를 사용한 비동기 처리
// 1초 후에 메시지를 출력한다.
setTimeout(function() {
	console.log('1초 경과');
},1000);

• 콜백 함수는 비동기 처리뿐 아니라 배열 고차 함수에서도 사용이 된다.

// 콜백 함수를 사용하는 고차 함수 map
var res = [1, 2, 3].map(function(item) {
	return item *2;
});

console.log(res); // [2, 4, 6]

// 콜백 함수를 사용하는 고차 함수 filter
res = [1, 2, 3].filter(function (item) {
	return item % 2;
});

console.log(res); // [1, 3]

// 콜백 함수를 사용하는 고차 함수 reduce
res = [1,2,3].reduce(function (acc, cur) {
	return acc + cur;
}, 0);

console.log(res);// 6