leecom116

제이의 기술 블로그
  • Print (216)
    • Frontend (29)
      • React (3)
      • HTML, CSS (8)
      • JavaScript (11)
      • JQuery (4)
      • JSP (2)
    • Backend (59)
      • Java (31)
      • Spring (11)
      • Spring Boot (0)
      • Python (1)
      • Node.js (1)
      • C, C++ (12)
      • Linux (2)
    • Database (3)
      • MariaDB (0)
      • Oracle (0)
      • MySQL (0)
    • Project (1)
    • Algorithm (67)
      • 백준 (43)
      • 프로그래머스 (0)
      • 이코테 (6)
      • 코드업 (17)
    • Tool (2)
      • Git (1)
      • Log (1)
    • CS (4)
    • Tech Interview (18)
      • Java (9)
      • Web (9)
    • Study (31)
      • 인프런 (3)
      • 정보처리기사 (8)
      • util (4)
      • 쌍용 (14)

깃허브

    https://github.com/leecom116

«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

최근 글

인기 글

블로그 메뉴

  • 홈
  • 태그
  • 방명록

태그

  • 논리 연산자
  • 자바의 정석
  • 나도코딩
  • 코드업 기초
  • static메서드
  • 자바 예외 처리
  • JSP
  • char
  • c언어
  • 코드업
  • 코드업 기초100제
  • 코드업 2차원 배열
  • C언어 프로젝트
  • CSS
  • 웹 개발
  • 객체 배열
  • 참조형 변수
  • 웹 개발 부트캠프
  • 메타포어
  • 산술 변환
  • 정보공학 방법론
  • Associate
  • 나선형 모델
  • 자바 인터페이스
  • HTML
  • 의존성 주입
  • man month
  • 웹개발
  • 델파이 기법
  • Web Developer

최근 댓글

hELLO · Designed By 정상우.
leecom116
Frontend/JavaScript

[JavaScript] 일반 함수 vs 화살표 함수

2024. 8. 6. 09:25

일반 함수와 화살표 함수의 차이점

​

1. this 객체 바인딩

​

일반 함수

실행 주체에 따른 this가 동적으로 바인딩

1) 함수 실행 시 전역(window)객체로 바인딩

2. 메소드 실행 시 메소드를 소유하고 있는 객체를 바인딩

3. 생성자 실행 시에는 새롭게 만들어진 객체를 바인딩

​

-> 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정

​

화살표 함수

ES6부터 새로 추가된 익명 함수

즉시 실행이 필요할 경우에 사용

항상 상위 스코프의 this를 바인딩 (정적 바인딩)

또한, call, apply, bind 메소드를 사용하여 this를 변경할 수 없음

​

​

2. 생성자 함수로 사용 가능 여부

일반 함수는 생성자 함수로 사용 가능

화살표 함수는 생성자 함수로 사용 불가

​

-> prototype 프로퍼티 존재 x

​

​

3. arguments 사용 가능 여부

일반 함수에서는 함수가 실행될 때 암묵적으로 arguments 변수가 전달되어 사용 가능

화살표 함수에서는 arguments 변수가 전달되지 않음

저작자표시

'Frontend > JavaScript' 카테고리의 다른 글

[Promise] 비동기 작업을 유연하게  (0) 2024.11.27
$(document).ready() 와 window.onload 의 차이점  (0) 2024.07.01
자바스크립트의 동작 원리  (0) 2024.02.03
[JavaScript] 디바운싱과 쓰로틀링  (0) 2024.01.31
window 객체의 opener 사용하기  (0) 2023.10.15
    'Frontend/JavaScript' 카테고리의 다른 글
    • [Promise] 비동기 작업을 유연하게
    • $(document).ready() 와 window.onload 의 차이점
    • 자바스크립트의 동작 원리
    • [JavaScript] 디바운싱과 쓰로틀링
    leecom116
    leecom116

    티스토리툴바