JavaScript | 함수의 정의와 호출의 차이점

1. 함수의 정의와 호출 한눈에 보기
2. 함수의 정의
3. 함수의 호출
4. Return
5. Parameter

---

1. 함수의 정의와 호출 한눈에 보기

함수는 크게 함수를 정의하는 부분과 호출하는 부분으로 나뉘어져있다. 
함수의 구성을 살펴보자면 function 이라는 식별자를 사용하며, 함수이름을 지정한 후 소괄호를 사용하여 parameter(매개변수)를 설정하지 않거나 여러개를 설정할 수 있다. 중괄호를 열고 함수에서 사용할 코드를 적게 되는데 마지막 return(반환값)을 설정한다. 

function 식별자 | 함수 정의 시 함수를 구별하기 위해 사용
parameter 매개변수 | 함수 내부로 입력을 전달받는 함수
return 반환값 | 함수의 실행결과를 출력하기 위해 사용
argument 인수 | 함수 호출 시 함수의 매개변수를 통해 받은 입력

 

2. 함수의 정의

위에서 설명한 함수를 도식화 해보자면 input기능을 하는 매개변수,인자를 받아 함수 내부에서 처리를 하게 되고 내부에서 output 기능인 반환값을 지정할 수 있게 된다. 함수는 이 세가지 기능을 꼭 포함해야지 선언할 수 있는 것은 아니며 일부의 기능들만 가진 함수도 함수의 역할을 할 수 있다. 

 

1) 기능 수행만 하는 함수 

function printHello(){
 console.log("Hello world!");
}

2) input과 기능 수행만 있는 함수

function myName(name){
 console.log("My name is : " + name);
}

3) 기능수행과 output만 있는 함수

function addNumbers(){
	let result = 100 + 200;
	return "100+200 = " + result;
}

 

3. 함수의 호출

이렇게 정의된 함수들은 실행이 되지 않는다. 실행을 하려면 꼭 함수 외부에서 호출을 해주어야 한다. 즉, 함수를 호출하면 함수 내에 있는 코드가 실행된다.

호출은 함수이름(인자); 로 호출할 수 있으며 인자를 넣어야 할 함수에 아무것도 넣지 않게 되면 undefined로 출력된다는 걸 알아야한다. 

 

4. Return

return이란 함수 내부에서 쓸 수 있는는 키워드이며 호출한 곳에 데이터 전달 역할과 함수의 종료를 의미한다. 모든 함수는 반환을 하는 것이 기본적이지만 생략도 가능하다. 함수가 반환을 생략하면 undefined라는 값을 반환하게 된다.

function add(a,b){
  let value = a+b;
}
console.log(add(1,2)); //undefined

//---------------------------------------------------------------

function add(a,b){
  let value = a+b;
  return value;
}

console.log(add(1,2)); //3

//----------------------------------

function add2(a,b){
  let value = a+b;
}
console.log(add2(1,2)); //undefined

함수 본문에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단된다.

function returnTest(){
  return ;
  return 500;
  return 200;
  return 100+200;
}

console.log(returnTest()); //undefined

 

5. Parameter

Parameter란 함수를 호출하려는 사람으로부터 필요한 데이터를 받아오기 위해 함수 내부에서 조금이나마 이해하기 쉬운 의미있는 이름을 부여해 놓은것이다. 인자를 넣지 않고 함수를 호출하게 되면 undefined로 출력되며 인자에는 여러가지 자료형을 담을 수 있다. 

function myNameAge(name,age){
  let result = "My name is " + name + ". My Age is " + age;
  return result;
}

let info1 = myNameAge("wecode1",10);
let info2 = myNameAge("wecode2",25);
let info3 = myNameAge("wecode3",45);

console.log(info1); // My name is wecode1. My Age is 10
console.log(info2); // My name is wecode2. My Age is 25
console.log(info3); // My name is wecode1. My Age is 45