function() in JavaScript

wkdgusrhkd·2021년 2월 24일
0

JAVASCRIPT

목록 보기
3/7
post-thumbnail

function()


함수 형태 1, 선언적 방식의 함수

JS에서의 함수 기본 형태는 다음과 같습니다.

function example() {
    (●'◡'●)
}

example()       // 호출

위와 같은 방식을 선언적 방식이라 합니다.

함수이름을 exmaple과 같이 정할 수 있고, () 안에는 전달받을 매개변수(parameter, param)를 지정할 수 있습니다.

매개변수

매개변수를 지정했으면 함수를 호출 할 때 인자(argument)와 함께 호출 해 주어야 합니다.

function greeting(name){
    console.log('hello', name)
}

greeting('Jang')
  • name => 매개변수 : 전달된 인자를 받아들이는 변수
  • 'Jang' => 인자 : 함수에 전달할 값

매개변수를 지정해주지 않았다면 인자를 전달할 필요도 없습니다.

함수 형태 2, 익명 함수

아래와 같은 방식으로 함수를 작성할 수도 있습니다.

const example2 = function(param) {
    ╰(*°▽°*)╯
}

이를 익명함수라고 부릅니다. 이름이 없는 함수를 만들고 변수에 할당하는 방식이기 때문입니다.

역시나 매개변수를 전달받을 수 있습니다.

함수 형태 1과 2의 차이

함수 형태 1과 2의 차이는 뭘까요?
아래 예제를 실행 해 보세요.

greeting1()

function greeting1() {
    console.log('hello 1')
}

greeting2()

const greeting2 = function() {
    console.log('hello 2')
}

위 예제에서는 각각 함수보다 호출이 위에서 이루어져 있습니다.
greeting1을 호출 했을 때는 정상적으로 작동하지만
greeting2를 호출 했을 때는 greeting2는 오류가 발생합니다.

선언적 방식에서는 JS 특성상 코드의 최상단으로 먼저 올리지만
익명 함수 방식에서는 그렇지 않습니다.

이 현상은 호이스팅(hoisting)과도 연관이 되는데 이 부분은 추후에 업데이트 할 예정입니다.

함수 형태 3, 객체

아래의 방식은 함수 역시도 객체의 한 종류이기에 가능한 방식입니다.

const exmaple3 = new Function('param1', 'param2', 'return param1 + param2')

console.log(example3(4, 6))

함수 형태가 많이 특이합니다.
위와 같은 방식은 사실상 거의 쓰지 않기 때문에 이렇게도 함수를 지정할 수 있구나 정도로만 아시면 될 것 같습니다.

함수 형태 4, 화살표 함수

const example4 = (param1, param2) => {
    console.log('This is arrow function')
}

화살표 함수는 선언적 방식으로는 사용 할 수가 없습니다.
호출이 불가능하기 때문입니다.
매개변수가 한 개일때는 괄호를 생략 할 수 있습니다.

const exmaple4 = param1 => {return param1 + 4}

추가적으로 함수에서 리턴하는 값이 일 때는 {}return을 생략 할 수 있습니다.

const exmaple5 = param1 => param1 + 4

profile
프론트!

0개의 댓글