4. 함수(function)

제민·2024년 9월 10일

JS(JavaScript) 정리

목록 보기

4/6

JavaScript에서 함수는 코드를 재사용하고, 더 효율적으로 작성할 수 있도록 돕는 중요한 개념입니다. 이번 글에서는 선언적 함수, 익명 함수, 함수의 매개변수, 리턴값 등 다양한 함수의 사용 방법에 대해 알아보겠습니다.

1. 선언적 함수

선언적 함수는 함수 이름을 사용하여 정의되며, 호출 시 해당 이름으로 호출할 수 있습니다. 일반적으로 많이 사용되는 함수 정의 방법입니다.

예제 코드

function test1(){
    document.querySelector("#area1").innerHTML += "test1()함수 실행됨<hr>";
}

function 함수명(매개변수, 매개변수) 형식으로 함수를 선언합니다.
해당 함수는 어디서든 호출 가능하며, 미리 정의된 로직을 실행합니다.

2. 익명 함수

익명 함수는 이름이 없는 함수로, 변수에 할당하거나 이벤트 핸들러로 사용할 수 있습니다.

예제 코드

const btn = document.getElementById("btn");
btn.onclick = function(){
    document.getElementById("area2").innerHTML += "이벤트 핸들러로 실행<br>";
}

함수에 이름을 붙이지 않고 변수나 속성에 바로 할당하여 사용할 수 있습니다.
버튼 클릭 시 익명 함수가 실행됩니다.

3. 함수의 매개변수

함수는 매개변수를 받아서 그에 따라 동작을 달리할 수 있습니다. 전달된 값에 따라 함수의 실행 결과를 유동적으로 변경할 수 있습니다.

예제 코드

function test2(name, age, address, isTrue){
    console.log(arguments);
    document.getElementById("area3").innerHTML = name + " " + age + " " + address;
}

매개변수를 통해 함수 실행 시 값을 전달할 수 있습니다.
arguments 객체는 함수 호출 시 전달된 모든 매개변수를 배열 형태로 담고 있습니다.

4. 함수를 매개변수로 활용

함수를 다른 함수의 매개변수로 전달할 수 있습니다. 콜백 함수를 통해 비동기 처리나 함수의 실행을 제어할 수 있습니다.

예제 코드

function sendUserInfo(userInfo, callBack){
    let user = {
        name : "전제민",
        age : 21,
    }
    callBack(user);
}

sendUserInfo({userId: "user01", userPwd: "pass01"}, function(userInfo){
    console.log(userInfo);
});

sendUserInfo 함수는 콜백 함수 callBack을 매개변수로 받아, 특정 작업이 완료된 후 콜백 함수를 실행합니다.

5. this 키워드

this는 현재 객체를 가리키며, 함수 내부에서 동적으로 변할 수 있습니다. 특히 이벤트 핸들러 내에서 this는 해당 이벤트가 발생한 요소를 참조합니다.

예제 코드

function test3(tmp){
    console.log(tmp);
}

this는 함수 호출 시점에서 그 함수를 호출한 객체를 참조합니다.
HTML 요소 내에서 this를 사용하면 해당 요소를 참조합니다.

6. 함수의 리턴

함수는 값을 반환할 수 있으며, 반환된 값은 함수 호출한 곳에서 사용 가능합니다.

예제 코드 (일반 값 반환)

function ran(){
    const random = parseInt(Math.random() * 100 + 1);
    return random;
}

function test5(){
    document.querySelector("#area5").innerHTML += "랜덤값 : " + ran() + "<br>";
}

return 문을 사용하여 함수의 실행 결과를 반환할 수 있습니다.
이 함수는 1부터 100까지의 난수를 반환합니다.

예제 코드 (함수 리턴)

function test6(){
    const inputE1 = document.getElementById("userName");
   
    let alFunk = function(){
        alert(inputE1.value);
    }
   
    return alFunk;
}