자바 스크립트(js) 입문 공부 7. 함수 선언식과 함수 표현식, 함수의 호출

함수란?

함수는 ‘호출될 수 있는 코드 조각’입니다.

변수를 선언하고 데이터를 대입하면 변수의 이름을 데이터 대신 사용할 수 있는 것처럼, 

함수를 선언하면 함수의 이름을 코드 조각 대신 사용할 수 있습니다.

 

함수 만드는 방법

함수를 만드는 두 가지 방법이 있습니다. 

1. 함수 선언식

2. 함수 표현식

위 방법들을 차례대로 알아볼게요. 

 

함수 선언식

함수 선언식은 다음과 같은 형태를 가집니다. 

 

function 을 사용하면 선언과 같은 의미가 됩니다. 

선언 이후에 함수명은 중괄호 안의 기능 대신 사용될 수 있습니다.

function sayHello(){
    console.log("안녕!")
}
sayHello()

함수 표현식

함수 표현식은 다음과 같은 형태를 가집니다. 

즉, 이름 없는 선언식에 나중에 이름을 붙여줍니다. 

함수 표현식도 마찬가지로 함수명이 중괄호 안의 기능 대신 사용될 수 있습니다. 

const sayBye = function(){
    console.log("잘가!")
}
sayBye()

 

 

 

함수 선언식과 함수 표현식의 차이점( hoisting)

 

함수 선언식은 호이스팅(hoisting) 이 가능하지만 함수 표현식은 호이스팅hoisting이 불가능합니다. 

호이스팅hoisting이란 함수를 선언하는 부분이 함수를 호출하는 부분보다 나중에 있어도 상관이 없는 것이 호이스팅입니다.

즉, 함수 정의가 호출보다 뒤에 와도 되는 것입니다. 

sayHello()
sayBye()

function sayHello(){
    console.log("안녕!")
}

const sayBye = function(){
    console.log("잘가!")
}

 

함수 호출을 앞에서 했을 때의 결과를 확인해볼게요. 

 

함수 선언식이 오류가 나지 않는 이유는 데이터의 전처리 과정으로 설명할 수 있습니다. 

데이터 전처리 과정이란 데이터를 분석 및 처리에 적합한 형태로 만드는 과정을 총칭합니다.

즉 데이터를 본격적으로 분석하기 이전에 기초적인 전처리를 통해 우선적으로 해석할 코드를 찾아서 먼저 해석합니다. 

함수 선언식의 경우는 전처리 대상이므로 실행을 본격적으로 하기 전에 함수 선언식 부분은 먼저 전처리가 되었기 때문에 오류가 나지 않습니다. (자세한 건 이후에 공부합니다.) 

 

함수 사용법

함수가 만들어지고 나면, 함수명은 스스로 보관하고 있는 구문 대신 사용될 수 있습니다. 

그리고 함수가 사용되기 위해서는, 함수를 ‘호출’해야만 합니다.

함수를 호출할 때는 함수의 이름 뒤에 반드시 소괄호를 붙여줘야 합니다.

 

함수의 이름 규칙 

함수의 기능을 호출하기 위해서는 함수의 이름을 알아야 합니다.

함수 이름을 정할 때의 규칙은 변수 이름 정할 때의 규칙과 유사하지만 다음 사항들을 주의해야 합니다. 

(권장사항이에요.) 

1. 함수의 기능을 적절하게 표현할 수 있는 이름을 사용하자

2. 명사보다는 동사로 된 이름을 사용하자(기능이므로) 

3. 소문자로 시작하되, 여러 단어가 섞인 경우 카멜표기법을 사용하자

 

함수의 값, 데이터 반환

 

함수를 만들 때, 함수가 데이터를 반환하도록 할 수 있습니다.

함수가 데이터를 반환한다는 것은, 함수 호출문이 데이터로 대체됨을 뜻합니다.

함수가 데이터를 반환하려면, ‘이 데이터를 반환한다’라는 구문을 함수 내부에 추가해주어야 합니다.

이때 키워드 return이 사용됩니다. 이 때 함수 내부에 return 외에 다른 코드를 포함해도 됩니다. 

 

return 

retrun 은 두 가지 기능을 수행합니다. 

1. 함수로부터 데이터를 반환하는 것입니다. 

return은 뒤에 붙은 데이터를 반환한다. 이때 데이터는 딱 하나씩만 반환할 수 있습니다

 

2. 다른 하나는 함수를 끝내는 것입니다. 

return은 데이터 반환 뿐 아니라 함수를 강제로 종료하는 역할도 수행할 수 있습니다.

종료 목적만 있는 경우에는 return 뒤에 데이터를 기입하지 않아도 됩니다. 

 

함수 호출법

함수 호출문은 ‘함수명 + 소괄호’입니다. 소괄호의 역할은, 함수가 실행될 때 사용할 재료를 전달받는 것 입니다.

재료란 데이터를 뜻합니다.

재료를 전달받아 기능을 수행하는 함수를 만들 때는, 재료의 이름을 정해 주어야 합니다. 이를 ‘매개변수’라 합니다.

 

 

매개 변수는 원하는만큼 추가할 수 있습니다. 

구분자 쉼표(,)를 이용해서 추가하고 호출시에도 그 수에 맞게 재료를 전달합니다. 

 

 

우리가 지금까지 명칭한 '재료'는 '인자' 혹은 '인수' 라고 합니다. 

즉, 재료를 전달받기 위해 만들어 둔 변수를 매개변수(parameter), 

실제 함수 호출 시에 전달하는 데이터를 인자(argument)라고 부릅니다. 

 

이 재료는 함수가 기능을 수행함에 있어서 사용할 수 있는 데이터이기 때문에 이 데이터를 반환하는 함수를 만들 수 있습니다. 

함수를 만들 때 매개변수는 있어도 되고 없어도 된다. 키워드 return을 통한 데이터 반환 또한 있어도 되고 없어도 됩니다. 

이로써 우리가 만들 수 있는 함수의 유형은 다음의 네 가지로 정리됩니다. 

매개변수도, 반환도 없는 함수 

매개변수는 있지만, 반환은 없는 함수 

매개변수는 없지만, 반환은 있는 함수 

매개변수와 반환이 모두 있는 함수

 

함수에 대한 예제를 같이 살펴볼게요. 

let p = document.querySelector("p#text")
let myFood = "크로플"
let desc = "따끈따끈한"

myFood = `${desc} ${myFood}`
p.textContent = myFood

이렇게 함수를 하지 않고 기재한 코드를 함수화를 하여 작성하는 것을 진행해보겠습니다. 

우선 p태그를 선택한 뒤에 textContent 를  저장하는 함수를 만들어볼게요. 

function setText(text){
    let p = document.querySelector("p#text")
    p.textContent = text
}

이제 좋아하는 음식을 받아서 반환하는 함수를 만듭니다. 

function setFoodText(food){
    return `맛있는 ${food}`
}

이제 위 두 가지의 함수를 합쳐 prompt로 좋아하는 음식을 입력하고 출력하는 것까지 해볼게요. 

function setText(text){
    let p = document.querySelector("p#text")
    p.textContent = text
}

function setFoodText(food){
    return `맛있는 ${food}`
}

setText(setFoodText(prompt("내가 좋아하는 음식?")))

위 코드를 보면 우선 prompt 로 좋아하는 음식을 받고  

-> setFoodText 의 인수로 전달하여 '맛있는 ㅇㅇㅇ' 를 매개변수의 자리에 넣고 

-> setText 의 인수로 setFoodText 매개변수로 받은 '맛있는 ㅇㅇㅇ'를 전달합니다. 

-> setText의 값을 document.querySelector 로 출력합니다. 

 

여기까지 함수를 선언하고 호출하는 것까지 알아보았습니다. 

이 다음에는 이벤트에 대해서 알아볼게요.