HTML&CSS&Javascript/JS

[JS] 함수의 정의 및 필요성 / 함수를 정의하는 4가지 방법

킹우현 2023. 8. 18. 23:09

함수의 정의

 

함수란 ? 하나의 특별한 목적의 작업을 수행하기 위해 독립적으로 설계된 프로그램 코드의 집합

 

떠한 입력(Input)을 받아 특정한 기능이나 계산을 수행한 다음 그 결과(Output)를 돌려주는 역할을 한다. (1️⃣ input 받기 → 2️⃣ 기능 수행 → 3️⃣ output 반환)

 

물론, 프로그래밍에서 쓰는 함수는 입력이나 결과 없이도 함수 안에서 특정 기능만을 수행할 수도 있다. (1️⃣ input 받기 → 2️⃣ 기능 수행 OR 2️⃣ 기능 수행 only)

 

함수의 선언과 실행

// 1. 함수의 선언 (또는 정의)
function sayHello(name) {  // name이라는 매개변수가 입력되도록 만들어진 함수!
  console.log("Hello, " + name + "! 😆");
}

함수의 선언(정의): 함수의 이름부터 함수에 들어갈 매개변수, 함수를 실행했을 때 수행할 구체적인 내용까지 정의(Definition)하는 것

 

// 2. 함수의 실행 (또는 호출)
sayHello("Jaewon");  // 인수에 "Jaewon"을 넣어 "Hello, Jaewon! 😆"이 출력
                     // 다만, 인수에 다른 이름을 넣으면 name 부분은 바뀔 수 있다.

함수의 실행(호출): 함수가 동작하게 하려고 미리 정의해둔 내용을 함수의 이름으로 호출(Call)하는 것


✨ 함수를 선언할 때 사용한 변수를 매개변수(Parameter)라고 부르고, 함수를 실행할 때 전달한 값을 인수(Argument) 또는 전달인자라고 한다.

 

함수의 필요성

  • 재사용성 - 대체로 함수를 만드는 이유는 다시 사용하기 위해서다. 코드를 작성하다 보면 같은 작업을 여러 곳에서 반복해야 하는 일이 생기기 마련이다. 이때 반복적인  코드가 간단하지 않고, 몇백 줄이 넘어가는 복잡한 코드일 수도 있다. 이럴 때, 반복되는 코드를 함수로 만들어두고 필요할 때마다 불러서 사용하면 굉장히 편리할 것이다.
  • 가독성 - 함수의 기능을 잘 정의하고 함수의 이름도 잘 지어놨다면, 해당 함수명만으로도 이 함수가 어떤 기능을 할지 어떻게 동작할지 자연스럽게 유추할 수 있을 것이고, 해당 기능이 필요할 땐 선언한 함수를 호출함으로써 불필요한 소스는 줄어들게 되며, 체계적이면서도 가독성 높은 소스를 구성할 수 있다.
  • 모듈화 - 대규모의 프로젝트를 구성하게 될 때, 필요한 기능을 정의하고 기능을 팀별로 구성하여, 서로에게 영향을 미치지 않도록 모듈화해두면, 유지보수나 버그 발생 시 해당 모듈의 함수만 수정하면 되기 때문에 보다 편리해진다.

 

 

함수를 정의하는 방법

다음은 자바스크립트에서 함수를 선언하는 4가지 방법에 대해 알아보겠습니다.

 

1) 함수 선언문

function add(x, y) {
	return x + y;
}

console.dir(add);

consolg.log(add(3, 10));

 

2) 함수 표현식

var add = function (x, y) {
	return x + y;
}

console.log(add(1, 3); // 4

자바스크립트의 함수는 객체 타입의 값이며, 값처럼 변수에 할당도 가능하고 프로퍼티 값이 될수도, 배열의 요소가 될 수도 있다.

 

👉🏻 이러한 성질을 갖는 객체를 일급 객체라고 한다 !

 

함수 리터럴로 생성한 함수 객체를 변수에 할당하는 것"함수 표현식"이라고 한다.

 

3) Function 생성자 함수

var add = new Function('x', 'y', 'return x + y');

console.log(add(1, 3)); // 4

자바스크립트가 기본으로 제공하는 빌트인 함수인 Function 생성자 함수에 매개변수 목록과 함수 몸체를 문자열로 전달하면서 new 연산자와 함께 호출하면 함수 객체를 생성해 반환한다.

 

4) 화살표 함수(Arrow Function)

const add = (x, y) =>x + y;

console.log(add(1, 3)); // 4

ES6에서 새로 도입된 것들 중 하나인 화살표 함수는 function 키워드 없이 화살표를 이용해 함수를 선언한다. 화살표 함수는 항상 이름이 없는 익명 함수이다.

 

화살표 함수가 기존의 함수 선언문이나 함수 표현식을 완전히 대체하기 위해 디자인 된것은 아니다. 표현만 간략화되어 있는 것이 아닌 내부 동작 또한 간략화 되어있기 때문이다.