📖 [JS] 함수

728x90

< 함수 >

let width1 = 10;
let height1 = 20;
let area1 = width1 * height1;

let width2 = 30;
let height2 = 40;
let area2 = width2 * height2;

console.log("면적: ", area1);
console.log("면적: ", area2);

중복으로 작성된 유사한 기능을 하는 코드들은

동작하는 데는 큰 문제가 없을 수 있겠지만,

이렇게 동일한 기능의 코드를 일일 매번 타이핑해야 하며,

향후 코드를 수정할 경우에 문제를 야기할 수 있습니다.

따라서 자바스크립트에서는 "함수"라는 것이 존재합니다.

getArea(10, 20);
getArea(30, 40);

console.log("면적: ", area1);
console.log("면적: ", area2);

공통으로 자주 사용되는 이런 유사한 코드들을 묶어서,
이름을 붙일 수 있게 해 줌으로써 해당 기능이 필요할 때,
함수의 이름만 간결하게 불러서 기능을 가져다 사용할 수 있는 자바스크립트의 문법입니다.

< 함수 선언 >

함수를 선언하는 방법은

// 함수를 선언하는 방법은 "function 함수명 (소괄호) {중괄호}"

function hello () {
	// 이 중괄호 안에는 함수가 실행되는 코드들을 작성해 주시면 됩니다.
    console.log("안녕하세요");
}

이렇게 함수를 새로 만드는 행위를 "함수 선언"이라고 부릅니다.

이렇게 함수를 선언하고 저장해도

console.log에는 지금 아무것도 출력되지 않습니다.

그 이유는 함수를 선언했다고 바로 실행되는 것이 아니라,

함수의 이름을 불러서 이 함수를 호출했을 때만 실행할 수 있습니다.

// 함수를 선언하는 방법은 "function 함수명 (소괄호) {중괄호}"

function hello () {
    console.log("안녕하세요");
}

hello(); // 함수 호출

따라서 함수 선언이라는 것은 함수가 호출되었을 때,

어떤 코드들을 실행할 것인지 미리 준비해 두는 작업이라고 생각할 수 있습니다.

이때 유의해야 할 점은 함수를 호출할 때에는 반드시 (소괄호)를 함께 작성해야 한다는 점입니다.

그렇지 않으면 아무런 일도 일어나지 않습니다.

function Area() {
	let width = 10;
	let height = 20;
	let area = width * height;
    
    console.log(Area)
}

Area();

이번에는 직사각형의 넓이를 구하는 함수를 하나 생성해 보았습니다.

function Area 함수를 만들고 함수 내부에는 직사각형의 너비와 높이 그리고 넓이의 값을 저장 저장해 주면

넓이를 구한 다음 console에 출력하는 함수가 완성입니다.

하지만 조금 아쉬운 부분이 있습니다.

이 Area 함수에는 넓이를 구하는 함수이지만

항상 고정된 width = 10, height = 20으로 고정된 넓이의 값만 구하고 있습니다.

function Area(width, height) {
		// ↳매개변수	
	let area = width * height;
    
    console.log(Area)
}

Area(10, 20);
	//↳인수

이때 동적으로 Area 함수를 작성하여

호출할 때마다 이 함수가 사용자가 직접 넘겨준 값을 통해서 넓이를 구할 수 있도록 수정할 수 있습니다.

함수를 호출할 때 소괄호 안에 (10, 20) 이런 식으로 콤마로 구분하여 값을 넣어주면,

이 10, 20의 값을 함수가 받아서 사용할 수 있습니다.

이 함수를 선언할 때 만들어 뒀던 function Area "(소괄호)"안에 변수를 선언하는 것입니다.

이때 let, const를 사용하는 것은 아니고, 선언하고 싶은 변수의 이름을 작성하면 됩니다.

위 코드 블록과 같이 widht, height라는 변수를 만들어 작성하면

Area 함수를 호출하면서 첫 번째 값 10은 widht로

두 번째 값인 20은 heigth라는 변수에 저장이 됩니다.

이제 함수 내부에서는 width와 height를 별도로 선언하지 않아도 됩니다.

이때, 함수를 호출하면서 함수에게 전달된 값을 "인수"라고 하며

이렇게 전달된 인수들을 순서대로 저장하는 특수한 함수의 변수들을 "매개 변수"라고 합니다.

function Area(width, height) {
	
	let area = width * height;
    
	return area; // 반환 값
}

Area(10, 20);
let area1 = area(10,20); // 200이라는 값이 area1이라는 변수에 저장

다음으로는 이 함수가 내부적으로 계산한 area라는 결과 값을 이렇게 콘솔에 출력하는 것이 아니라,

"return"이라는 키워드를 사용하면, 이 return 이후에 작성된 값을 반환하게 됩니다.

이러한 값들을 "반환 값"이라고 부릅니다.

또한, 반환 값을 변수에 담아서 활용할 수 있습니다.

마지막으로 함수가 return 문을 만나게 되면 값을 반환하고 종료가 됩니다.

따라서 return 문 아래에 작성된 코드들은 실질적으로 수행되지 않습니다.

< 중첩 함수 >

function Area(width, height) {
	function another() {
    	console.log("another");
    }		

	another();
    let area = width * height;
    
    return area;
}

Area(10, 20);
let area1 = area(10, 20);
console.log(area1);

자바스크립트에서는 함수 안에 또 다른 함수를 선언하는 것도 가능합니다.

another이라는 함수를 area 함수 안에 선언하고, console.log another라는

메시지를 콘솔에 출력하도록 하고, 이 함수에서 실행이 되자마자 another 함수를 호출할 수 있도록 만들면

콘솔창에 area 함수를 호출할 때마다 another라는 함수를 내부적으로 또 호출해서 콘솔에 another이라는

메시지가 출력되는 것을 확인할 수 있습니다.

< 호이스팅 >

자바스크립트의 굉장히 독특한 기능 중 하나입니다.

자바스크립트에서는 area라는 함수의 선언을 함수의 호출보다 아래에 두어도 아무런 문제 없이 잘 수행됩니다.

다른 언어인 C, JAVA와 같은 언어에서는 선언이 이루어지지 않은 함수를 미리 호출하려고 하면,

오류를 발생시키는 게 일반적이지만, 자바스크립트에서는 그렇지 않습니다.

이러한 이유는 "호이스팅"이라는 기능 때문입니다.

호이스팅이란?

우리말로 "끌어올리다"라는 뜻을 가지고 있습니다.

자바스크립트에서의 호이스팅이란 코드의 밑바닥에 작성된 선언문들을

코드가 실행하기 전에 최상단으로 끌어올려서 실행을 시켜주는 기능을 말합니다.

그렇기 때문에 선언문을 호출문 보다 아래에 두어도 내부적으로 알아서 호이스팅 되어 실행되기 때문에

아무런 문제가 되지 않으므로, 좀 더 유연한 프로그래밍을 진행할 수 있습니다.