함수

안녕하세요🤩

이번시간에는 자바스크립트의 함수에 대한 내용과 지역변수 그리고 외부변수에 대해 다뤄보도록 하겠습니다

함수

함수는 같은 동작을 하는, 중복된 코드가 여기저기에 존재할 때, 이들을 하나로 묶어 하나의 명령으로 실행할 수 있게 해주는 기능입니다.

코드샌드박스를 통해 함수를 사용해보도록 하겠습니다.

작성법

먼저, 함수를 사용하지 않고 동일한 기능을 하는 코드를 중복해서 작성해보겠습니다.

두 개의 숫자를 더하고 더한 값을 출력하는 코드를 작성해봅시다.

let num1 = 10;
let num2 = 15;
let sum = num1 + num2;

console.log(sum); //25

두 개의 숫자를 더하는 코드는, 작성된 코드와 같이 두 변수에 각각의 숫자를 할당하고, 더하기 연산을 통해 두 숫자를 더한 값을 새로운 변수에 저장 후 출력해야합니다.

만약, 여기서 또 다른 숫자들을 더하는 연산을 추가로 실행해야한다면,

let num1 = 10;
let num2 = 15;
let sum = num1 + num2;

console.log(sum); //25

let num3 = 1;
let num4 = 5;
let sum2 = num3 + num4;

console.log(sum2); //6

아래에 추가로 적힌 코드처럼, 같은 기능을 하는 코드를 반복해서 작성해야되기 때문에 코드 길이도 상당히 길어지고, 작성하기 번거롭다는 단점이 있습니다.

이렇게 같은 코드를 반복해서 작성해야할 때, 우리는 반복되는 코드를 하나의 함수로 묶어서 작성합니다.

함수 선언, 호출, 매개변수, 반환

function add(num1, num2) {
    console.log(num1 + num2);
}

add(10, 15); //25

함수를 사용하기 위해서는 앞에서 배웠던 변수와 마찬가지로 먼저 선언문을 작성해야합니다.

함수의 선언은 이렇게 function 이라는 키워드를 통해 작성 가능하며, function의 오른쪽 부분에 함수의 이름을 작성합니다.

함수 선언문의 중괄호{} 내부에는 해당 함수를 사용할 때 실행돼야 하는 코드를 작성해줍니다.

이 add 함수를 사용해 코드를 실행하게되면, 두 숫자를 더한 값을 출력해야 하는데, 함수에서 이 두 개의 숫자들은 "매개변수" 를 통해 전달받을 수 있습니다.

함수는 이렇게 함수 이름의 옆에 있는 괄호 안에 매개변수를 작성해 필요한 값들을 전달 받을 수 있습니다.

이제 선언된 add함수를 사용해보겠습니다.

함수를 사용하기 위해서는 함수를 "호출" 해야합니다.

함수를 호출할 때에는, 먼저 이렇게 함수의 이름을 적고, 함수의 매개변수로 넣을 값들을 함수 이름의 옆에 있는 괄호 안에 작성합니다.

이렇게 함수가 호출될 때 넘기는 값을 우리는 "인수" 라고 부릅니다.

add 함수를 호출하고 인수로 숫자 10과 15를 넘겨주면, add함수의 매개변수로 num1에는 숫자 10이, num2에는 숫자 15가 전달되어 두 숫자를 더한 값인 25가 출력됩니다.

Early return pattern

함수의 내부에서는 이렇게 실행돼야 하는 코드를 작성하고, 바로 결과 값을 출력하는 등의 작업을 처리할 수도 있지만,

함수의 실행 결괏값을 이용해 또 다른 작업을 해야할 경우 return문을 이용해 함수 호출의 결과값을 반환하기도 합니다.

add 함수 내부에 매개변수 num1과 num2를 더한 값을 반환하는 return문을 작성한 다음, add 함수의 반환 값을 이용해 문장을 출력하는 코드를 작성해보겠습니다.

function add(num1, num2) {
    return num1 + num2;
}

console.log(`두 숫자를 더한 결과는 ${add(10,15)} 입니다.`)

먼저 return문을 이요할 때에는 작성된 코드와 같이 함수의 내부에 return을 작성하고 return문 옆에 반환 할 값을 작성해줍니다.

코드 실행 결과 add 함수를 호출하면 return문을 통해 숫자 25가 반환되고, 템플릿 리터럴을 통해 "두 숫자를 더한 결과는 25입니다" 가 출력되는 것을 확인할 수 있습니다.

그럼 이번엔 add 함수 내부의 return문 아래에 "함수 호출" 이라는 문장을 출력하는 코드를 작성해보겠습니다.

function add(num1, num2) {
    return num1 + num2;
    console.log("함수 호출");
}

console.log(`두 숫자를 더한 결과는 ${add(10,15)} 입니다.`)

코드를 실행시켜보면, add 함수 내부에 있는 console.log 가 실행되지 않고, "두 숫자를 더한 결과는 25입니다" 라는 문장만 출력되는 것을 볼 수 있습니다.

console.log("함수 호출)" 이라는 코드가 실행되지 않는 이유는 이렇게 return 문 아래에 작성된 코드들은 실행되지 않은채로 함수가 종료되기 때문입니다.

그렇기 때문에 return문을 사용할 때에는, 실행되어야 하는 코드들은 모두 return문 위에 작성해줘야합니다.

자바스크립트에서 함수는 이러한 return문의 성질을 이용해 얼리 리턴 패턴(Early return pattern)으로 자주 사용되기도 합니다.

얼리 리턴 패턴은 말 그대로 빨리 리턴한다. 즉, 특정 조건에 부합하지 않으면 바로 return을 하도록 하는 패턴입니다.

예제 코드를 통해 얼리 리턴 패턴이란 무엇인지 자세하게 살펴봅시다.

function func(num) {
    if (num > 0) {
        if (num >= 10) {
            console.log("num의 값이 10보다 크거나 같습니다.");
        } else {
            console.log("num의 값이 0보다 크고 10보다 작습니다.");
        }
    } else if (num === 0) {
        console.log("num의 값이 0입니다.");
    } else {
        console.log("num의 값이 0보다 작습니다.");
    }
}

func(15);

작성된 코드는 특정 숫자가 10보다 큰지 작은지 그리고 0보다 큰지 작은지를 출력하는 함수입니다.

코드를 보면, 일단 코드 해석이 한 번에 되지 않고, 가독성이 좋지 않아 복잡해보인다고 느끼실겁니다.

우리는 이렇게 복잡한 코드를 얼리 리턴 패턴을 통해 깔끔하고 가독성이 좋은 코드로 작성할 수 있습니다.

function func(num) {
    if (num === 0) return "num의 값이 0입니다.";
    if (num < 0) return "num의 값이 0보다 작습니다.";
    if (num >= 10) return "num의 값이 10보다 크거나 같습니다.";
    return "num의 값이 0보다 크고 10보다 작습니다";
}

console.log(func(15));

얼리 리턴 패턴이란 이렇게 else문을 사용하지 않고, if 와 return으로만 코드를 작성하며,

특정 조건문을 만족하면 되면 바로 return을 하기 때문에, 중간에 조건에 맞는 코드를 실행하면 이후에 작성된 조건을 생각하지 않아도 되는, 코드의 구조를 단순하게 만들어주는 패턴이라고 할 수 있습니다.

작성된 코드를 실행하면 함수 func를 호출할 때 인수로 숫자 15를 넘겨주었기 때문에 매개변수 num의 값은 15가 되고, 첫번째 두번째 조건문은 만족하지 않고 num>=0 조건문을 만족하게 되어 "num의 값이 10보다 크거나 같습니다" 가 출력됩니다.

함수 func는 얼리 리턴 패턴이 적용된 함수이므로, 조건에 부합하는 코드의 이후에 작성된 함수의 맨 마지막 코드는 실행되지 않고 세 번째 조건문 실행 이후 바로 함수가 종료되게 됩니다.

얼리 리턴 패턴은 이렇게 함수에서 사용되는 방식으로, 보다 쉽게 코드를 해석할 수 있어 가독성이 좋아지기 때문에 자주 사용되는 패턴입니다.

IIFE 함수

다음으로 알아볼 함수는 즉시 실행함수입니다. 자바스크립트에는 이렇게 함수를 정의한 다음, 함수의 호출을 통해 함수를 실행하는 기본적인 함수 이외에, 호출을 통한 실행이 아닌, 정의되자마자 즉시 실행되는 IIFE 함수 혹은 즉시 실행 함수라고 불리는 함수도 있습니다.

(function () {
    console.log("자바스크립트");
})();

IIFE 함수는 다음과 같이 작성되며 이 즉시 실행 함수를 왜 사용하는지, 언제 사용되는지는 나중에 다시 다뤄보도록 하겠습니다.

코드의 흐름

지금까지 자바스크립트의 함수 선언 방식과 호출 방법, 그리고 return문과 얼리 리턴 패턴에 대해 배워보았습니다.

자바스크립트로 코드를 작성하다보면, 선언된 여러 가지 함수들을 다양한 위치에서 호출하기도 합니다.

지금까지 사용했던 예제 코드에서는 코드가 작성된 순서대로, 위에서 아래로 흘러갔지만 자바스크립트는 함수 호출문의 위치에 따라 코드의 흐름이 변경되기도 합니다.

그렇다면 이번에는 자바스크립트로 작성된 긴 코드의 중간에서 함수를 호출하게 되면, 코드의 흐름이 어떻게 흘러가는지에 대해 배워보겠습니다.

function func() {
    console.log("2");
    console.log("3");
}

console.log("1");
func();
console.log("4");

다음과 같이 중간에서 함수를 홒출하는 예제 코드를 작성해보았는데요, 해당 코드를 실행시켜보겠습니다.

맨 위에 func 라는 이름을 가진 함수가 선언되어있기는 하지만, 아직 호출되지 않았으므로, func함수의 바로 아래있는 console.log("1") 가 먼저 실행되게 됩니다.

그 다음 func함수의 호출을 통해 2와 3이 순서대로 출력되며, 함수가 종료된 다음 console.log("4") 를 통해 4 가 출력되게 됩니다.

이렇게 함수는 어디에서 호출하는지에 따라 실행되는 코드의 순서가 달라지게 됩니다.

만약 console.log("4") 와 func() 의 순서가 바뀐다면, 해당 코드 실행 결과 1, 4, 2, 3이 출력되겠죠.

따라서 자바스크립트의 함수를 호출 할 때에는 시행 순서를 고려해 알맞은 위치에서 실행해야합니다.

지역변수

다음으로는 지역변수에 대해 알아보도록 하겠습니다.

지역변수는 함수 블록의 내부에서만 유효한 변수를 뜻합니다.

함수 블록이 무엇인지, 내부에서만 유효한 변수가 무엇인지 배워봅시다.

function add(num1, num2) {
    let sum = num1 + num2;
    return sum;
}

add(10,15);
console.log(sum);

먼저, 위에 작성된 코드에서는 두 개의 값을 매개변수로 받고, 더한 값을 새로운 변수에 담아 해당 변수를 반환하는 add 함수를 선언했습니다.

이후 add 함수의 바깥에서 add 함수의 내부에 선언된 sum 변수를 출력하는 코드를 작성했습니다.

위 코드를 실행시켜보면, ‘sum is not defined’ 라는 에러 메시지가 출력됩니다.

에러가 발생한 이유는 add 함수 내부에 선언된 변수는 add 함수에서만, 즉 add 함수 블록의 내부에서만 유효한 변수이기 때문입니다.

sum 변수처럼 특정 함수의 내부에 선언된 변수는 해당 함수의 내부에서만 즉, 해당 함수의 중괄호 내부에서만 유효한 혹은 접근이 가능한 변수입니다.

이러한 변수를 지역변수라고 부르고, 지역변수를 외부에서 접근하려고 한다면 이렇게 에러가 발생하게됩니다

외부변수

이번엔 외부변수에 대해 배워보겠습니다.

외부변수는 지역변수와는 반대로, 함수 외부에서 선언한 변수입니다.

지역변수는 외부에서 접근할 수 없었지만, 외부변수는 함수 내부에서 접근 할 수 있습니다.

let sum = 0;

function add(num1, num2) {
    sum = num1 + num2;
}

add(10, 15);
console.log(sum); //25

이렇게 sum 변수를 add함수의 외부에 선언하고, add 함수의 매개변수로 받은 두 개의 변수를 더한 값을, add 함수 내부에서 sum 변수에 할당해주었습니다.

코드를 실행시켜 출력 결과를 보면, 에러 없이 25 라는 숫자가 출력 된 것을 확인할 수 있습니다.

이처럼 외부변수는 함수 외부에서 선언되어 어디서나 접근 가능한 변수이고, 또 다른 말로는 전역변수 라고 부르기도 합니다.

자 이렇게 이번 시간에는 자바스크립트의 함수와 지역변수, 외부변수에 대해 배워보았습니다.

다음시간에는 자바스크립트의 스코프와 호이스팅에 대해 배워보겠습니다.

감사합니다.