JavaScript 함수(Functions) 완벽 가이드: 나만의 명령어 만들기
    2

    JavaScript 함수(Functions) 완벽 가이드: 나만의 명령어 만들기

    Coding BasicsWeb ProgrammingFront-End Development

    JavaScript 함수(Functions) 완벽 가이드: 나만의 명령어 만들기


    왜 같은 코드를 반복해서 작성하고 있나요?

    코드를 작성하다 보면 같은 작업을 여러 번 반복하게 되는 경우가 있습니다.


    let age = 32;
    let adultYears = age - 18;
    alert(adultYears); // 14

    age = 45;
    adultYears = age - 18; // 같은 계산을 또 반복!
    alert(adultYears); // 27


    문제가 보이시나요?

    1. age - 18 계산을 두 번 반복하고 있습니다
    2. 나중에 계산 방식을 바꾸려면 모든 곳을 찾아서 수정해야 합니다
    3. 코드가 길어질수록 놓치는 부분이 생길 수 있습니다



    alert는 반복해도 괜찮은데 왜 계산은 안 될까요?


    좋은 질문입니다! alert()는 이미 만들어진 명령어이기 때문입니다.


    alert(adultYears); // 내장된 명령어 - 이름만 쓰면 됨
    1. 이름만 입력하면 자동 완성도 되고
    2. 오타를 낼 가능성도 적고
    3. 어디서든 똑같이 동작합니다


    우리도 이런 명령어를 만들 수 있다면 어떨까요? 이것을 실현가능하게 해주는 것이 바로 함수 입니다!


    함수(Function)란 무엇인가요?


    함수는 우리가 직접 만드는 명령어입니다!


    alert(), console.log() 같은 것들이 JavaScript가 미리 만들어 놓은 명령어라면, 함수는 우리가 필요에 맞게 만드는 나만의 명령어입니다.


    함수의 핵심 아이디어:

    1. 반복되는 작업을 한 번만 정의합니다
    2. 필요할 때마다 이름을 불러서 실행합니다
    3. 코드를 재사용할 수 있습니다



    함수는 어떻게 만드나요?

    기본 문법


    function calculateAdultYears() {
    adultYears = age - 18;
    }


    구조를 자세히 살펴볼까요?

    1. function : 함수를 만들겠다는 키워드
    2. 변수는 let으로 만들었죠? 함수는 function으로 만듭니다
    3. calculateAdultYears : 함수의 이름
    4. 원하는 대로 정할 수 있습니다
    5. 변수 이름 규칙과 동일합니다 (camelCase 권장)
    6. () : 괄호 (매개변수를 넣는 곳 - 나중에 설명)
    7. {} : 중괄호 안에 실행할 코드를 넣습니다
    8. 코드 블록 : 중괄호 안의 내용이 실제로 실행될 작업입니다



    함수 이름은 어떻게 짓나요?


    변수 이름과의 차이점:

    1. 변수: 무엇을 담고 있는지 설명 (예: userName, totalPrice)
    2. 함수: 무엇을 하는지 설명 (예: calculateAdultYears, getUserName)



    // ✅ 좋은 함수 이름 (동작을 설명)
    function calculateAdultYears() { }
    function showWelcomeMessage() { }
    function getUserInput() { }

    // ❌ 나쁜 함수 이름 (동작이 아닌 데이터 설명)
    function adultYears() { } // 계산한다는 의미가 없음
    function message() { } // 무엇을 하는지 불명확


    왜 동작을 설명해야 하나요?

    함수는 명령어이고 작업을 수행하기 때문입니다. "성인 연수를 계산하라", "환영 메시지를 보여주라" 처럼 동사를 포함하는 것이 좋습니다.



    함수를 정의한다고 바로 실행되나요?

    아닙니다! 이것이 매우 중요한 포인트입니다.



    // 함수 정의 - 아직 실행되지 않음!
    function calculateAdultYears() {
    adultYears = age - 18;
    alert(adultYears);
    }

    // 이 시점에는 alert가 나타나지 않습니다


    함수 정의 vs 함수 호출

    함수 정의 (Function Definition):


    function calculateAdultYears() {
    // 코드 작성
    }
    1. 브라우저에게 "이런 명령어가 있다"고 알려주기만 합니다
    2. 아직 실행하지 않습니다
    3. 마치 레시피를 적어두는 것과 같습니다


    함수 호출 (Function Call):


    calculateAdultYears(); // 이제 실행됩니다!
    1. 정의된 함수를 실제로 실행합니다
    2. 함수 이름 뒤에 괄호 ()를 붙입니다
    3. 레시피를 보고 실제로 요리를 하는 것과 같습니다


    왜 이렇게 나눠져 있나요?

    "코드 온 디맨드(Code on Demand)" - 필요할 때만 실행!


    // 1. 함수 정의 - 레시피 작성
    function greet() {
    alert("안녕하세요!");
    }

    // 2. 필요한 곳에서 호출
    greet(); // 첫 번째 실행
    greet(); // 두 번째 실행
    greet(); // 세 번째 실행

    한 번 정의해 두면, 원하는 만큼 여러 번 실행할 수 있습니다!



    실제 예제로 이해하기


    Before: 함수 없이 작성한 코드


    let age = 32;
    let adultYears = age - 18;
    alert(adultYears); // 14

    age = 45;
    adultYears = age - 18; // 반복!
    alert(adultYears); // 27


    문제점:

    1. 같은 계산 로직이 두 번 반복됩니다
    2. 계산 방식을 바꾸려면 두 곳을 모두 수정해야 합니다



    After: 함수를 사용한 코드


    let age = 32;
    let adultYears;

    // 함수 정의
    function calculateAdultYears() {
    adultYears = age - 18;
    }

    // 첫 번째 사용
    calculateAdultYears();
    alert(adultYears); // 14

    // 나이 변경
    age = 45;

    // 두 번째 사용
    calculateAdultYears();
    alert(adultYears); // 27



    장점:

    1. ✅ 계산 로직이 한 곳에만 있습니다
    2. ✅ 수정이 필요하면 함수 안만 바꾸면 됩니다
    3. ✅ 코드가 더 읽기 쉽습니다



    변수 범위(Scope)는 왜 중요한가요?


    함수를 사용할 때 가장 헷갈리는 부분이 바로 변수가 어디서 사용 가능한가입니다.


    문제 상황


    function calculateAdultYears() {
    let adultYears = age - 18; // 함수 안에서 let으로 생성
    }

    calculateAdultYears();
    alert(adultYears); // ❌ 에러: adultYears is not defined


    왜 에러가 날까요?

    함수 안에서 let으로 만든 변수는 함수 안에서만 사용할 수 있습니다!

    해결 방법: 함수 밖에서 변수 선언


    let adultYears; // 함수 밖에서 먼저 선언

    function calculateAdultYears() {
    adultYears = age - 18; // let 없이 값만 할당
    }

    calculateAdultYears();
    alert(adultYears); // ✅ 작동함!



    변수 섀도잉(Variable Shadowing)이란?


    흥미로운 현상이 있습니다:

    let adultYears; // 외부 변수

    function calculateAdultYears() {
    let adultYears = age - 18; // 내부 변수 (같은 이름!)
    }

    calculateAdultYears();
    alert(adultYears); // undefined - 외부 변수는 변하지 않음


    무슨 일이 일어났나요?

    함수 안에서 let adultYears를 사용하면:

    1. 새로운 변수가 함수 안에 만들어집니다
    2. 외부의 adultYears와는 별개의 변수입니다
    3. 함수가 끝나면 내부 변수는 사라집니다
    4. 외부 변수는 영향을 받지 않습니다

    이것을 변수 섀도잉(Variable Shadowing)이라고 합니다.



    return: 함수에서 값을 돌려받는 방법


    지금까지의 함수는 외부 변수에 의존했습니다. 더 나은 방법이 있을까요?


    문제: 외부 변수 의존


    let totalAdultYears; // 외부 변수에 의존

    function calculateAdultYears() {
    totalAdultYears = age - 18; // 외부 변수 이름을 알아야 함
    }


    문제점:

    1. 함수가 totalAdultYears라는 특정 변수 이름을 알아야 합니다
    2. 변수 이름이 바뀌면 함수 안도 수정해야 합니다
    3. 다른 변수에 결과를 저장하고 싶어도 안 됩니다
    4. 함수의 재사용성이 떨어집니다


    해결: return 키워드 사용


    function calculateAdultYears() {
    return age - 18; // 결과를 반환!
    }

    let totalAdultYears = calculateAdultYears(); // 반환된 값을 저장
    alert(totalAdultYears); // 14


    return이 하는 일:

    1. 계산 결과를 함수 밖으로 돌려줍니다
    2. 함수 호출 자체가 값이 됩니다
    3. 그 값을 원하는 변수에 저장할 수 있습니다



    return의 강력한 장점


    function calculateAdultYears() {
    return age - 18;
    }

    // 어떤 변수에든 저장 가능!
    let totalAdultYears = calculateAdultYears();
    let yearsAsAdult = calculateAdultYears();
    let adultAge = calculateAdultYears();

    // 직접 사용도 가능!
    alert(calculateAdultYears());

    // 계산에도 사용 가능!
    let doubleAdultYears = calculateAdultYears() * 2;

    핵심: 함수가 더 이상 특정 변수 이름에 의존하지 않습니다!



    return이 없으면 어떻게 될까요?


    function test() {
    let result = 10 + 5;
    // return이 없음!
    }

    let value = test();
    alert(value); // undefined

    return이 없는 함수는 undefined를 반환합니다.



    함수 안에서 여러 줄 작성하기


    function calculateAdultYears() {
    let result = age - 18; // 중간 변수 사용 가능
    return result;
    }


    이 방법도 작동하지만, 단순한 계산이라면:


    function calculateAdultYears() {
    return age - 18; // 더 간결함 (권장)
    }

    으로 하는 것이 더 좋은 코딩입니다.


    매개변수(Parameters): 함수에 값 전달하기


    아직도 문제가 남아 있습니다. age라는 외부 변수를 사용하고 있죠.


    let age = 32; // 외부 변수

    function calculateAdultYears() {
    return age - 18; // 외부 변수에 의존
    }


    문제점:

    1. 함수가 age라는 특정 변수를 알아야 합니다
    2. 다른 나이로 계산하고 싶어도 변수를 바꿔야 합니다
    3. 함수가 독립적이지 않습니다



    매개변수란 무엇인가요?

    매개변수(Parameter)는 함수에 전달하는 입력값입니다.


    function calculateAdultYears(userAge) { // userAge가 매개변수
    return userAge - 18;
    }


    매개변수의 특징:

    1. 괄호 () 안에 정의합니다
    2. let 키워드 없이 이름만 씁니다
    3. 변수 이름 규칙을 따릅니다
    4. 함수 안에서 변수처럼 사용됩니다
    5. 함수 밖에서는 사용할 수 없습니다



    매개변수는 어떻게 사용하나요?


    // 함수 정의: userAge라는 매개변수 선언
    function calculateAdultYears(userAge) {
    return userAge - 18;
    }

    // 함수 호출: 실제 값을 전달
    let result1 = calculateAdultYears(32); // 14
    let result2 = calculateAdultYears(45); // 27
    let result3 = calculateAdultYears(25); // 7

    **전달하는 값을 인자(Argument)**라고 합니다:

    1. 매개변수(Parameter): 함수 정의에서의 변수 (userAge)
    2. 인자(Argument): 함수 호출 시 전달하는 실제 값 (32, 45, 25)

    alert도 매개변수를 사용합니다!



    이제 이해가 되시나요?


    alert("Hello"); // "Hello"가 인자
    alert(adultYears); // adultYears의 값이 인자

    alert()도 함수이고, 괄호 안의 값이 매개변수로 전달됩니다!



    변수를 인자로 전달하기

    let age = 32;

    function calculateAdultYears(userAge) {
    return userAge - 18;
    }

    let result = calculateAdultYears(age); // age 변수의 값 전달
    alert(result); // 14

    중요: 변수 age의 값이 복사되어 userAge로 전달됩니다.



    완전히 독립적인 함수

    function calculateAdultYears(userAge) {
    return userAge - 18;
    }

    // 이제 외부 변수 없이 사용 가능!
    alert(calculateAdultYears(32)); // 14
    alert(calculateAdultYears(45)); // 27

    // 변수와 함께 사용해도 됨
    let myAge = 28;
    alert(calculateAdultYears(myAge)); // 10

    함수가 완전히 독립적이고 재사용 가능해졌습니다!



    여러 개의 매개변수 사용하기


    함수는 여러 개의 매개변수를 받을 수 있습니다.


    function functionName(param1, param2, param3) {
    // 여러 매개변수 사용
    }

    매개변수는 **쉼표(,)**로 구분합니다.



    실전 예제


    function calculateSum(a, b) {
    return a + b;
    }

    alert(calculateSum(5, 3)); // 8
    alert(calculateSum(10, 20)); // 30




    function introduce(name, age, city) {
    return "제 이름은 " + name + "이고, " +
    age + "살이며, " +
    city + "에 살고 있습니다.";
    }

    alert(introduce("철수", 25, "서울"));
    // "제 이름은 철수이고, 25살이며, 서울에 살고 있습니다."



    매개변수 순서는 중요합니다!


    function greet(firstName, lastName) {
    return "안녕하세요, " + firstName + " " + lastName + "님!";
    }

    alert(greet("길동", "홍")); // "안녕하세요, 길동 홍님!"
    alert(greet("홍", "길동")); // "안녕하세요, 홍 길동님!"

    순서를 바꾸면 결과가 달라집니다!



    매개변수 vs return: 언제 무엇을 사용하나요?


    매개변수 (Input)


    언제 사용?

    1. 함수가 작업을 수행하기 위해 정보가 필요할 때
    2. 함수를 다양한 값으로 실행하고 싶을 때


    function greet(name) { // 이름이 필요함
    alert("안녕하세요, " + name + "님!");
    }


    return (Output)


    언제 사용?

    1. 함수가 계산한 결과를 돌려줘야 할 때
    2. 결과를 변수에 저장하거나 다른 곳에서 사용해야 할 때


    function add(a, b) {
    return a + b; // 결과를 돌려줌
    }

    let sum = add(5, 3); // 결과 저장


    둘 다 사용하는 경우


    function calculateTax(price, taxRate) { // 2개의 매개변수
    return price * taxRate; // 결과 반환
    }

    let tax = calculateTax(10000, 0.1); // 1000


    둘 다 없는 경우도 있습니다!


    function sayHello() { // 매개변수 없음
    alert("안녕하세요!"); // return 없음
    }

    sayHello(); // 그냥 실행



    함수가 꼭 알아야 할 핵심 정리


    1. 모든 함수가 return을 사용하는 건 아닙니다


    // return 있음 (값을 돌려줌)
    function add(a, b) {
    return a + b;
    }

    // return 없음 (작업만 수행)
    function showMessage() {
    alert("메시지 출력!");
    }


    2. 모든 함수가 매개변수를 받는 건 아닙니다


    // 매개변수 있음
    function greet(name) {
    alert("Hello, " + name);
    }

    // 매개변수 없음
    function showTime() {
    alert(new Date());
    }


    3. 함수 안에서 여러 줄 작성 가능


    function complexCalculation(userAge) {
    let adultAge = 18;
    let yearsAsAdult = userAge - adultAge;
    let months = yearsAsAdult * 12;
    let days = months * 30;
    return days; // 마지막에 결과 반환
    }


    4. 함수 안에서 변수 생성 가능


    function calculate(userAge) {
    let result = userAge - 18; // 함수 안에서만 사용되는 변수
    return result;
    }

    // result는 함수 밖에서 사용 불가


    최종 핵심 정리

    ✅ 함수는 우리가 직접 만드는 재사용 가능한 명령어입니다

    1. function 키워드로 정의합니다
    2. 함수 이름은 동작을 설명해야 합니다


    ✅ 함수 정의 ≠ 함수 실행

    1. 정의: 레시피 작성
    2. 호출: 실제 실행 (함수명 뒤에 ())


    ✅ 매개변수(Parameters): 함수의 입력

    1. 괄호 안에 정의: function myFunc(param1, param2) { }
    2. 함수를 유연하고 재사용 가능하게 만듭니다


    ✅ return: 함수의 출력

    1. return 키워드로 값을 반환합니다
    2. 반환된 값을 변수에 저장하거나 다른 곳에서 사용 가능
    3. 모든 함수가 return을 사용하는 것은 아닙니다


    ✅ 변수 범위(Scope)

    1. 함수 안의 let 변수는 함수 안에서만 사용 가능
    2. 외부 변수 의존을 최소화하세요


    ✅ 함수의 핵심 장점

    1. 코드 재사용성
    2. 유지보수 용이성
    3. 가독성 향상
    4. 오류 감소


    ✅ 좋은 함수 작성 원칙

    1. 한 가지 일만 하기
    2. 의미 있는 이름 짓기
    3. 매개변수와 return 활용하기
    4. 외부 의존성 최소화하기


    함수는 JavaScript 프로그래밍의 가장 핵심적인 개념입니다! 이 강의에서 배운 기초를 바탕으로, 앞으로 수많은 함수를 작성하고 사용하면서 자연스럽게 익숙해질 것입니다. 지금은 개념을 이해하는 것이 중요하고, 실습을 통해 점점 더 능숙해질 것입니다! 💪🚀