Javascript 6일차 함수 return문 / 스코프 / 호이스팅

2025. 12. 24. 19:22ㆍ대우개발원 수업 내용/Javascript

반응형

개념 정리

더보기

10.3 함수 기능 확장하기

3. return 문

return 문은 함수 내부에서 계산된 결과를 함수 호출 지점으로 전달할 때 사용한다.

기본 형식

return 식(또는 값);
  • return이 실행되면
    • 값을 반환하고
    • 즉시 함수 실행이 종료된다.

반환과 반환값

  • 반환한다
    → 함수 내부 변수에 저장된 값을 함수 호출부로 전달하는 행위
  • 반환값
    → 실제로 전달된 데이터

예시

function sum(a, b) {
  let result = a + b;
  return result;
}

let total = sum(10, 20);
  • result에 저장된 값이 sum()을 호출한 위치로 전달된다.
  • total 변수는 반환값을 받는다.

화살표 함수에서의 return

화살표 함수에서 중괄호 {}를 생략하면,
화살표(=>) 뒤의 식이 자동으로 return 처리된다.

const sum = (a, b) => a + b;

위 코드는 아래 코드와 동일하다.

const sum = (a, b) => {
  return a + b;
};

10.4 함수의 특징 이해하기

1. 스코프(Scope)

스코프는 변수나 함수 같은 식별자를 어디에서 참조할 수 있는지 결정하는 규칙이다.

함수 스코프(Function Scope)

  • 함수 단위로 스코프가 생성된다.
  • 함수 내부에서 선언한 변수는 함수 내부에서만 유효하다.
function test() {
  var a = 10;
}

console.log(a); // 오류
  • 함수 내부 → 지역 스코프
  • 함수 외부 → 전역 스코프

블록 스코프(Block Scope)

  • {} 로 감싸진 블록을 기준으로 스코프를 나눈다.
  • let, const 키워드로 선언한 변수에만 적용된다.
if (true) {
  let x = 10;
}

console.log(x); // 오류

전역 스코프(Global Scope)

  • 스코프와 관계없이 어디서든 참조 가능
  • 전역 스코프에 선언한 변수 → 전역 변수
let globalValue = 100;

지역 스코프(Local Scope)

  • 함수 내부에 선언된 변수는 해당 함수 내부에서만 참조 가능
  • 함수 내부에 선언한 변수 → 지역 변수
function example() {
  let a = 10;
  console.log(a);
}

참조 우선순위

  • let, const는 같은 스코프에서 중복 선언 불가
  • 전역 스코프와 지역 스코프에 같은 이름의 식별자가 있다면

참조 순서:

  1. 현재 위치의 지역 스코프
  2. 지역 스코프에 없을 경우 전역 스코프
let value = 10;

function test() {
  let value = 20;
  console.log(value);
}

test(); // 20

2. 함수 호이스팅(Function Hoisting)

호이스팅이란?

코드를 선언부와 할당부로 나누었을 때,
선언부를 스코프의 최상단으로 끌어올리는 동작을 말한다.

호이스팅 대상

다음은 호이스팅이 발생한다.

  • 함수 선언문
  • var 키워드를 사용한 함수 표현식
hello();

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

호이스팅이 발생하지 않는 경우

다음은 호이스팅되지 않는다.

  • let 또는 const로 선언한 함수 표현식
  • 화살표 함수
hello(); // 오류

const hello = () => {
  console.log("Hello");
};

10.5 즉시 실행 함수(IIFE) 사용하기

전역 스코프 오염

  • 한 번만 사용할 함수인데
  • 전역 스코프에 이름이 남아
  • 이후 동일한 식별자를 사용할 수 없게 되는 상태

이를 전역 스코프가 오염되었다고 한다.

즉시 실행 함수 (IIFE: Immediately Invoked Function Expression)

  • 함수를 정의하자마자 바로 실행
  • 한 번 실행되고 메모리에 남지 않음
  • 전역 스코프를 오염시키지 않음

기본 형식

(function () {
  // 실행 코드
})();

특징 정리

  • 함수 이름이 필요 없음
  • 실행 후 식별자가 남지 않음
  • 초기화 코드, 테스트 코드에 자주 사용됨

 

fx_gugudan.html

더보기

http://localhost:52330/js6/fx_gugudan.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>구구단 함수</title>
  <style>
    div {
      border: 1px solid #ccc;
      display: inline-block;
      padding: 0 20px 30px 20px;
      margin: 15px;
      line-height: 2;
    }
    div h3 {
      text-align: center;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <script>
    var num = prompt("구구단 몇 단을 원하세요", ""); // n은 문자열
    gugudan(num); // 함수 호출
    var m;

    function gugudan(n) {
      m = parseInt(n); // 문자열 n을 숫자로 바꿈

      if(isNaN(m) || m < 1 || m > 9) { 
        alert("잘못입력하셨습니다.");
        // return;
      }
      
      document.write("<div>");
      document.write("<h3>" + m + "단</h3>");
      for(let j = 1; j <= 9; j++) {
        document.write(m +" X " + j + " = " + m*j + "<br>");
      }
      //document.writeln(j); //for 안에서 선언된 j를 for 바깥에서 선언 j is not defined나옴
      // j는 for안에서만 쓸 수 있는 변수라 오류가 난다
      document.write("</div>");
    }
      document.writeln(m); // 스코프
  </script>
</body>
</html>

<!-- if(isNaN(m) || m < 1 || m > 9) { 
  alert("잘못입력하셨습니다.");
  return;
} -->

2number.html

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>function 숫자 두 개 비교</title>
</head>
<body>
  <script>
    const x = parseInt(prompt('비교할 첫 번째 숫자', ''))
    const y = parseInt(prompt('비교할 두 번째 숫자', ''))

    function compareTwo(x, y) {
      // 입력값 검사
      if (isNaN(x) || isNaN(y)) {
        alert("숫자를 정확히 입력하세요.");
        return; // 함수 종료
      }

      if (x > y) {
        alert(`${x}가 ${y}보다 큽니다`);
      } else if (x < y) {
        alert(`${y}가 ${x}보다 큽니다`);
      } else {
        alert(`${x}와(과) ${y}는 같습니다.`);
      }
    }

    compareTwo(x, y);
  </script>
</body>
</html>

function.js

더보기 
// return 문

// function sum(num1, num2) {
//   if(typeof num1 !== "number" || typeof num2 !== "number"){
//     return; //매개변수가 숫자가 아니면 강제종료
//   }
//   return num1 + num2
// }

// //let result = sum("a" + "b"); // string type이라서 결과가 out:undefined이렇게 나옴

// let result = sum (5, 7); 
// console.log ("out:" + result); // out:12

//--------------------------------------------------------------------------

// 화살표 함수에서 {}를 생략하면 화살표 다음에 오는 코드는 return 문으로 처리됨

// const sum = (num1, num2) => num1 +num2;
// const result1 = sum(10, 20);
// console.log("out:" + result1); //out:30

//--------------------------------------------------------------------------

scope.js

더보기 
// let a = 10;
// {
//   let b = 20;
//   console.log(`코드 블록 내부 a: ${a}`); // 코드 블록 내부 a: 10
//   console.log(`코드 블록 내부 b: ${b}`); // 코드 블록 내부 b: 20

// }
// console.log(`코드 블록 외부 a: ${a}`); // 코드 블록 외부 a: 10
// console.log(`코드 블록 내부 b: ${b}`); // ReferenceError: b is not defined

// let a = 10;
// const b =20;
// function sum(){
//   let a = 50;
//   const b = 70;
//   console.log(`함수 내부 a: ${a}`);
//   console.log(`함수 내부 b: ${b}`);
// }
// sum(); // 함수 내부 a: 50
//       //함수 내부 b: 70

//--------------------------------------------------------------------------

// 함수 호이스팅

// console.log(num);
// var num = 10;

// printHello();
// function printHello(){
//   console.log("Hello");
// }

printHello(); // printHello is not a function
var printHello = function printHello(){ 
  console.log("Hello");
}
//--------------------------------------------------------------------------

// 즉시 실행 함수
//  함수를 정의하면서 동시에 실행까지 하는 함수
//  한 번 실행되고 나면 메모리에 데이터가 남아 있지 않음
//  해당 식별자를 한 번도 사용되지 않은 것처럼 인식

// (function init(){
//   console.log("initialized!");
// })();
// init(); //ReferenceError: init is not defined

 

'대우개발원 수업 내용 > Javascript' 카테고리의 다른 글

Javascript 9일차 이벤트/  (0) 2025.12.30
Javascript 5일차 함수(function)  (0) 2025.12.23
Javascript 4일차 array / for in / break / continue  (0) 2025.12.22
Javascript 3일차 조건문 연습 / 반복문  (1) 2025.12.19
javascript 2일차 조건문 if / else / switch  (0) 2025.12.18

관련글

티스토리툴바