📆 2025.04.21 ‐ JavaScript Function Deep Dive [멋쟁이사자처럼부트캠프 프론트엔드13기]

rogie·2025년 4월 21일

JavaScript 멋쟁이사자처럼후기 자바스크립트

likelion-posting

목록 보기

6/10

🧠 배운 점 & 정리

First class object
- 일급 객체
  - 변수 , 배열 엘리먼트 , 다른 객체의 프로퍼티에 할당 될 수 있다
  - 함수의 인자로 전달 될 수 있다
  - 함수의 결과 값으로 반환 될 수 있다
  - 리터럴로 생성될 수 있다
  - 동적으로 생성된 프로퍼티를 가질 수 있다
- 자바스크립트의 함수(function) 는 일급객체 이다
  
  함수 == 호출 + 객체
- 함수가 일급 객체라서 가능한 일
  - 콜백 함수 (Callback function)
    - 다른 함수에 인자로 전달되어 어떤 작업의 결과로 호출되는 함수
  - 고차 함수 (Higher order function)
    - 함수를 인자로 받거나 반환 하는 함수

함수 생성

선언문
```
// 기명함수 add라는 이름이 있음
function add(x, y){
  const result = x + y;
  return result;
}
// 익명함수, 함수 이름이 없다
function () {}
```
- function 키워드로 시작하는 함수 정의
- 함수 이름
  - 유효한 식별자이어야 함
  - 생략 가능
- 매개변수 목록
  - 쉼표로 구분된 매개변수 목록과 그 매개변수 목록을 둘러싸고 있는 괄호
  - 매개변수는 생략 가능 , 괄호는 필수
- 함수 본문
  - 중괄호로 둘러싸여 있는 자바스크립트 구문
  - 본문은 생략 가능 , 중괄호는 필수

표현식

함수 정의를 변수에 할당
- 변수명을 함수명처럼 사용

변수에 익명함수를 지정

const add = function (x,y){
  const result = x + y;
  return result;
};
add(10 , 20)

변수에 기명함수를 지정

변수명을 함수명처럼 사용
함수명을 통한 접근은 해당 함수 내부에서만 사용 가능 (재귀 함수)

const f = function factorial(n){
  if( n == 1 ){
  return 1
  }
  return n * factorial(n - 1);
};
console.log(f(5)); // 
console.log(factorial(5)); // 정삭 작동 안됨

Function 생성자 함수

함수 객체를 생성해서 반환

const add = new Function('x', 'y', 'let result = x + y; return result;');
//    변수 = 새로운 함수 (매개변수1, 매개변수 2, 실행할 코드)

가독성이 안 좋아서 진짜 잘 안쓰임

화살표 함수 표현식

함수 표현식의 대안으로 간결하게 함수 정의
익명 함수로만 정의 가능
실행할 코드가 하나만 있다면 함수 본문의 중괄호 생략 가능
함수 본문의 중괄호가 생략될 경우 함수의 코드가 자동으로 리턴값으로 사용됨
매개 변수가 하나만 있다면 매개변수의 괄호 생략 가능

// 기존 함수
let add = function (x, y) {
  return x + y;
};

// 화살표 함수
add = (x, y) => {
  return x + y;
};

// 화살표 함수 축약 => 실행할 코드가 단 한개면 가능
add = (x, y) => x + y;

// add 출력문
console.log(add(10, 20)); // 출력시 10 + 20 = 30

// 기존 함수
let add10 = function (x) {
  return x + 10;
};

// 화살표 함수
add10 = (x) => {
  return x + 10;
};

// 화살표 함수 축약 => 실행할 코드가 단 한개면 가능
add10 = (x) => x + 10;
add10 = x => x + 10; // 매개 변수가 하나만 있다면 매개변수의 괄호 생략 가능

// add10 출력문
console.log(add10(100)); // 100 + 10 = 110

호이스팅

함수 호이스팅
- 선언문 형태로 정의한 함수 의 유효 범위가 코드의 맨 처음부터 시작하 게 되는 자바스크립트의 동작 방식
- 특정 블럭의 코드가 자바스크립트 엔진에 의해 실행 되기 전에 호이스팅 단계를 거치는데 이때 선언문 형태의 함수가 생성 되므로 함수 선언 코드보다 먼저 호출하는 코드를 작성하는게 가능
```
console.log("실행 순서 2", add(10, 20));

function add(x, y) {
  return x + y;
}

console.log("실행 순서 3", add(10, 20));
```

변수 호이스팅

호이스팅 단계에서 var 로 선언한 변수 의 경우 선언만 되고 그 값은 undefined 로 초기화 됨
let, const 로 선언한 변수 의 경우 호이스팅 단계에서 선언은 되지만 초기화가 되지 않기 때문에 선언 전에 접근하면 에러 발생
(undefined 값도 할당되지 않은 상태)

console.log(a);
console.log(b); // ReferenceError: Cannot access 'b' before initialization
console.log(c); // ReferenceError: Cannot access 'c' before initialization

var a = 10; // 호이스팅 단계에서 undefinde로 초기화가 돼있음 => 그래서 에러 안남
let b = 20; // 호이스팅 단계에서 선언만 되고 초기화가 안됨 => 그래서 에러남
const c = 30; // 호이스팅 단계에서 선언만 되고 초기화가 안됨 => 그래서 에러남

console.log(a); // 정상적으로 출력 됨
console.log(b); // 정상적으로 출력 됨
console.log(c); // 정상적으로 출력 됨

console.log(add(10, 20)); 
// TypeError: add is not a function
// var 변수는 호이스팅되지만 초기화는 안되므로 이 시점에서 add는 undefined임

// 표현식 방식의 함수 정의
var add = function (x, y) {
  return x + y;
};

console.log(add(10, 20)); // 정상적으로 30으로 출력됨

TDZ(Temporal Dead Zone)

호이스팅 단계에서 변수가 선언된 이후 실제 초기화가 이루어지기 전까지의 구간
변수를 초기화 하기 이전에 변수에 접근할 수 없는 일시적인 영역으로 무분별한 변수 사용을 막고 예측 가능한 코드를 만들기 위한 장치

var add; // 호이스팅 시 선언되고 undefined로 초기화됨

// 본 코드 실행 단계 (아직 함수 할당 전)
console.log(add); 
// 출력 결과: undefined 
// 에러는 아님. 다만 아직 함수가 아님 => 실행 불가능

// 표현식 방식의 함수 정의 (함수를 변수에 할당)
var add = function (x, y) {
  return x + y;
};

console.log(add(10, 20)); // 30 출력됨

ex01-38.js gpt 설명

🔍 코드 설명

function max(n1, n2) {
  let result; // 지역 변수 선언 (블록 스코프)

  if (n1 > n2) {
    result = n1;
  } else {
    result = n2;
  }

  return result;
}

✅ 주요 포인트 설명

항목	설명
함수 이름	`max` — 두 수 중 최대값을 반환
매개변수	`n1`, `n2` — 비교할 두 숫자
지역 변수	`result` — 함수 내부에서만 사용되는 변수
스코프	`let`으로 선언된 `result`는 함수 내부(지역)에서만 유효함
호이스팅	`let`은 호이스팅은 되지만 TDZ(Temporal Dead Zone) 때문에 초기화 전 접근 불가능주석에 `var`로 바꾸면 호이스팅 학습 예시로 적절함

🧠 예시로 보는 지역 변수 vs 전역 변수
result는 함수 내부에서만 선언되었기 때문에 외부에서 접근 불가능

예시:

console.log(result); // ReferenceError: result is not defined

💡 var와 let의 차이 예시

function max(n1, n2) {
  // var result; // 호이스팅으로 함수 최상단에 선언된 것처럼 작동
  let result;     // let은 TDZ 영향 → 선언 전 접근 불가

  if (n1 > n2) {
    result = n1;
  } else {
    result = n2;
  }

  return result;
}

var로 선언하면, 함수 시작 시점에 undefined로 초기화됨
let은 선언 시점까지 TDZ에 있으므로, 선언 전 접근 시 ReferenceError

매개변수
- 기본값 매개변수 (Default parameters)
  - 함수 호출시 인자값을 전달하지 않으면 undefined가 전달됨
  - 값이 전달되지 않거나 undefined를 인자값으로 전달한 경우 지정한 매개변수를 기본값으로 초기화
- 나머지 매개변수 (Rest parameters)
  - 정해지지 않은 수의 매개변수를 배열로 전달받음
  - 함수의 마지막 매개변수 앞에 ...을 붙임
  - 나머지 매개변수의 특징
    - 배열로 수집: 모든 인수를 배열로 수집합니다.
    - 마지막 매개변수로만 사용: 함수 정의에서 나머지 매개변수를 사용한다.
    - 일반 매개변수와 함께 사용가능: 다른 매개변수와 함께 사용할 수 있습니다.
- 인자수
  
  함수에 정의한 매개변수와 함수 호출에 사용되는 인자의 수가 달라도 에러가 발생하지는 않음
  - 매개변수 > 인자
    - 부족한 인자에 대한 매개변수에는 undefined 가 지정됨
    - 다른 강형 언어에서는 매개변수를 호출안해주면 숫자 + 숫자 + undefined라서 NaN이 뜸
```
function add(x, y, z) {
  console.log(z); // undefined
  return x + y;
}
console.log(add(3, 4)); // 7 => z값은 알아서 무시
```
  - 매개변수 < 인자
    - 남는 인자에 대해서는 처리할 매개변수가 없기 때문에 무시됨
```
function add(x, y) {
  return x + y;
}
console.log(add(3 , 4 , 5)); // 7 => 5는 알아서 무시
```
- 암묵적 매개변수
  - 모든 함수에서 명시적으로 선언하지 않고 암묵적으로 사용할 수 있는 매개변수
  - arguments
    - 함수 내에서 arguments 변수로 접근 가능
    - 함수에 전달된 모든 인자들을 담고 있는 컬렉션 유사 배열 객체
    - 배열과 비슷하게 length 속성과 index로 각 인자에 접근 가능
    - arguments 대신 ES6 의 나머지 매개변수(…) 사용을 권장
  - this
    - 함수 내에서 this 키워드로 접근 가능
    - 함수 컨텍스트 객체
    - 함수를 호출한 객체 에 대한 참조