[JavaScript] ⑤ 자바스크립트 함수란?

2020. 6. 7. 19:39·개발/JavaScript

자바스크립트에서 함수란 무엇일까? 함수란 입력을 받고 입력(input)을 받아 출력(output)을 내보내는 일종의 작은 프로그램을 의미한다.

 

예시를 살펴보자. 함수란 우리가 고등학교 수학 교과서에서 본 것처럼 f(x) = x + 1과 같은 구조를 취한다. 이는 함수(f) 안에 x값을 넣으면 x+1 값이 출력되는 일종의 연산을 의미한다. 

function f(x) {
    return x = x + 1;
}

f(2); // 3

위 예에서 볼 수 있듯 함수는 코드 블록 내의 문으로 구성된다. f()라는 함수는 아규먼트 x를 입력값으로 받는다. 입력값이 전달되면 여기에 1을 더해 이를 반환하게 된다. 따라서 f(2)를 실행시킬 경우 3이라는 값을 얻게 된다.

자바스크립트에서 함수 선언하는 방법

자바스크립트에서 함수를 선언하기 위해서는 function 키워드를 사용하면 된다. 다음은 "Hellow, World!"를 출력하는 greeting 함수를 선언하는 과정이다. 이를 함수 선언문을 통한 함수 생성이라 한다.

function greeting() {
    console.log("Hello, World!");
}

greeting(); // "Hello, World!"

다음과 같은 방법으로도 함수를 선언할 수도 있다. 이를 함수 호출문이라 한다. .

const greeting = function () {
    console.log("Hello, World!");
}

greeting(); // "Hello, World!"

자바스크립트 함수의 구성

자바스크립트에서 함수는 크게 세 부분으로 구성된다. 먼저 함수의 이름이다. 앞선 예시에서의 f, 그리고 greeting은 함수의 고유한 이름이다. 이름은 생략할 수 있으며, 그럴 경우에는 이를 익명 함수라 한다.

 

둘째는 매개 변수 또는 파라미터(parameter)다. f 함수에서 x가 바로 매개변수다. 매개변수는 greeting 함수에서처럼 존재하지 않거나, 혹은 하나 이상일 수 있다. 이때, 해당 매개 변수는 함수가 호출되기 전까지는 '존재하지 않는다'.  또한 함수 내에서 선언된 변수는 해당 함수 밖에 존재하는 변수에는 영향을 미치지 않는다(로컬 스코프라 함). 바꿔말하면, 함수 내부에서만 해당 매개 변수를 참조할 수 있고, 외부에서는 참조할 수 없다. 각 매개 변수에는 함수가 호출 될 때 순서대로 매개 변수에 할당되며, 매개 변수는 함수 내에서 변수와 동일하게 취급된다.

 

세 번째로 함수의 바디(body), 즉 내용이다. 함수가 호출될 때, 실행될 문들이 담기며, 시작과 끝을{}로 감싸준다. 다음 예시를 살펴보자.

function profile(name, age) {
    console.log("Hello, My name is " + name + " and I am " + age + " years old" + ".");
}

profile("Hwi", 30); // Hello, My name is Hwi and I am 30 years old.

위 예시에서 함수의 이름은 profile이며, 해당 함수는 name과 age를 아규먼트로 받는다. 해당 함수의 바디에는 사용자가 입력한 이름과 나이에 따라 자기 소개 문구를 출력하라고 되어 있다.

함수와 리턴

함수에서 특정 값을 리턴할 때는 return 키워드를 사용한다. 리턴은 함수의 실행 결과를 외부로 반환한다. 함수는 해당 키워드가 실행되는 지점에서 종료되며, return 키워드가 존재하지 않는 경우 undefined가 반환된다. 

function greeting() {
    return("Hello, world!");
}

greeting(); // "Hello, world!"

function notGreeting() {
  "Hello, world"
}

notGreeting(); // undefined

마치며

자바스크립트에서 함수란 특정 작업을 수행하는 문을 모은 하나의 작은 프로그램이다. 함수는 자바스크립트의 핵심이라 할 수 있는 것으로, 이를 활용하여 코드 재사용성을 높이고 프로그램 규모를 확장해 나갈 수 있다.

저작자표시 비영리 변경금지 (새창열림)

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

자바스크립트 표현식과 연산자 개념  (0) 2020.06.08
[JavaScript] ③ 자바스크립트 데이터 타입  (0) 2020.06.07
[JavaScript] ② 자바스크립트 변수의 이해  (0) 2020.06.06
'개발/JavaScript' 카테고리의 다른 글
  • 자바스크립트 화살표 함수 사용 방법 정리
  • 자바스크립트 표현식과 연산자 개념
  • [JavaScript] ③ 자바스크립트 데이터 타입
  • [JavaScript] ② 자바스크립트 변수의 이해
휘Hwi
휘Hwi
여행, 사진, 개발, 책 이야기를 기록하는 여행자 휘의 블로그 𓂍
Klook.com
  • 휘Hwi
    휘: 끝나지 않은 이야기
    휘Hwi
  • 전체
    오늘
    어제
    • 분류 전체보기
      • 기록
        • 일상 에세이
        • 인사이트
        • 투자와 재테크
        • 코인 이야기
        • 아카이빙
        • 집무실 레터
        • 사랑에 대하여
        • 번역 이야기(完)
        • 프리랜서 일지(完)
      • 여행
        • 🌎 세계 여행기 S1 (完)
        • 🌊 삼삼한 여행기 (完)
        • 🚶 온더로드
        • 🇯🇵 일본
        • 🏝️ 발리
        • 🇻🇳 베트남
        • 🇱🇰 스리랑카
        • 🇮🇳 인도
        • 🇹🇭 태국
        • 🇸🇬 싱가포르
        • 🇦🇺 호주
        • 🇭🇰 홍콩
        • 🇰🇷 한국
        • 🍚 여행자의 한 끼
        • ℹ️ 여행 정보
      • 사진
        • 사진가
        • 사진 이론과 생각
        • 사진 관련 정보
      • 영상
        • 파이널컷 모션 공부
        • 고프로 GoPro
        • 영상 관련 정보
      • 책
        • 책 읽고 쓰기
      • 개발
        • 티스토리
        • Internet
        • HTML
        • CSS
        • JavaScript
        • Typescript
        • React
        • Node.js
        • Express
        • NestJS
        • Python
        • Django
        • MySQL
        • MongoDB
        • AWS
        • Deployment
        • Terminal
        • Git
        • Glossaries
        • Articles
        • Projects
        • TIL;
      • 미분류
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
휘Hwi
[JavaScript] ⑤ 자바스크립트 함수란?
상단으로

티스토리툴바