안녕하세요🤩

이번시간에는 자바스크립트 함수의 개념과 작성법, 그리고 지역변수와 외부변수에대해 다뤄보도록 하겠습니다

함수

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

작성법

먼저, 함수를 사용하지 않고 두 숫자를 더하는 프로그램을 작성해보겠습니다.

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

두 숫자를 더하는 프로그램은, 위의 코드와 같이 두 숫자를 정의하고 더하기 연산을 통해 두 숫자를 더한 값을 새로운 변수에 저장 후 출력해야합니다.

만약, 여기서 다른 숫자들을 더하는 연산을 추가적으로 실행해야한다면 위와 같은 코드를 반복해서 작성해야되기 때문에 코드 길이도 상당히 길어지고, 번거로워지게 됩니다.

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

function add(num1, num2) {
    return num1 + num2;
    console.log(num1 + num2); // 실행X
}

let sum1 = add(10, 15); // 25
let sum2 = add(5, 5); // 10

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

함수는 위의 코드와 같이 function 이라는 키워드를 통해 작성 가능하며, function의 오른쪽 부분에 함수의 이름을 작성합니다.

함수 이름의 오른쪽에는 함수에 전달할 값들을 괄호안에 작성해주는데 이를 매개변수 라고 부르며,
함수 내부에서는 return 을 이용해 함수의 결과값을 지정할 수 있습니다.

위의 코드를 실행시켜보면, add 함수 내부에 있는 console.log 가 실행이 되지 않는것을 확인 할 수 있습니다.

그 이유는 return 을 하게 되면 return 문 아래에 작성된 코드들은 실행되지 않은채로 함수가 종료되기 때문입니다.

이렇게 작성된 함수는 함수이름() 을 통해 호출하면 함수가 실행되어 함수 내부의 코드들을 실행시킬 수 있습니다.

IIFE 함수

IIFE 함수는 우리가 배운 함수와는 다르게 호출을 통한 실행이 아닌, 정의되자마자 즉시 실행되는 즉시 실행 함수 입니다.

(function () {
    console.log("hello world");
})();

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

코드의 흐름

위에서 배운 함수를 이용해 코드를 작성해보겠습니다.

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

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

위의 코드를 실행시키면 출력 결과는 어떻게 나오게 될까요?

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

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

최종적으로는 아래와 같은 순서로 값이 출력됩니다.

1;
2;
3;
4;

이렇게 함수를 작성할 때는 코드의 흐름을 알고, 알맞는 위치에서 함수를 호출해야합니다.

지역변수

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

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

console.log(sum);

위의 코드를 실행시키면, 함수 add 내부에 있는 변수인 sum 변수를 외부에서 접근할 수 없기 때문에 ERROR 가 발생하게 됩니다.

add 함수 내부에 있는 sum 변수 처럼, 지역변수란 함수 블록 내부에서만 유효한 변수를 뜻합니다.

외부변수

이렇게 함수 내에서 선언된 변수들은 함수 외부에서는 접근이 불가능합니다.

하지만 반대로, 함수 외부에서 선언한 변수를 함수 안에서는 접근 할 수 있습니다.

아래의 예시로 확인해보겠습니다.

let sum = 0;

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

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

위의 코드에서 sum 변수는 add 함수의 외부에 선언되어있으며,
add 함수 내부에서 더하기 연산을 통해 값이 변경된 것을 볼 수 있습니다.

이처럼 함수 외부에 선언되어 어디서나 접근 가능한 변수를 전역변수 , 외부변수 라고 부릅니다.

---

next

이번 시간에는 자바스크립트의 함수의 개념과 작성법, 그리고 내부변수와 외부변수에 대해 배워보았습니다.

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

감사합니다😀

---

🙏참고 & 출처

https://ko.javascript.info/function-basics