[JavaScript] 함수

dev_vming·2023년 11월 11일

JavaScript

목록 보기

2/7

📚 JavaScript 함수

📕 함수란?

함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것으로, 코드의 재사용성을 높여준다.

사용방법

함수는 아래와 같이 작성하는 것이 기본적이다.

function 함수명 ( [인자...,[인자]]){
	코드;
	return 반환값;
}

함수의 소괄호 안에는 인자라는 값이 차례로 들어오는데,
이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수다. 인자는 경우에 따라 생략할 수 있다.

예시 코드는 아래와 같다.

function numbering (){
	i = 0;
	while(i < 10){
		console.log(i);
		i += 1;
	}
}
numbering(); //함수호출

numbering이라는 함수가 정의되어있고, 이는 0부터 9까지 출력하게 된다.

함수의 효용성

함수가 없다면 0부터 9까지 출력하는 코드를 5번 반복하라고 할 때, 위의 함수 내부 내용을 5번 입력해야 한다. 이 때 수정이 필요하다면 5개의 함수에서 하나씩 수정이 필요하다.

아래와 같이 함수를 사용하면 반복 작업에 용이하다.

function numbering (){
	i = 0;
	while(i < 10){
		console.log(i);
		i += 1;
	}
}

numbering(); 
numbering(); 
numbering(); 
numbering(); 
numbering(); //5번 호출

for(let i = 0; i < 5; i++){
	numbering();
} //반복문을 사용할 때도 용이

반복문은 그 당시의 반복에만 사용되지만, 함수는 한 번 만들어두면 언제든지 어디든지 재사용 가능하다. 또한 유지 보수가 용이하다는 특징도 있다. 코드가 불필요하게 길어질 이유도 없으니 가독성 측면에서도 이점을 보인다.

📗 함수의 입력

인자와 매개변수

함수의 인자는 함수로 유입되는 입력 값을 의미한다. 인자로 어떤 값을 전달하느냐에 따라 함수가 반환하는 값이나 메소드의 동작 방법을 다르게 할 수 있다.

function get_argument(arg){
	return arg*1000;
}

alert(get_argument(1)); //1000 알림
alert(get_argument(2)); //2000 알림

이때의 arg는 매개변수(parameter) 1,2와 같이 받게 되는 값들을 인자(argument)라고 한다. 두 가지를 섞어서 표현하는 경우도 있다.

아래 예제와 같이 복수의 인자를 가질 수도 있다.

function get_argument(arg1, arg2){
	return arg1 + arg2;
}

alert(get_argument(10, 20)); //30 알림
alert(get_argument(20, 30)); //50 알림

📘 함수의 출력

return

함수의 출력은 return 키워드를 사용하여 표현한다. return은 뒤에 따라오는 값을 함수의 결과로 반환하는 동시에 함수를 종료 시킨다.

function get_member1(){
	return 'ming';
}
function get_member2(){
	return 'dang';
}
alert(get_member1());
alert(get_member2()); //'ming', 'dang' 알림

위 예제에서 get_member1 함수의 return 값은 'ming', get_member2의 return 값은 'dang'이다.

📙 다양한 함수 정의 방법

함수선언식, 함수표현식, 즉시실행표현식

자바스크립트에서 함수를 정의하는 방법은 여러가지가 있다.
아래 예제를 통해 몇 가지를 확인할 수 있으며, 함수선언식이 일반적으로 가장 많이 사용된다.

//함수선언식
function greeting(name) {
  console.log('환영합니다!'+name+'님');
}
greeting('ming');

//함수표현식 (명명)
let numbering = function numbering (){
	i = 0;
	while(i < 10){
		console.log(i);
		i += 1;
	}
}

//함수표현식 (익명)
let numbering = function (){
	i = 0;
	while(i < 10){
		console.log(i);
		i += 1;
	}
}

//즉시실행표현식
(function numbering (){
	i = 0;
	while(i < 10){
		console.log(i);
		i += 1;
	}
})();