[Javascript] Do it! 자바스크립트 입문 - 함수

공부단 4일차 입니다.

 

함수

자주 실행해야 하는 기능에 포함된 명령이 여러 가지일 때 그 명령을 한 번에 실행할 수 있게 한 덩어리로 묶는 것을 함수라고 합니다.

 

이전에 했던 3의 배수 구하는 코드를 함수로 만들기

function multi3() { // 함수 선언
    var num = prompt("숫자를 입력하세요")
    // document.write(typeof(num)) // string

    if(num != null) {
        num = parseInt(num)

        if(num % 3 == 0) document.write("3의 배수")
        else document.write("3의 배수가 아님")
    }
    else {
        alert("취소")
    }
}

<button onclick="multi3()">3의 배수 구하기</button>

 

onclick은 버튼을 클릭했을 때 실행대상인 함수를 알려주는 예약어입니다. 즉, 버튼을 클릭하면 multi3()이라는 함수가 실행됩니다. 그리고 alert()는 내장 함수입니다. 내장함수는 자바스크립트에 포함된 함수입니다. 이렇게 함수를 만들거나 내장함수를 사용해서 필요할 때마다 가져다 사용하면 훨씬 편리합니다.

 

함수의 인자

함수의 가장 큰 장점은 재사용성입니다. 함수에는 값을 지정해서 함수를 실행할 때 해당 함수에 값을 넘겨줄 수 있습니다. 근데 값이 항상 고정된 값이 아닌 사용자에 따라서 다른 값을 전달할 수 있습니다. 이런 재사용성을 위해서 함수에는 인자가 있습니다. 인자는 매개변수와 인수를 한 번에 부르는 말입니다. 매개변수란 해당 함수를 실행하기 위해 필요하다고 지정하는 값을 의미합니다. 인수란 해당함수를 실행할 때 넘기는 값을 의미합니다.

 

let x = parseInt(prompt("x의 값을 입력하시오")) // x와 y를 입력받아 정수형으로 형변환
let y = parseInt(prompt("y의 값을 입력하시오")) // x와 y를 입력받아 정수형으로 형변환
let result = addNum(x, y) // addNum함수 실행. 인수로 x, y 지정. 반환값을 result 변수에 할당
alert(result) // alert() 함수의 인수로 result 지정.

function addNum(a, b) { // addNum()함수 선언 매개변수로 a, b지정
	let sum = a + b
    	return sum // sum을 반환
}

// addNum(10, 50) // 값을 지정

위의 코드는 두 개의 값을 입력받아 그 값들을 addNum() 함수에 넘기고 해당 함수에서는 그 값들을 a와 b로 받아 더한 결과 값을 sum변수에 할당한 후 sum을 return 해서 반환된 값을 result에 할당하여 내장함수 alert()를 사용하여 알림 창으로 출력하는 코드입니다.

 

함수 표현식

익명 함수

익명함수는 이름이 없는 함수입니다. 함수 자체가 식이기 때문에 익명함수를 변수에 할당할 수 있습니다. 또한 다른 함수의 매개변수로도 사용할 수 있습니다.

 

let result = function(a, b) {
	return a + b
}

 

즉시 실행 함수

(
	function() {
    
    	}
)();

(
	function() {

	}
())

 

화살표 함수

const hi = () => { return "hi" }
let sum = (a,b) => { return a+b }
// 혹은
let sum = (a,b) => a+b