[자바스크립트] 함수 총정리 (문법, 매개변수, 인수, 호출, 반환)

함수 Function

• 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록
• 하나의 실행단위
• 호출하여 해당 작업 반복 수행(재사용)

매개변수(parameter)

매개변수(parameter)란 함수를 호출할 때 인수(argument)로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수이다.

주의

• 가급적 한가지 일만 정의할 것
• 매개 변수는 최대 3개 이내로 작성

문법

function 함수이름(매개변수1, 매개변수2,...) {
    함수가 호출되었을 때 실행하고자 하는 실행문;
}

예시

function addNum(x, y) {
    return x + y;
}
// -> 함수 정의

addNum(2, 3); // 5
// -> 함수 호출

• addnum : 함수이름
• x, y : 매개변수(parameter)
• 2, 3 : 인자(argument)

함수 선언식, 표현식

function add(x, y){
  return x + y;
}
//함수 선언식

const add = function (x, y){
  return x + y;
}
//함수 표현식

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

화살표 함수

const add = (x, y) => x + y;

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

 

---

함수 호출

var sum = addNum(2, 3); 
// 함수 addNum()을 호출하면서, 인수로 2과 3를 전달한다.
// 함수의 호출이 끝난 뒤에는 그 반환값을 변수 sum에 대입한다.

그런데, 자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않는다.

따라서 addNum(2, 3, 5) 처럼 3개가 들어가더라도 인수 2, 3 만 전달하여 5를 반환한다.

ES6, 기본값을 통해 undefined 변수가 들어오면 초기화 지정이 가능함

y값 인수를 전달하지 않은 경우 기본값 y = 10으로 값 초기화

function addNum (x, y = 10){
  return x + y;
}
console.log(addNum(2)); //12

// 인수 y값을 정의하지 않았기 때문에 undefined가 전달되었고
// 지정한 값인 y = 10 으로 초기화 됨

Dynamic parameters (The arguments object 인수 객체)

arguments 해당 내장 함수에 전달된 인수의 값을 인덱스로 액세스하여 배열과 같이 표현할 수 있는 객체.

예시

function func1(a, b, c) {
  console.log(arguments[0]);
  // Expected output: 1

  console.log(arguments[1]);
  // Expected output: 2

  console.log(arguments[2]);
  // Expected output: 3
}

func1(1, 2, 3);

매개변수 값 지정 없이도 핸들링 가능

function addNum (){
  console.log(arguments);
}
addNum(1,2) //Object { 0: 1, 1: 2 }

예시

function addNum (){
  return arguments[0] + arguments[1];
}
let result = addNum(1,2);

console.log(result); // 3

---

함수 반환

return 이후의 실행문은 실행하지 않기 때문에 return을 break 대신 쓰기도 함

function addNum(x, y){
  return x + y;
  console.log("이 코드는 수행을 안함")
}
console.log(addNum(2, 3)); //5

default return value는 undefined로 반환된다.

function addNum (){}

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

조건문과 함께 사용하여 함수를 반환

(숫자 모두 일치 ~ 당첨시에 true 반환 하도록 함)

function winNum(x, y){
	if(x == 2 && y == 3) return true
  	else return false
}
console.log(winNum(2, 3)); //true
console.log(winNum(3, 3)); //false