[혼공스] 4주차_함수

2025. 2. 10. 00:08·[혼공스]혼자 공부하는 자바 스크립트/혼공학습단 숙제
목차
  1. 1. 함수(Function)란?
  2. 2. 함수 선언 방식
  3. 2.1. 함수 선언문 (Function Declaration)
  4. 2.2. 함수 표현식 (Function Expression)
  5. 2.3. 화살표 함수 (Arrow Function)
  6. 3. 함수 매개변수와 반환값
  7. 3.1. 매개변수 (Parameters)
  8. 3.2. 기본값 매개변수 (Default Parameters)
  9. 3.3. 반환값 (Return Value)
  10. 4. 함수의 다양한 활용
  11. 4.1. 콜백 함수 (Callback Function)
  12. 4.2. 즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)
  13. 4.3. 재귀 함수 (Recursive Function)
  14. 4.4. 클로저 (Closure)
  15. 5. 함수와 this 키워드
  16. 5.1. 일반 함수에서 this
  17. 5.2. 객체 메서드에서 this
  18. 5.3. 화살표 함수에서 this
  19. 6. 정리

이 카테고리는 한빛미디어의 혼자 공부하는 자바스크립트 교재를 학습하는 내용을 정리하는 공간입니다.


📌 자바스크립트 함수 정리

1. 함수(Function)란?

  • 특정 작업을 수행하는 코드 블록.
  • 같은 코드를 반복해서 사용하지 않도록 도와줌 (재사용성).
  • 유지보수와 가독성을 높여줌.

2. 함수 선언 방식

2.1. 함수 선언문 (Function Declaration)

function sayHello() {
  console.log("Hello, World!");
}
sayHello(); // 실행 결과: Hello, World!
  • function 키워드를 사용해 선언.
  • 코드 실행 전에 호이스팅됨.

2.2. 함수 표현식 (Function Expression)

const sayHello = function() {
  console.log("Hello, World!");
};
sayHello(); // 실행 결과: Hello, World!
  • 변수에 익명 함수를 할당.
  • 선언 전에 호출할 수 없음 (호이스팅 X).

2.3. 화살표 함수 (Arrow Function)

const sayHello = () => {
  console.log("Hello, World!");
};
sayHello();
  • function 키워드를 사용하지 않고 => 사용.
  • this 바인딩 방식이 다름.

3. 함수 매개변수와 반환값

3.1. 매개변수 (Parameters)

function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet("Alice"); // 실행 결과: Hello, Alice!
  • name이 매개변수(parameter).

3.2. 기본값 매개변수 (Default Parameters)

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}
greet(); // 실행 결과: Hello, Guest!
  • 값이 전달되지 않으면 기본값 사용.

3.3. 반환값 (Return Value)

function add(a, b) {
  return a + b;
}
const sum = add(3, 4);
console.log(sum); // 실행 결과: 7
  • return을 사용해 결과 반환.

4. 함수의 다양한 활용

4.1. 콜백 함수 (Callback Function)

  • 함수의 인자로 전달되어 실행되는 함수.
function process(callback) {
  console.log("작업 시작");
  callback();
  console.log("작업 끝");
}
process(() => console.log("중간 작업")); 

실행 결과:

작업 시작
중간 작업
작업 끝

4.2. 즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)

(function() {
  console.log("즉시 실행 함수!");
})();
  • 함수가 정의되자마자 즉시 실행됨.

4.3. 재귀 함수 (Recursive Function)

function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}
console.log(factorial(5)); // 실행 결과: 120
  • 자기 자신을 호출하는 함수.
  • 반복문 없이 반복적인 작업 수행 가능.

4.4. 클로저 (Closure)

function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}
const counter = outer();
counter(); // 실행 결과: 1
counter(); // 실행 결과: 2
  • 내부 함수가 외부 함수의 변수에 접근할 수 있음.
  • 상태를 유지하는 함수 만들 때 유용.

5. 함수와 this 키워드

5.1. 일반 함수에서 this

function showThis() {
  console.log(this);
}
showThis(); // 실행 결과: window (strict mode에서는 undefined)
  • 전역에서 호출하면 window(브라우저 환경) 또는 undefined(strict mode) 출력.

5.2. 객체 메서드에서 this

const person = {
  name: "Alice",
  greet() {
    console.log(this.name);
  }
};
person.greet(); // 실행 결과: Alice
  • this는 호출된 객체를 가리킴.

5.3. 화살표 함수에서 this

const obj = {
  value: 10,
  getValue: () => {
    console.log(this.value);
  }
};
obj.getValue(); // 실행 결과: undefined
  • 화살표 함수는 this를 바인딩하지 않음 (상위 스코프의 this를 그대로 사용).

6. 정리

  • 자바스크립트의 함수는 다양한 방식으로 선언 가능 (선언문, 표현식, 화살표 함수).
  • 매개변수, 반환값, 기본값을 활용할 수 있음.
  • 콜백 함수, 즉시 실행 함수, 재귀 함수, 클로저 등으로 유용하게 사용됨.
  • this는 함수의 호출 방식에 따라 다르게 동작함.

 

 

p.202 <윤년을 확인하는 함수 만들기>

'[혼공스]혼자 공부하는 자바 스크립트 > 혼공학습단 숙제' 카테고리의 다른 글

[혼공스] 회고록  (1) 2025.02.24
혼공스_6주차  (0) 2025.02.24
[혼공스] 5주차_객체, 속성, 메서드  (0) 2025.02.17
[혼공스] 2주차_if 조건문  (0) 2025.01.19
[혼공파] 1주차_자바스크립트 시작하기  (0) 2025.01.12
  1. 1. 함수(Function)란?
  2. 2. 함수 선언 방식
  3. 2.1. 함수 선언문 (Function Declaration)
  4. 2.2. 함수 표현식 (Function Expression)
  5. 2.3. 화살표 함수 (Arrow Function)
  6. 3. 함수 매개변수와 반환값
  7. 3.1. 매개변수 (Parameters)
  8. 3.2. 기본값 매개변수 (Default Parameters)
  9. 3.3. 반환값 (Return Value)
  10. 4. 함수의 다양한 활용
  11. 4.1. 콜백 함수 (Callback Function)
  12. 4.2. 즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)
  13. 4.3. 재귀 함수 (Recursive Function)
  14. 4.4. 클로저 (Closure)
  15. 5. 함수와 this 키워드
  16. 5.1. 일반 함수에서 this
  17. 5.2. 객체 메서드에서 this
  18. 5.3. 화살표 함수에서 this
  19. 6. 정리
'[혼공스]혼자 공부하는 자바 스크립트/혼공학습단 숙제' 카테고리의 다른 글
  • 혼공스_6주차
  • [혼공스] 5주차_객체, 속성, 메서드
  • [혼공스] 2주차_if 조건문
  • [혼공파] 1주차_자바스크립트 시작하기
알뜰한대학생
알뜰한대학생
  • 알뜰한대학생
    ALT-LOG
    알뜰한대학생
  • 전체
    오늘
    어제
    • 분류 전체보기 (20)
      • TIL(Today I Learn) (0)
      • Coding Test (0)
        • programmers (0)
        • Baekjoon (0)
      • 국비지원교육 (14)
        • [계룡건설] 빅데이터 기반 GreenTech SW.. (13)
        • 관제시스템 GUI 구현을 통한 자바(JAVA)프로.. (1)
      • [혼공스]혼자 공부하는 자바 스크립트 (6)
        • 혼공학습단 숙제 (6)
      • 자격증 (0)
        • 정보처리기사 (0)
        • SQLD (0)
        • 빅데이터분석기사 (0)
        • 데이터분석준전문가 (0)
        • 웹디자인기능사 (0)
        • OCJP (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
알뜰한대학생
[혼공스] 4주차_함수
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.