[javascript] 함수 4 / 함수 내부 동작 이해 (스코프, 호출 순서, 호이스팅, arauments, 기본값 설정(default parameter)

스코프 (Scope)

• 변수에 접근할 수 있는 범위를 의미

종류	설명
전역 스코프	함수 바깥에서 선언된 변수. 전체 코드에서 접근 가능
함수 스코프	함수 안에서 선언된 변수. 함수 내부에서만 접근 가능
블록 스코프 (let, const)	{} 블록 내부에서 선언된 변수는 블록 안에서만 유효

let a = 10; // 전역 스코프

function test() {
  let b = 20; // 함수 스코프
  if (true) {
    let c = 30; // 블록 스코프
    console.log(a, b, c); // ✅ 가능
  }
  console.log(c); // ❌ ReferenceError: c is not defined
}
test();
console.log(b); // ❌ ReferenceError: b is not defined

 

---

변수 선언과 함수 호출 순서

• JS는 위에서 아래로 실행돼. 하지만 변수나 함수 선언은 특별하게 먼저 처리됨 (호이스팅이랑 연결).

console.log(myVar);  // undefined (호이스팅 때문)
var myVar = 10;

sayHi();             // Hello! (함수 선언은 끌어올려짐)

function sayHi() {
  console.log('Hello!');
}

 

• let, const로 선언한 변수는 TDZ (Temporal Dead Zone) 때문에 호이스팅 돼도 사용할 수 없음

console.log(x); // ❌ ReferenceError
let x = 3;

---

호이스팅 (Hoisting)

• 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 것처럼 보이는 현상

var vs let/const 

console.log(a); // undefined
var a = 10;

console.log(b); // ❌ ReferenceError
let b = 20;

함수 선언 vs 함수 표현식

sayHello(); // ✅ 정상 작동

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

sayBye(); // ❌ TypeError
var sayBye = function() {
  console.log("Bye");
};

---

arguments 객체

• 정의 : 함수에 전달된 모든 인자(argument) 를 배열 형태로 담은 유사 배열 객체
• 배열처럼 보이지만 배열 아님 (map, forEach 불가)
• 함수 선언식 / 표현식에만 존재, 화살표 함수에는 없음

arguments 객체의 속성

속성	설명	예시
arguments.length	함수에 전달된 인자의 개수	arguments.length → 3
arguments[index]	전달된 인자에 인덱스로 접근	arguments[0] → 첫 번째 인자
arguments.callee	현재 실행 중인 함수 자신을 참조 (이름 없이 정의된 함수에서 주로 사용됨)	arguments.callee() → 재귀 등에서 사용
arguments 자체	유사 배열 객체 (array-like)	Array.isArray(arguments) === false
arguments와 매개변수 연결	비엄격 모드에선 값이 동기화됨	x = 1 → arguments[0]도 1
strict 모드에서 분리	엄격 모드에서는 매개변수와 arguments 동기화 안 됨	x ≠ arguments[0]

---

rest 파라미터 (... args)

 

[javascript] 나머지 매개변수(rest parameter) (...args)

---

기본값 설정 (Default Parameters)

• 함수를 호출할 때 인자를 생략하거나 undefined를 전달했을 경우, 함수 선언부에서 미리 지정한 기본값을 자동으로 사용하는 기능
• ES6(ECMAScript2015)부터 도입
• 디폴트 파라미터는 함수 호출 시 인자가 undefined인 경우에만 기본값이 적용됨
• null, '', 0 등은 기본값으로 처리되지 않음
• 매개변수 = 기본값 형태로 함수 선언부에서 직접 기본값을 설정할 수 있음.
• 기본값 : 상수, 변수, 연산식, 함수 호출 결과 등 어떤 표현식도 가능

/ [문법]
function 함수이름(매개변수1 = 기본값1, 매개변수2 = 기본값2, ...) {
  // 함수 본문
}

function multiply(x = 1, y = 1) {
  return x * y;
}

console.log(multiply(5, 2));      // 10 (5 * 2)
console.log(multiply(3));         // 3 (3 * 1)
console.log(multiply());          // 1 (1 * 1)
console.log(multiply(undefined, 4)); // 4 (1 * 4)
console.log(multiply(null, 4));      // 0 (null * 4 → null은 0으로 변환됨)

 

// ex) 표현식이나 함수 결과를 기본값으로 사용
function getDefault() {
  return 100;
}

function showPrice(price = getDefault()) {
  console.log(`가격: ${price}원`);
}

showPrice();     // 가격: 100원
showPrice(250);  // 가격: 250원