코딩이론/Javascript

chapter.09 함수

Yeo Wun 2024. 12. 2. 21:30

1.  함수의 정의와 역할

  • 정의 : 함수는 하나의 이름 아래 여러 명령어를 그룹화한 코드 블록이다.
  • 역할 
    • 코드 재사용 : 반복되는 코드를 함수로 만들어 필요할 때 호출해서 사용.
    • 모듈화 : 프로그램을 작은 단위로 나눠 이해하기 쉽고 유지보수가 편리해짐
    • 가독성 향상 : 코드의 가독성을 높여 헙업이 수월해짐
  • 기본구조
function 함수이름(매개변수1, 매개변수2) {
    // 실행할 코드
    return 결과값; // 반환값 (필수는 아님)
}

 

  • 함수의 원리 : 함수 선언 > 함수 호출 /
    • 매개변수는 함수가 입력값을 받도록 도와준다. 
    • 반환값은 함수가 실행 결과를 반환할 수 있도록 해준다.

 

 

 

2. 함수 선언 방법

 

1) 기본 함수 선언 (Function Declaration)

function sayHello (){
	console.log("Hello World!");
};

sayHello(); //"Hello World!" 출력

 

 

2) 함수 표현식 (Function Expression)

 함수를 변수에 저장해서 사용할 수 있다.

const sayHello = function(){
	console.log("hello, Werld");
};

sayhello(); //"hello, Werld" 출력

 

 

3) 화살표 함수 (Arrow Function)

 

ES6(ECMAScript 2015)에서 도입된 함수 표현식의 새로운 문법으로 깔끔하고 간결한 문법 덕분에

함수 표현식을 더 간결하게 작성할 수 있다.

const sayHello = () => console.log("Hello, World");
sayHello();

 

 

 

 

3. 매개변수와 인수

 

  • 매개변수 (Parameter) : 함수 정의할 때 사용되는 변수
  • 인수 (Argument) : 함수 호출할 때 전달되는 값
function add(a, b) {  // a와 b는 매개변수
    return a + b;
}
console.log(add(2, 3));  // 2와 3은 인수, 결과: 5

 

 

매개 변수에는 인수가 전달되지 않았을 때 기본값을 설정할 수 있다.

 

function greet(name = "친구") {
    console.log(`안녕하세요, ${name}!`);
}
greet(); // "안녕하세요, 친구!" 출력
greet("코마"); // "안녕하세요, 코마!" 출력

 

 

 

 

 

4.  함수의 반환값(Return Value)

  • return 키워드를 사용해서 함수가 값을 반환할 수 있다.
  • 함수는 하나의 값만 반환할 수 있지만, 객체나 배열을 사용하면 여러 값을 묶어 반환할 수 있다.

1) 하나의 값만 반환하는 경우

function multiply(a, b) {
    return a * b;
}
console.log(multiply(3, 4)); // 12

 

 

2) 객체를 반환하는 함수

// 사용자 정보를 반환하는 함수
const createUser = (name, age) => { // 화살표 함수를 이용한 createUser라는 함수 선언
  return { // retrun 값으로 객체를 작성
    name: name,
    age: age,
    greet: function () { // greet라는 메소드 작성 
      console.log(`안녕하세요, ${this.name}입니다!`);
    },
  };
};

const user = createUser("코마", 25);
console.log(user.name); // 코마
console.log(user.age); // 25
user.greet(); // 안녕하세요, 코마입니다!

 

 

> 간결한 객체 반환 (프로퍼티 이름과 값이 같으면 축약 가능)

const createUserShort = (name, age) => ({ name, age }); 
// 키와 값의 내용이 같아서 축약함
// name : name, age : age

const userShort = createUserShort("코메", 30); // 함수에 매개변수 넣은 값을 userShort라는 변수로 선언
console.log(userShort); // { name: '코메', age: 30 }

 

 

3) 배열을 반환하는 함수

// 두 수의 합과 곱을 배열로 반환하는 함수
const calculate = (a, b) => {
  const sum = a + b; 
  const product = a * b;
  return [sum, product]; // 배열 반환
};

const result = calculate(3, 4);
console.log(result); // [7, 12]
console.log(`합: ${result[0]}, 곱: ${result[1]}`); // 합: 7, 곱: 12
//sum, product의 값이 각각 배열로 들어가서 [0] [1] 로 표현 되었다

 

 

 

4) 구조 분해 할당(Destructuring)과 함께 사용하기

객체나 배열을 반환하는 함수는 구조 분해 할당을 사용하면 더 깔끔하게 값을 꺼낼 수 있다.

const createPet = (name, type) => ({ name, type });
// 간결한 객체 반환을 해줬다

const { name, type } = createPet("바둑이", "강아지");
// createPet라는 함수를 호출하는 값을 가진 반환문을 상수로 선언했다.

console.log(name); // 바둑이
console.log(type); // 강아지

 

// 매개변수를 선언해주고 연산을 반환값으로 설정했다.
const calculateNumbers = (x, y) => [x + y, x * y];

/*
calculateNumbers(5, 6)을 호출하여 배열 [11, 30]을 반환받는다.
배열 구조 분해 할당(array destructuring)을 사용하여,
반환된 배열의 첫 번째 값은 sum에, 두 번째 값은 product에 할당된다.
결과적으로 sum = 11과 product = 30이 된다
*/
const [sum, product] = calculateNumbers(5, 6);

// 객체값으로 선언된 변수를 출력 요청했다
console.log(`합: ${sum}, 곱: ${product}`); // 합: 11, 곱: 30

 

 

 

 

5.  콜백 함수 (Callback Function)

함수의 인수로 다른 함수를 전달할 수 있다.

 

function greetUser(name, callback) {
    console.log(`안녕하세요, ${name}!`);
    callback();
}
/*
callback을 매개변수에 넣고 함수 마지막에 callback();를 넣으면서 
다른 함수를 호출한다.
메서드처럼 동작하는 것처럼 보이지만 
객체에 속한 함수인 메서드와 달리 다른 함수의 인자로 전달되어 나중에 호출되는 함수이다.
*/

function endMessage() {
    console.log("환영합니다!");
}

greetUser("코마", endMessage);
// 출력:
// "안녕하세요, 코마!"
// "환영합니다!"

 

 

 

 

 

6.  함수 스코프 (Scope)

 

  • 전역 스코프: 함수 밖에서 선언된 변수 → 어디서든 접근 가능.
  • 지역 스코프: 함수 안에서 선언된 변수 → 해당 함수 내에서만 접근 가능.
let globalVar = "전역 변수";

function showScope() {
    let localVar = "지역 변수";
    console.log(globalVar); // "전역 변수"
    console.log(localVar); // "지역 변수"
}
showScope();
console.log(localVar); // 오류! (localVar는 함수 외부에서 접근 불가)

 

 

 

 

 

7.  재귀 함수 (Recursive Function)

  • 함수가 자기 자신을 호출하는 함수이다
  • 주로 반복 작업이나 알고리즘 구현에 사용된다.
  • 기저 조건(종료 조건)이 없으면 재귀함수는 계속 호출되면서 무한 루프에 빠질 수 있다.
function factorial(n) {
    if (n === 1) return 1; // 종료 조건
    return n * factorial(n - 1); // 자기 자신 호출
}
console.log(factorial(5)); // 120 (5 * 4 * 3 * 2 * 1)
  • 실행 순서
  1. factorial(5) → 5 * factorial(4)
  2. factorial(4) → 4 * factorial(3)
  3. factorial(3) → 3 * factorial(2)
  4. factorial(2) → 2 * factorial(1)
  5. factorial(1) → 종료 조건으로 1을 반환.

이후 계산을 끝내면서 결과가 반환된다.

  • factorial(1)이 1을 반환 -> factorial(2)는 2 * 1 = 2를 반환
  • factorial(3)은 3 * 2 = 6을 반환
  • factorial(4)는 4 * 6 = 24를 반환
  • factorial(5)는 5 * 24 = 120을 반환

 

 

 

8.  클로저 (Closure)

함수가 외부 함수의 변수를 기억하고 접근할 수 있는 매커니즘이다

function outerFunction(outerVar) {
    return function innerFunction(innerVar) {
        console.log(`외부 변수: ${outerVar}, 내부 변수: ${innerVar}`);
    };
}
// 아래 코드에서 outerFunction("코메") 가 호출 되어 outerVar의 매개변수에 코메라는 값을 넘겨준다.
const closureExample = outerFunction("코메"); 

//outerFunction은 내부에서 innerFunction을 반환하는 함수다.
//그래서 outerFunction이 호출이 되면 innerFunction함수를 반환하고 그 반환값을 closureExample에 할당한다.

/*
아래 코드에서 closureExample은 innerFunction을 참조하는 변수라서,
closureExample는 사실 innerFunction("코마")와 같다.
*/
closureExample("코마");

/*
그래서 outerVar는 outerFunction에서 받은 값 "코메"
innerVar는 innerFunction 전달된 "코마" 이다.
*/
// 출력: 외부 변수: 코메, 내부 변수: 코마

 

핵심 내용

 

  • innerFunction은 outerFunction 내부에서 정의되었기 때문에, innerFunction은 outerFunction의 매개변수인 outerVar에 접근할 수 있다.
  • innerFunction을 closureExample에 할당함으로써, outerVar는 더 이상 외부에 존재하지 않지만, closureExample을 통해 여전히 접근할 수 있다.
  • 이처럼 클로저는 함수가 자신이 선언된 환경의 변수에 계속 접근할 수 있게 해주는 기능이다.

 

'코딩이론 > Javascript' 카테고리의 다른 글

chapter.12 인수(Argument) 와 반환 (retrun)  (0) 2024.12.03
chapter.10 화살표 함수(Arrow Function)  (0) 2024.12.03
chapter.08 While 반복문  (1) 2024.11.28
chapter.07 for 반복문  (1) 2024.11.27
chapter.06 조건문  (2) 2024.11.26

'코딩이론/Javascript'의 다른글

  • 현재글chapter.09 함수

관련글

티스토리툴바