JavaScript에서 함수(function)란 무엇일까?

👾 함수(function)란?

 자바스크립트에서 함수는 하나의 기능을 수행하는 코드 블록이며, 재사용 가능한 코드를 작성하는 데 중요한 역할을 한다. 함수는 인자를 받아들이고 실행할 코드 블록 내에서 처리를 수행한 다음 결과를 반환할 수 있다.

 함수는 일반적으로 이름, 매개변수, 실행할 코드 블록 및 반환값으로 구성되고, 함수를 호출하면 코드 블록이 실행되고 반환값이 호출자에게 반환된다.

 

// 함수선언과 호출 문법

// 1. 매개변수를 안넣고 만드는 방법
function 함수명(){
  // 함수가 호출되었을 때 실행하고자 하는 실행문;
}
함수명();

// 2. 매개변수를 넣고 만드는 방법
function 함수명(매개변수1, 매개변수2...){
  // 함수가 호출되었을 때 실행하고자 하는 실행문;
}
함수명(인자값1, 인자값2...);

• 함수명: 함수를 구분하는 식별자(identifier)

• 매개변수(parameter): 함수를 호출할 때 인자(argument)로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수

• 인자(argument): 함수가 호출될 때 함수로 값을 전달해주는 변수나 상수

 

 

👾 함수 내부의 지역 변수(local variable)와 외부의 전역 변수(global variable)

let name = "fay"; // 전역 변수

function greeting() {
  let sayHi = "안녕하세요"; // 지역 변수
  name = "Elly";  

  return `${sayHi}, ${name}`
}

greeting(); // "안녕하세요, Elly"

console.log(sayHi) // ReferenceError: sayHi is not defined

→ 함수 내에서 선언한 변수인 지역 변수는 함수 안에서만 접근할 수 있다.

→ 전역 변수는 같은 이름을 가진 지역 변수가 없다면, 함수 내부에서 접근 및 수정할 수 있다.

 

 

👾 함수 이름짓기

 함수는 어떤 동작을 수행하기 위한 코드를 모아놓은 것으로, 함수의 이름은 대개 동사이다. 함수 이름은 가능한 한 간결하고 명확해야 하며, 어떤 동작을 하는지 설명할 수 있어야 한다.

 함수가 어떤 동작을 하는지 축약해서 설명해 주는 동사를 접두어로 붙여 함수 이름을 만드는 게 관습이며, 아래와 같은 접두어를 사용할 수 있다.

show...   // 무언가를 보여줌
age...    // 값을 반환함
calc...   // 무언가를 계산함
create... // 무언가를 생성함
check...  // 무언가를 확인하고 불린값을 반환함

 

 

👾 하나의 동작만 담당하는 함수

 함수는 함수 이름에 언급되어 있는 동작을 정확히 수행해야 하며, 독립적인 두 개의 동작은 독립된 함수 두 개에서 나눠서 수행할 수 있게 해야 한다. 한 장소에서 두 동작을 동시에 필요로 하는 경우에는 제 3의 함수를 만들어 그곳에서 두 함수를 호출하는 방식을 사용한다.

 

📌 지양해야 할 함수 사용법

• getAge 함수에 나이를 얻어오는 동작 뿐만 아니라 나이를 출력해 주는 동작을 넣는 경우

• createForm 함수에 form을 만들고 이를 반환하는 동작 뿐만 아니라 form을 문서에 추가하는 동작 등을 넣는 경우

• checkPermission 함수에 승인 여부를 확인하고 그 결과를 반환하는 동작 뿐만 아니라 승인 여부를 보여주는 메시지를 띄우는 동작을 함께 넣는 경우

 

함수를 간결하게 만들면 테스트와 디버깅이 쉬워지고, 함수 그 자체로 주석의 역할까지 하게 된다.

 

 

 

---

자료출처: JAVASCRIPT.INFO

✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!

읽어주셔서 감사합니다 😊