[JavaScript] 함수가 필요한 이유와 함수 사용 방법

Lily·2022년 3월 4일
0

preWecode

목록 보기
7/9
post-thumbnail

함수(function)란 무엇인가?

  • 함수(function)란 특정 기능을 수행하도록 설계된 독립적인 코드 블록을 의미한다. 필요할 때마다 호출하여 해당작업을 반복해서 사용할 수 있다.
    Input 받기 ▶️ 특정 기능 수행 ▶️ output 반환

JavaScript 함수의 특징

  • 함수는 Function 객체이다.
  • 함수도 하나의 데이터타입이다. 따라서 함수를 변수에 대입하거나 프로퍼티 지정하는 것이 가능하다.
  • 기본적으로 함수는 undefined를 반환한다. 다른 값을 반환하기 위해서는, 함수는 반환값을 지정하는 return 문이 있어야 한다.
  • 다른 함수 내에 중첩되어 정의될 수 있다.


함수가 필요한 이유

  • 재사용성 : 같은 작업을 여러 곳에서 반복해야 할 때 함수로 만들어 필요할 때마다 호출하여 사용하면 편리하다.
  • 가독성 : 함수의 이름만 보고도 어떤 기능을 수행하는지 유추할 수 있다.
  • 모듈화 : 유지보수나 버그 발생 시 편리하다.
console.log('Hello, Lily!');
console.log('Hello, Jason!');
console.log('Hello, Anna!');
function sayHello(name) {
	console.log('Hello, ' + name + '!')
};

sayHello('Lily'); // "Hello Lily!"  
sayHello('Jason'); //"Hello Jason!" 
sayHello('Anna'); //"Hello Anna!"

sayHello라는 함수를 하나 만들어두면 필요할 때마다 호출하여 여러 명에게 인사 할 수 있다.



함수 사용방법

  • 함수 정의하기 ▶️ 함수 호출하기
  • 함수 정의를 위해서는 Keyword, name, paramenter, body가 필요하다.
// Keyword    -> function
// Name       -> hello
// Paramenter -> ()
// Body       -> {}

function hello() {
	//함수 호출 시 실행되는 코드
}

함수 정의(선언) 방법

// 함수 선언식
function addNumbers(num1, num2) {
  return num1 + num2;
}

// 함수 표현식(리터럴)
const addNumbers = function(num1, num2) {
  return num1 + num2;
}

// 함수 표현식 - 화살표 함수
const addNumbers = (num1, num2) => {
  return num1 + num2;
}

// 함수 표현식 - 화살표 함수 (생략형)
const addResult = (num1, num2) => num1 + num2;

함수 호출 방법

// 기본
addNumbers(2, 3);

// 함수 표현식 호출
const addNumbers = function(2, 3);

// 생성자 호출
const addNumbers = new function(2, 3);

// 즉시 실행 함수 : 정의와 동시에 호출
(function addNumbers(num1, num2){
  num1 + num2;
})()

함수 정의와 호출 한눈에 보기

// 함수 정의
function addNumbers(num1, num2) {
  	return num1 + num2
}

// 함수 호출
addNumbers(2,3); // 5

//정의할 때 ()안에 있는 num1, num2를 매개변수(parameter = 인자 = 변수),
//호출할 때 ()안에 있는 2,3을 전달인자(argument = 인수 = 값)라고 한다.

출처:
http://www.tcpschool.com/javascript/js_function_basic

https://hanamon.kr/javascript-%ED%95%A8%EC%88%98-%EA%B8%B0%EC%B4%88/

https://3d-yeju.tistory.com/11
https://myhappyman.tistory.com/19

0개의 댓글