자바스크립트의 함수 선언 및 표현 방법을 알려줄게!

2024. 7. 18. 10:30·웹개발/JavaScript
728x90

오늘은 함수에 대해 알아보자. 함수는 프로그램에서 아주 중요한 개념이야.

쉽게 말해, 함수는 하나의 특별한 목적을 가지고 코드를 실행하도록 만드는 문법이야.

다양한 방법으로 함수를 정의하고 사용할 수 있어. 그럼, 하나씩 살펴볼까?


함수 선언식과 함수 표현식

자바스크립트에서는 함수를 두 가지 방법으로 정의할 수 있어: 1. 함수 선언식과 2. 함수 표현식.

그리고 두 가지 방법을 알게 되면 3. 화살표 함수도 사용할 수 있게 될거야!


1. 함수 선언식 (Function Declaration)

함수 선언식은 함수를 미리 선언하는 방식이야. 이렇게 하면, 함수가 정의되기 전에 호출할 수 있어.

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

sayHello(); // "Hello!" 출력

 

2. 함수 표현식 (Function Expression)

함수 표현식은 함수를 변수에 할당하는 방식이야. 이렇게 하면, 함수가 정의된 후에만 호출할 수 있어.

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

sayHello(); // "Hello!" 출력

함수 표현식에는 이름이 없는 익명 함수(unnammed function)와 이름이 있는 기명 함수(nammed function)가 있어.

let sayHello = function() {
  console.log("Hello!");
}; // 익명 함수

let sayHelloNamed = function hello() {
  console.log("Hello!");
}; // 기명 함수

 

3. 화살표 함수 (Arrow Function)

화살표 함수는 함수 표현식의 또 다른 형태야. 더 간단하게 작성할 수 있어.

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

sayHello(); // "Hello!" 출력

function 대신에 var나 const로 식별자를 생성하고 = 할당기호를 통해 매개변수가 들어갈 공간(소괄호) 를 할당하고 => 를 이용하여 함수식을 입력하면 돼.

* new Function 문법

new Function을 사용하여 함수를 만들 수도 있어. 다만, 이 방식은 잘 사용되지 않아.

const sayHello = new Function('console.log("Hello!");');

sayHello(); // "Hello!" 출력

함수를 선언했다면 함수를 호출하는 방법을 알아야겠지?

함수를 호출하려면 함수 이름과 소괄호 ()를 사용하면 돼.

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

sayHello(); // "Hello!" 출력

 

함수는 매개변수를 받을 수 있어. 매개변수는 함수가 실행될 때 사용할 수 있는 변수야.

function sum(a, b) {
  console.log(a + b);
}

sum(10, 20); // 30 출력

함수는 자바스크립트에서 중요한 개념이야.

다양한 방법으로 정의하고 사용할 수 있는 만큼, 잘 이해하고 활용하는 것이 중요해.

함수 선언식, 함수 표현식, 화살표 함수, new Function 등 다양한 방법을 알아봤으니, 직접 코드를 작성해보면서 익혀보자!

궁금한 점이 있으면 댓글에 달아줘!

728x90

'웹개발 > JavaScript' 카테고리의 다른 글

자바스크립트 이벤트 모르면 나가라.  (2) 2024.07.20
DOM(Documents Object Model)이 뭐야!?@!??  (0) 2024.07.20
ProtoType(프로토타입) 그게 뭐죠?  (0) 2024.07.18
생성자 함수란 무엇일까?  (0) 2024.07.18
자바스크립트 자료형 쉽게 이해하기: 기본 자료형부터 참조 자료형까지  (0) 2024.07.17
'웹개발/JavaScript' 카테고리의 다른 글
  • 자바스크립트 이벤트 모르면 나가라.
  • DOM(Documents Object Model)이 뭐야!?@!??
  • ProtoType(프로토타입) 그게 뭐죠?
  • 생성자 함수란 무엇일까?
튼튼발자
튼튼발자
프론트엔드 개발자입니다. 헬스를 가끔해서인지 몸이 튼튼한거 같습니다. 그래서 튼튼한 개발자 => 튼튼발자입니다. 프론트엔드 및 관련 개발 내용 블로그 글로 정리해서 올려둡니다.
    250x250
  • 튼튼발자
    튼튼발자
    튼튼발자
  • 전체
    오늘
    어제
    • 분류 전체보기 (192)
      • 튼튼발자의 끄적끄적 (10)
      • 웹개발 (94)
        • HTML (5)
        • CSS (2)
        • JavaScript (40)
        • TypeScript (5)
        • REACT (22)
        • Next.js (13)
        • GIt (7)
      • 기타 (3)
        • 일상 (3)
      • 프로젝트 (27)
        • Componique: UI 컴포넌트 라이브러리 (18)
        • GitHub Profile Viewer (8)
        • 잇핏 (1)
      • 프론트엔드 개발자로 취업준비 (1)
        • 기술 면접 (7)
        • 코딩 테스트 준비하기 (0)
        • 자기소개서&지원서&이력서 (0)
      • 컴퓨터과학 (12)
        • 운영체제 (6)
        • 알고리즘 (6)
      • 전공 공부 (37)
        • AI(인공지능) (2)
        • 컴퓨터네트워크 (19)
        • 네트워크프로그래밍 (3)
        • SW소프트웨어응용설계 (7)
        • 클라우드컴퓨팅 (3)
        • 웹서비스프로그래밍 (3)
      • PT (0)
      • 취준일기 (0)
  • 블로그 메뉴

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

  • 공지사항

  • 인기 글

  • 태그

    데이터전송
    tailwind
    네트워크
    NextJs
    github
    프론트엔드개발
    코딩
    componique
    프론트엔드
    트랜스포트계층
    프로그래밍
    JS
    상태관리
    ui컴포넌트
    TCP
    자바스크립트
    웹개발
    JavaScript
    리액트
    react
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
튼튼발자
자바스크립트의 함수 선언 및 표현 방법을 알려줄게!
상단으로

티스토리툴바