함수와 지역변수, 외부변수

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


1. 함수 작성법
두 개의 숫자를 더하는 코드는 두 변수에 각각의 숫자를 할당하고, 더하기 연산을 통해 두 숫자를 더한 값을 새로운 변수에 저장 후 출력해야 한다.
만약, 여기서 또 다른 숫자들을 더하는 연산을 추가로 실행해야한다면, 같은 기능을 하는 코드를 반복해서 작성해야되기 때문에 코드 길이도 상당히 길어지고, 작성하기 번거롭다는 단점이 있다.

 

// 함수
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

 

같은 코드를 반복해서 작성해야할 때, 반복되는 코드를 하나의 함수로 묶어서 작성한다.


2. 함수 선언, 호출, 매개변수
함수를 사용하기 위해서는 변수와 마찬가지로 먼저 선언문을 작성해야 한다.
함수의 선언은 이렇게 function 이라는 키워드를 통해 작성 가능하며, function의 오른쪽 부분에 함수의 이름을 작성 한다.
함수 선언문의 중괄호{} 내부에는 해당 함수를 사용할 때 실행돼야 하는 코드를 작성 한다.
함수 이름의 옆에 있는 괄호 안에 매개변수를 작성해 필요한 값들을 전달 받을 수 있다.
함수를 사용하기 위해서는 함수를 "호출" 해야 한다.
함수를 호출할 때에는, 먼저 함수의 이름을 적고, 함수의 매개변수로 넣을 값들을 함수 이름의 옆에 있는 괄호 안에 작성 한다. 함수가 호출될 때 넘기는 값을 "인수" 라고 부른다.

 

// 함수 선언, 호출, 매개변수
function add(num1, num2) {
  console.log(num1 + num2);
}
add(10, 15); //25

 

 

3. return문
함수의 실행 결괏값을 이용해 또 다른 작업을 해야할 경우 return문을 이용해 함수 호출의 결과값을 반환하기도 한다.
함수의 내부에 return을 작성하고 return문 옆에 반환 할 값을 작성 한다.

 

// return문
function add(num1, num2) {
  return num1 + num2;
}
console.log(`두 숫자를 더한 결과는 ${add(10, 15)} 입니다.`);

 

함수 내부의 return문 아래에 "함수 호출" 이라는 문장을 출력하는 코드를 작성 한다.

 

function add(num1, num2) {
  return num1 + num2;
  console.log("함수 호출");
}
console.log(`두 숫자를 더한 결과는 ${add(10, 15)} 입니다.`);

 

코드를 실행시켜보면 add 함수 내부에 있는 console.log 가 실행되지 않고 "두 숫자를 더한 결과는 25입니다" 라는 문장만 출력되는데, return 문 아래에 작성된 코드들은 실행되지 않은채로 함수가 종료되기 때문이다.


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

 

// Early return pattern 미적용
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보다 큰지 작은지를 출력하는 함수 이다.
코드를 보면, 일단 코드 해석이 한 번에 되지 않고, 가독성이 좋지 않아 복잡해 보인다고 느껴진다.

 

// Early return pattern 적용
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을 하기 때문에 중간에 조건에 맞는 코드를 실행하면 이후에 작성된 조건을 생각하지 않아도 되는 코드의 구조를 단순하게 만들어주는 패턴 이다.
얼리 리턴 패턴은 함수에서 사용되는 방식으로 보다 쉽게 코드를 해석할 수 있어 가독성이 좋아지기 때문에 자주 사용되는 패턴 이다.

 

 

5. IIFE 함수 (즉시 실행함수)
호출을 통한 실행이 아닌, 정의되자마자 즉시 실행되는 IIFE 함수 혹은 즉시 실행 함수라고 불리는 함수도 있다.

 

// IIFE 함수 (즉시 실행 함수)
(function () {
  console.log("자바스크립트");
})();

 

 

6. 코드의 흐름
자바스크립트로 코드를 작성하다보면, 선언된 여러 가지 함수들을 다양한 위치에서 호출하기도 한다. 함수 호출문의 위치에 따라 코드의 흐름이 변경되기도 한다.

 

// 코드의 흐름
function func() {
  console.log("2");
  console.log("3");
}
console.log("1");
func();
console.log("4");

 

위 코드 실행 결과 1, 2, 3, 4가 출력되는데, 함수는 어디에서 호출하는지에 따라 실행되는 코드의 순서가 달라지게 된다.
따라서 자바스크립트 함수를 호출 할 때에는 시행 순서를 고려해 알맞은 위치에서 실행해야 한다.


7. 지역변수
지역변수는 함수 블록의 내부에서만 유효한 변수.

 

// 지역변수
function add(num1, num2) {
  let sum = num1 + num2;
  return sum;
}
add(10, 15);
console.log(sum);

 

위 코드를 실행시켜보면 ‘sum is not defined’ 라는 에러 메시지가 출력되는데, add 함수 내부에 선언된 sum 변수는 add 함수에서만, 즉 add 함수 블록의 내부에서만 유효한 변수이기 때문이다.
sum 변수처럼 특정 함수의 내부에 선언된 변수는 해당 함수의 내부에서만 즉, 해당 함수의 중괄호 내부에서만 유효한 혹은 접근이 가능한 변수이다.
이러한 변수를 지역변수라고 부르고, 지역변수를 외부에서 접근하려고 한다면 이렇게 에러가 발생하게 된다.


8. 외부변수
외부변수는 지역변수와는 반대로, 함수 외부에서 선언한 변수.
지역변수는 외부에서 접근할 수 없었지만, 외부변수는 함수 내부에서 접근 할 수 있다.

 

// 외부변수
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

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