[JavaScript] function 문법 사용법

function (일명 함수)라는 문법은 왜 사용할까요?

함수는 긴 코드를 짧게 축약하고 싶을 때, 특정 기능을 다음에도 쓰기 위해 모듈화 해놓는 문법입니다.

 

function 함수명(){
    코드 내용
}

function 키워드를 사용한 후 소괄호와 중괄호를 붙이고 소괄호 왼쪽에 함수명을 작명해줍니다.

그다음 중괄호 안에 작성할 코드를 입력해주면 됩니다.

 

함수 이름을 영어로 작명할 시 주의할 점이 여러 가지가 있는데 그중 첫 번째는 함수명은 영어의 소문자로 시작해야 합니다.

또한 open_modal()과 같이 작성하는 것보다 openModal()과 같이 camelCase 방식으로 붙여 쓰는 것이 자바스크립트 관습입니다.

 

 

자바스크립트는 html을 조작하는 언어이기 때문에 조작할 html이 위쪽에 있어야 조작이 잘됩니다.

컴퓨터는 html 파일을 위에서부터 한 줄씩 읽어 내려갑니다.

html을 자바스크립트보다 먼저 작성해야 html을 먼저 읽을 수 있고 먼저 읽어야 html 조작이 가능하기 때문입니다.

 

function에 사용 가능한 파라미터 문법

함수 내에서 파라미터를 사용할 수 있고 아래와 같은 방법으로 작성할 수 있습니다.

function 함수명(파라미터){
    document.getElementById('hello').style.display = 파라미터;
}

파라미터를 입력해서 함수를 사용할 때는 (파라미터) 자리에 원하는 문자를 입력해줄 수 있습니다.

문자를 입력하면 중괄호 내부의 파라미터 자리에 입력한 파라미터가 들어가게 됩니다.

 

예시

function plus(){
    2 + 1
}

코드를 작성하다가 2 + 1과 같은 수식을 함수로 축약해서 사용하고 있다고 가정해봅시다.

만약 2 + 2도 필요하고 2 + 3도 필요하다면 어떻게 해야 할까요?

function plus(){
  2 + 1
}

function plus2(){
  2 + 2
}

function plus3(){
  2 + 3
}

이런 식으로 작성해도 되지만 비슷한 함수들은 파라미터 문법이 있기 때문에 함수를 여러 개 만들지 않아도 됩니다.

 

function plus(파라미터){
  2 + 파라미터
}

가변적인 부분에 파라미터를 입력해주면 함수를 사용할 때마다 plus(1)을 할 경우 2 + 1을 출력해주고 plus(2)를 입력하면 2 + 2를 출력해줌으로써 함수 하나로 해결이 가능합니다. 이러한 이유들로 파라미터 문법을 사용합니다.

 

 

파라미터 문법 특징

파라미터 문법 세부사항이 2개가 있는데 첫 번째는 파라미터는 자유롭게 작명이 가능하다는 것이고 두 번째는 파라미터는 콤마로 구분하여 2개 이상 사용이 가능합니다.

function plus(자유로운작명){
  2 + 자유로운작명
}

 

function plus(a, b){
  a + b
}
plus(2, 5);