JavaScript - 함수(function)란?

함수는 코드를 작성하다 보면 중복되는 작업을 하는 코드를 작성해야 하는 경우가 있는데, 매번 똑같은 코드를 작성해서 구현하는 것은 비효율적이고 코드 자체도 가독성이 매우 떨어진다.

 

그래서 함수를 이용하여 한 번만 작성하고 필요할 때 그 필요한 함수를 호출하여서 작업을 하는 것이 좋다.

 

함수를 만드는 방법은 함수 선언을 하여 만든다.

 

함수 선언

함수 선언 방법은 function 키워드를 이용하여 다음과 같은 구조를 가진다.

//함수 선언//

function 함수명 () {
	//함수 내용
}

기본 구조에서 함수명 옆 괄호를 이용하여 함수 안에서 매개 변수를 이용한 함수도 만들 수 있다. 

필요한 개수만큼 매개 변수를 줄 수 있고, 쉼표(,)를 이용하여 구분한다.

function 함수명(parameter1, parameter2, .... parameterN){
	//함수 내용
}

 

함수 호출

사용한 함수를 필요에 따라 호출하여 쓸 수 있다.  선언한 함수 이후에 호출을 해야 한다.

//함수 선언//
function 함수명(parameter1, parameter2, .... parameterN){
	//함수 내용
}
//함수 호출//
함수명()

함수의 가장 큰 역할인 중복 코드 방지를 위하여 함수 호출 시 같은 과정을 반복하는 코드 중 바꾸고 싶은 값('인자')을 바꿔서 호출하면  쉽고, 간단하게 바꿔서 호출할 수 있다. parameter의 종류와 argument 값의 위치(순서는) 동일해야 원하는 값이 나온다.

함수명(Argument1, Argument2, Argument3, ..... , ArgumentN)

 

함수 선언과 호출 예시

function classMate(name, age){
    console.log("name: " + name +", age: " + age)
}

classMate("kim", 21)
classMate("Lee", 25)
classMate(29, "Baek")  //에러는 아니지만 원하는 결과값이 아니다.

촐력 결과

지역 변수와 전역 변수

지역 변수는 함수의 코드 블럭(스코프, 중괄호 안)에서 선언한 변수이고, 전역 변수는 코드블럭 밖에서 선언한 변수이다.

// 지역 변수 message // 

function showMessage (){			//함수 선언
	let message = "Hello!!"			//지역 변수 message
    console.log(message)
}

showMessage ()					// 함수 호출

console.log(message)   				//Error : 지역 변수인 message는 코드블럭 밖에서 호출 불가

//전역 변수 userName // 
let userName = "kim"
							//함수 선언
function showMessage (){
	let message = "Hello, " + userName
    console.log(message)					
}

showMessage ()						//함수 호출




//전역 변수 userName // 
let userName = "kim"
							//함수 선언
function showMessage (){
	userName = "Lee"				//함수 내부에서 수정 가능
	let message = "Hello, " + userName
    console.log(message)					
}

showMessage ()						//함수 호출

지역 변수와 전역 변수를 쉽게 이해하기 위해서는 틴팅(썬팅)처리 된 유리창을 떠올리면 쉽다.

안에서는 밖이 보이지만(지역변수는 전역 변수를 사용할 수 있지만) 밖에서는 안이 안 보인다(전역 변수는 지역변수를 사용할 수 없다.)

 

 

Return

함수를 호출하면 특정한 값을 반환한다. 그 반환을 원하는 곳에서 하기 위해 return 키워드를 이용하여 작성할 수 있다.

return 은 함수 내에 어디서든 위치할 수 있고, 코드 진행상황이 return을 만나게 되면 그 즉시 그 함수는 종료되고, 그 값을 반환한다.

함수를 작성하면 코드 블럭 내에 return 키워드를 적지 않아도 기본 값으로 적용되어 있다.

 

return은 함수 내에 코드 블럭마다 return을 주어 블럭마다 원하는 값을 반환받을 수 있다.

return 코드를 만나면 함수가 종료되기 때문에 원하는 위치를 잘 파악하여 코드를 작성하여야 한다.

function showMessage (){
	console.log("Hello!")
	return //( 반환 값 )//
    	console.log("hello!")   //return에서 함수가 종료되었기 때문에 뒷 부분은 출력이 안된다.
}

//함수를 호출 했을 떄 함수의 값을 return 뒤에 값을 써준다.
function getSum (x, y){
    return x+y
}

//return 여러번 사용//

function checkAge(age) {
  if (age >= 18) {
    return true;
  } else {
    return confirm('보호자의 동의를 받으셨나요?');
  }
}