함수 (Function)

함수란, 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차이다.

함수가 필요한 이유

• 코드를 한 번 정의하고, 여러 번 재사용이 가능하다.
• 코드의 가독성이 좋아진다.
• 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽다.
• 한 함수에 다른 인자를 사용하여 함수를 재사용함으로써 다른 결과를 도출할 수 있다.

함수 선언 방법

1. 함수 선언식

함수를 선언(=정의)한다.

function  sayHello(a) {
  let b = a + 1;
}

2. 함수표현식

함수를 할당한다. 변수를 선언하고 함수를 대입하는 방식

var sayHello = function(a) {
 let b = a + 1;
};

함수 호출

선언해 놓은 함수는 같은 이름으로 함수를 호출해야 한다.

함수 호출=실행

/* function addNumber( num1, num2 ) {
return num1 + num2
} *///여기까지 함수 정의 
  
addNumber( 3, 5 );

함수 호출 전까지는 정의한 함수는 실행되지 않는다.

인수와 매개변수

function addNumber( num1, num2 ) {
return num1 + num2
}
addNumber( 3, 5 );

위 코드에서 num1, num2는 매개변수(parameter)라고 부른다.
함수를 호출할 때 3, 5 (함수가 받는 값)을 인자(argument)라고 부른다.

---

return

함수의 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환한다. 💡 MDN(return)

• 함수의 값(output)을 함수를 호출한 곳에서 반환한다.
• 반환할 값으로 사용할 표현식. 생략할 경우 undefined를 대신 반환한다.
• 반환문은 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있다.

function sayHello1(){
	let friend = 'Code Kim'
	return 'Return ' + friend
 }
sayHello1()// 출력 안됨

// 화면에 출력하고 싶다면 console.log()를 사용
function sayHello2 () {
	let friend = 'Code Kim'
 	return 'Return ' + friend
 }
console.log(sayHello2()); // Return Code Kim 

---

return이 필요한 이유

• return한 값을 변수에 할당이 가능하다.
• 여러 기능을 추가하고 싶을 때 효율적으로 여러 기능을 추가할 수 있다.

//변수에 할당
function sayHello3() {
	let sentence = 'Hello '
	let name = 'Code Kim'
	return sentence + name;
  }
let myFriend = sayHello3(); //변수에 값이 담김
console.log(myFrined); //Hello Code Kim 

//return x
function sum(a,b) {
	document.write(a+b);
}
function sumColor(a,b) {
	document.write("<div style='color:red'>"+(a+b)+"</div>");
}
sum(2,7);
sumColor(2,7);

function sum(a,b) {
	return a+b;
}
document.write(sum(2,7));
document.write("<div style='color:red'>"+ sum(2,7) +"</div>");
document.write("<div style='font-size:20px'>"+ sum(2,7) +"</div>");

---

return & console.log 비교

return : 함수의 output 반환하는 결과물
console.log : 단순히 화면에 출력 & 변수에 할당할수 없음

//출력은 되지만 값이 할당안됨 
let number = console.log(10000)
console.log(number)//Return 10000 & undefined

//return 값이 할당됨
function returnTenThousand() {
	return 10000
}
let number2 = returnTenThousand() 
console.log(number2)// Return 10000

---

return & break 비교

return : 함수 실행을 종료하고, 함수를 빠져 나온다.
break : switch, for, while 등 여러번 반복되는 루프의 경우, 해당 루프에서 아예 빠져나갑니다.

// 다음 함수는 i가 3일 때, break문을 만나서, while loop를 종료합니다.
// 그 후에 while문을 빠져나와서 실행 흐름이   return i * x;로 가서
//  3 * x 값을 반환합니다.
function text(x) {
  let i = 0;
  while (i < 6) {
    if (i == 3) {
      break;
    }
    i += 1;
  }
  return i * x;
}

🧐 참고사이트

• Function - MDN
• return - MDN
• return - w3schools