JavaScript에서의 함수

함수(function)는 일련의 처리를 모아 이름을 붙인 것으로, 특정 작업을 수행하거나 값을 계산하여 그 결과를 반환합니다. JavaScript에서 함수는 '일급 객체'로 취급되어, 값처럼 변수에 할당하거나 다른 함수의 인자로 전달될 수 있습니다.

함수의 종류

종류	설명	예시
선언식(Function Declaration)	함수 선언문으로 정의하며, 호이스팅이 적용됩니다.	function hello() { console.log('Hello!'); }
표현식(Function Expression)	함수를 변수에 할당하는 형태로 정의합니다. 이름이 없는 함수는 익명 함수라고 합니다.	const hello = function() { console.log('Hello!'); }
화살표 함수(Arrow Function)	ES6에서 도입된, 간결한 문법을 가진 함수 표현식입니다.	const hello = () => { console.log('Hello!'); }
즉시 실행 함수(IIFE)	정의되자마자 즉시 실행되는 함수입니다.	(function() { console.log('Hello!'); })();
생성자 함수(Constructor Function)	new 키워드와 함께 호출되어 객체를 생성하는 함수입니다.	function Person(name) { this.name = name; }
Generator 함수	function* 키워드를 사용하여 정의하며, 여러 번에 걸쳐 나가고 들어올 수 있습니다.	function* generator() { yield 1; yield 2; }

예시

함수 선언식

function add(x, y) {
  return x + y;
}
console.log(add(2, 3)); // 5

함수 표현식

const subtract = function(x, y) {
  return x - y;
};
console.log(subtract(5, 2)); // 3

화살표 함수

const multiply = (x, y) => x * y;
console.log(multiply(3, 4)); // 12
즉시 실행 함수(IIFE)
javascript
Copy code
(function() {
  console.log('IIFE 실행!');
})();

생성자 함수

function Person(name) {
  this.name = name;
}
const person1 = new Person('Alice');
console.log(person1.name); // Alice

Generator 함수

function* idGenerator() {
  let id = 1;
  while(true) {
    yield id++;
  }
}
const generator = idGenerator();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2

함수는 JavaScript에서 중요한 역할을 하며, 다양한 방식으로 사용됩니다. 각 함수 유형은 특정 상황에서 유용하며, 이를 통해 더 유연하고 효율적인 코드 작성이 가능합니다.

매개변수

매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미한다.

인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 값을 말한다.

• 개념 : 세미콜론 안 붙이는 곳
  • if, switch, while, for, function 뒤에
  • 단 아래 형식은 예외로 붙인다.
    • var hello = function() { };

function addNum(x, y, z) { // x, y, z라는 3개의 매개변수를 가지는 함수 addNum()을 정의함.
    return x + y + z;
}
addNum(1, 2, 3); // 인수로 1, 2, 3을 전달하여 함수를 호출함. -> 6
addNum(1, 2);    // 인수로 1, 2을 전달하여 함수를 호출함. -> NaN
addNum(1);       // 인수로 1을 전달하여 함수를 호출함. -> NaN
addNum();        // 인수로 아무것도 전달하지 않고 함수를 호출함. -> NaN

위의 예제에서 addNum() 함수를 호출할 때 인수가 세 개보다 적게 전달되면, 계산할 수 없다는 의미인 NaN을 반환한다.그 이유는 전달되지 않은 나머지 값이 자동으로 undefined 값으로 설정되어, 산술 연산을 수행할 수 없기 때문이다.

하지만 다음 예제처럼 하면 NaN을 반환하지 않고 전달된 인수만을 가지고 정상적으로 계산하는 함수를 작성할 수 있다

function addNum(x, y, z) {
    if(x === undefined) // 함수 호출시 x에 해당하는 인수가 전달되지 않은 경우
        x = 0;          // 변수 x의 값을 undefined에서 0으로 변경함.
    if(y === undefined) // 함수 호출시 y에 해당하는 인수가 전달되지 않은 경우
        y = 0;          // 변수 y의 값을 undefined에서 0으로 변경함.
    if(z === undefined) // 함수 호출시 z에 해당하는 인수가 전달되지 않은 경우
        z = 0;          // 변수 z의 값을 undefined에서 0으로 변경함.
    return x + y + z;
}
addNum(1, 2, 3); // 6
addNum(1, 2);    // 3
addNum(1);       // 1
addNum();        // 0

---

리턴

자바스크립트의 함수를 이용해 작업을 수행하고 결과값을 도출한 값을 다시 받을 수 있다. 결과값을 받기 위해서는 호출하는 부분으로 동작까지 반환받게 되는데 이때, 사용하는 것이retrun이다. 이를 사용하면 함수에서 처리된 결과값을 받을 수 있다.

console.clear();
// 매개변수는 자판기(함수)에서 데이터가 들어오는 구멍이다.
var plus = function(num1, num2) {
    // 지역변수 sum, 전역변수 sum과는 아무 관련이 없다. 동명이인이다.
    var sum = num1 + num2;
    
    // return 구문은 함수(자판기)에서 데이터가 나가는 구멍이다.
    // 함수의 호출구문은 `return` 이후의 값으로 변신한다.
    // 즉 plus(5, 5) 가 실행하면 10으로 변신한다.
    // 참고로 데이터는 오직 딱 1개만 리턴될 수 있다.
    return sum;
};

// 전역변수 sum
var sum;

sum = plus(2, 4); // plus(2, 4) 가 실행되면 6으로 변신한다. 결국 sum에는 6이 들어간다.
console.log("sum : " + sum);

sum = plus(10, 20); // plus(10, 20) 가 실행되면 30으로 변신한다. 결국 sum에는 30이 들어간다.
console.log("sum : " + sum);

// 함수는 자판기이다.
// 함수에 입력값(동전과 음료수 버튼 번호)를 넣으면 반환값(음료수) 를 얻을 수 있다.
// typeof 함수는 인자로 입력받은 값의 타입을 반환(리턴)한다.

console.clear();

var a = 1 > 1;
var typeOfA = typeof(a);
console.log("typeOfA : " + typeOfA);

var b = 1 == 1;
var typeOfB = typeof(b);
console.log("typeOfB : " + typeOfB);

var c = 1 + 1;
var typeOfC = typeof(c);
console.log("typeOfC : " + typeOfC);

var d = "1 + 1";
var typeOfD = typeof(d);
console.log("typeOfD : " + typeOfD);