[JS 기본 문법] 2.15 함수

코테 준비와 함께 JS기본기를 탄탄히 하고자 작성.
자바와 달라서 한 번쯤 짚고 넘어갈 필요가 있거나 내가 몰랐던 JS 기본 문법들을 정리
본 내용은 모두 https://ko.javascript.info/ 내용을 참조하여 작성

함수

함수는 프로그램을 구성하는 주요 구성요소(building block)

기본값

함수 호출 시 매개변수에 인수를 전달하지 않을 경우 해당 값은 undefined가 된다.
즉 매개변수에 값을 전달하지 않아도 에러 없이 undefined가 할당될 뿐이므로 만약 매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않기를 원한다면 함수를 선언할 때 = 를 사용해 기본값을 설정해주면 된다.

const showMessage = ( from, text = "No Message") => {
    alert( from + " : " + text);
};

showMessage('Ann') // Ann : No Message
showMessage('Ann', undefined); // Ann : No Message

매개변수에 값을 전달해도 그 값이 undefined와 엄격히 일치할 경우 기본값이 할당된다.

아래와 같이 복작합 표현식도 기본값으로 설정할 수 있다.

const showMessage = (from, text = noMessageExcept()) => {
    // noMessageExcept()sms text 값이 없을 때만 호출되며 해당 함수의 반환 값이 text의 값이 된다.
}

매개변수 기본값 평가 시점

해당하는 매개변수가 없을 때에만 기본값을 평가한다.

// 내가 주로 사용했던 방법 = 구식 자바스크립트에서 매개변수 기본값 설정하는 방법
const showMessage = (from, text) => {
    text = text || 'No Message'
    // text의 값이 falsy면 기본값이 할당됨
    // 이 방식은 text == '' 일 경우, text에 값이 전달되지 않은 것과 같다.
};

nullish 병합 연산자 ??를 사용해 0처럼 falsy로 평가되는 값들을 일반 값처럼 처리할 수 있으므로 위와 같은 경우에는 ||보다는 ?? 연산자를 사용하는 것이 좋아보인다.

함수 표현식

// 함수 선언문 (Function Declaration)
function sayHi () {
    alert("Hello");
};

// 함수 표현식(Function Expression)
let sayHi = function() {
    alert("Hello");
};

콜백 함수

함수는 반드시 question해야하고 사용자의 답변에 따라 yes()나 no()를 호출하는 코드가 있다고 하자.

const ask = (question, yes, no) {
    if(confirm(question)) yes();
    else no();
};

const showOk = () => {
    alert("동의");
}

const showCancel = () => {
    alert("비동의");
}

ask("동의하십니까?", showOk, showCancel);

이 때 함수 ask의 인수 showOk와 showCancel은 콜백함수 또는 콜백 이라고 불린다.
함수를 함수의 인수로 전달 후 필요시 인수로 전달한 그 함수를 나중에 호출(Called Back) 하는 것.

함수 표현식 vs 함수 선언문

• 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있다.
• 함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있다.