[백엔드 개발에 필요한 최소한의 js 지식] 자바스크립트에서의 함수

자바스크립트에서의 함수는 자바와 다른 형태를 보인다.

 

1. 함수를 상수/변수에 넣을 수 있다. - 이 부분은 js에서 ajax요청할 때 활용된다. 

2. 함수를 매개변수로 넣을 수 있다.

3. 함수가 반환 결과물(return) 이 될 수 있다. 

 

1. 함수를 상수/변수에 넣을 수 있다.

 

아래 코드는 상수를 활용한 함수와 functiond을 활용한 함수를 비교한 것이다.

//상수를 활용한 함수 작성
const addTwoNumber = (one, two) => {
	return one + two;
}

//function을 활용한 함수 작성
function addTwoNumber(one, two) {
	return one + two;
}

//형태가 다른 함수이지만, 호출하는 방식은 동일하다.
let result = addTwoNumber(3,5);
console.log(result);

 

자바스크립트에서는 함수 또한 하나의 '값'으로 취급한다.

 

2. 함수를 매겨변수로 넣을 수 있다, 3. 함수를 반환할 수 있다. 

//func이라는 함수를 매개변수로 받는다.
const wrapperFunction = (func) => {
	const result = func(10,20);
    console.log(result);
}

//아래와 같이 쓸 수 있다.
wrapperFunction(addTwoNumber);

//함수를 반환한다
const returnFunction = () => {
	return addTwoNumber;
}

//아래와 같이 쓸 수 있다.
const result=returnFucntion()(15,35);
console.log(result);

 

'1. 함수를 변수에 넣는다' 는 개념은 AJAX 요청을 위해 알아야 한다.

 

아래는 프론트 측 자바스크립트 코드이다. AJAX 요청을 처리하고 있다. 

//함수를 변수에 넣은 코드를 찾아보자

function onReadyStateChange(event) {
	if (ajaxRequest.readyState === XMLHttpRequest.DONE) { //DONE이 되면
    	if (ajaxRequest.readystatus === 200) { //성공인지
        	console.log(ajaxRequest.responseText);
        } else { //실패인지에 따라 분류
         console.error('request failed');
        }
    }
}

const ajaxRequest = new XMLHttpRequest();

ajaxRequest.onreadystatechange = onReadyStateChange;
ajaxRequest.open('GET', '/get-with-no-parameter');
ajaxRequest.send();

 

ajaxRequest에 XMLHttpRequest(이하 XHR)를 new 키워드로 생성하여 대입하고 있다.

XMLHttpRequest()를 쓴다는 것은 어딘가에 이미 정의되어 있다는 뜻인데, 실제로 이것은 자바스크립트에 내장되어있다. 

 

이는 자바에서 클래스로 인스턴스를 만드는 것과 동일한 행위다. 

 

XHR는 onreadystatechange라는 

 

ajaxRequest 내에 readystatechange 라는 이벤트가 발생하면,

ajaxRequest.onreadystatechange에 변수로 넣어둔 onReadyStateChange() 함수가 실행된다.