자바스크립트 - 함수와 지역변수, 외부변수

함수

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

 

작성법

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

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이라는 키워드를 통해 작성가능하며, function 오른쪽 부분에 함수의 이름을 작성하고 중괄호{} 내부에는 함수를 사용할대 실행돼야 하는 코드를 작성해줍니다. 함수 이름의 옆에 있는 괄호 안에는 매개변수를 작성해 필요한 값들을 전달 받게 할 수 있습니다.(이때 넘기는 값을 인수)

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

add(10, 15); //25

 

 

 

return문

• 함수의 실행 결과값을 이용해 또 다른 작업을 해야할 경우 return문을 이용해 함수 호출의 결과값을 반환하기도 합니다. 코드를 작성해보겠습니다. 
• return 문을 이용할 때는 작성된 코드와 같이 함수의 내부에 return을 작성하고 return문 옆에 반환 할 값을 작성해줍니다. 템플릿 리터럴을 통해 확인 할 수 있습니다. 

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

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

 

 

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

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

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

코드를 실행시켜보면 실행되지 않습니다. 이유는 return 문 아래에 작성된 코드들은 실행되지 않은채로 함수가 종료되기 때문입니다. 

 

 

Early return pattern

• 자바스크립트에서 함수는 이러한 return문의 성질을 이용해 얼리 리턴 패턴으로 자주 사용되기도 하빈다. 얼리리턴패턴은 말 그대로 빨리 리턴한다. 즉, 특정 조건에 부합하지 않으면 바로 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));

 

 

IIFE함수

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

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

 

 

코드의 흐름

• 자바스크립트는 함수 호출문의 위치에 따라 코드의 흐름이 변경되기도 합니다. 코드의 중간에 함수를  호출하게 되면 코드의 흐름이 어떻게 흘러가는지에 대해 배워보겠습니다. 

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가 출력되게 됩니다. 

 

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

 

 

지역변수

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

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

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

위 코드를 실행시켜보면 에러메시지가 출력됩니다.

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

sum변수처럼 특정 함수의 내부에 선언된 변수는 해당 함수의 내부에서만, 즉 해당함수의 중괄호 내부에서만 유효한 혹은 접근이 가능한 변수입니다. 이러한 변수를 지역변수라고 부르고, 지역변수를 외부에서 접근하려고 한다면 이렇게 에러가 발생하게 됩니다.

 

 

외부변수

• 외부변수는 지역변수와는 반대로, 함수 외부에서 선언한 변수입니다. 지역변수는 외부에서 접근할 수 없겠지만, 외부변수는 함수내부에서 접근할 수 있습니다.

let sum = 0;

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

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

 

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

---

참고자료

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의