[Javascript] 함수

2022. 2. 8. 23:25

#1. 함수

1. 함수(function)란?

하나의 키워드에 프로그램 로직을 함축한 형태이다.
호출에 의해 여러 번 실행할 수 있는 코드 블럭이다.
반복되는 코드 감소, 코드의 개발 및 수정이 용이하다.
일반적인 수학의 함수는 하나의 수식을 대변하는 특정 키워드를 의미한다.

2. 함수 정의와 호출

1) 함수 정의

함수를 정의할 땐 앞에 function 키워드를 선언하고, 함수이름()을 지정한다.
구문을 그룹화하기 위해 블록 { } 을 붙인다.
함수 이름을 붙일 땐 변수와 동일한 규칙을 갖는다. (영어, 숫자, 언더바, 카멜 표기법 등)

// 함수 선언
function 함수이름() {
	실행할 코드
};

2) 함수 호출

함수는 정의하는 것으로 끝나지 않고, 호출을 해줘야 동작한다.
호출하는 방법은 함수 블록{ } 이 끝난 다음에 함수이름을 선언하면 된다.

function 함수이름() {
	실행할 코드
};
함수이름(); // 함수 호출

3. 파라미터(매개변수)

1) 파라미터 정의와 호출

필요에 따라 함수가 실행되는데 필요한 조건값을 파라미터라고 한다.
함수의 정의 부분에 나열되어 있는 변수로 볼 수 있다. (함수 안의 코드에서 변수처럼 활용 가능)
함수이름 뒤에 괄호( ) 안에 명시한다.

function 함수이름(파라미터) { // 함수이름 뒤 괄호에 파라미터
	파라미터를 활용해 실행할 코드
};

파라미터가 정의된 함수를 호출할 경우 함수이름의 괄호( ) 안에 조건에 맞는 값을 전달해야 한다.

함수이름(값);

2) 다중 파라미터

필요한 조건 값이 여러개인 경우 콤마( , )로 구분한다.
파라미터가 여러개인 경우 함수를 호출할 때 정의되어 있는 순서대로 값을 전달해야 한다.

function 함수이름(파라미터1, 파라미터2, 파라미터3) {
	파라미터를 활용해 실행할 코드
};
함수이름(값1, 값2, 값3);

-------------------------

function example(x, y, z) {
	let sum = x + y + z;
    	console.log(sum)
};
example(1,6,3); // 10

3) 파라미터 생략

파라미터가 있는 함수라도 호출시 필요 없는 값은 마지막 파라미터부터 순차적으로 생략이 가능하다.
값이 전달되지 않은 파라미터는 undefined로 식별된다.

function example(x, y) {
	console.log(`x = ${x}, y = ${y}`);
};
example(400,500);  // x = 400, y = 500
example(9999);  // x = 9999, y = undefined
example();  // x = undefined, y = undefined

4) 파라미터 기본값

함수 호출시 값이 전달되지 않는 경우를 대비하여 파라미터에 기본값을 정의할 수 있다.

function example(x=1, y=2) {
	console.log(`x = ${x}, y = ${y}`);
};
example(400,500);  // x = 400, y = 500
example(9999);  // x = 9999, y = 2
example();  // x = 1, y = 2

4. 리턴(return)

함수가 자신이 만들어낸 결과값을 자신을 호출한 위치로 되돌려 주는 것.(함수의 출력으로 내보낼 값)
함수를 구성하는 블록{ } 안에서 return 키워드를 사용하여 값을 전달한다.

function 함수이름(파라미터1, 파라미터2) {
	파라미터를 활용해 실행할 코드
    return 반환할값;
};

return 값을 갖는 함수는 결과를 다른 변수에 대입할 수 있다.

function example(x, y) {
	const z = x * y;
    	return z;
};

const a = example(9, 2);
console.log(a);  // 18

const b = example(9, 2) * 10;
console.log(b);  // 180

return 값을 조건식으로도 활용할 수 있다. (if문, for문 .. )
함수가 실행되는 도중 return 키워드를 만나면 즉시 종료된다.

function example(x, y) {
	if(x < 10) {
    	return '땡!';
    	}
    	if(y < 10) {
    		return 999999;
   		}
    	return x + y;
};

console.log(example(1, 100);  // 땡!
// x값 1은 10보다 작기 때문에 true, 첫번째 return문 실행

console.log(example(100, 1);  // 999999
// x값 100은 10보다 크기 때문에 첫번째 조건문 false, 두번째 조건문은 true -> 두번째 return문 실행

console.log(example(100, 20);  // 120
// 위 두 조건문이 모두 false, 마지막 return문 실행

5. 익명 함수

1) 함수를 변수에 대입

자바스크립트는 함수 자체가 객체 형태이기 때문에 다른 변수에 참조시켜 사용할 수 있다.

function 함수이름(매개변수) {
	실행할 코드
};
함수이름(값);

const 변수이름 = 함수이름;
변수이름(값);

-------------------

function example(sample) {
	console.log(sample);
};
example("일반적인 함수 사용");  // 일반적인 함수 사용

// 함수는 다른 변수에 대입 가능하다.
const variable = example;
// 함수가 대입된 변수는 그 자체가 함수의 역할을 한다.
variable("변수에 대입한 함수");  // 변수에 대입한 함수

2) 익명함수

다른 변수에 참조시킬 목적으로 함수를 정의할 때 부터 이름 없이 정의하는 형태
원칙상으로는 정의 형태가 대입문이므로 괄호 { } 뒤에 세미콜론 ' ; '을 붙여줘야한다. (안붙여도 자바스크립트는 에러 안난다)

const 변수이름 = function(매개변수) {
	console.log(매개변수);
};
변수이름(값);

--------------------

// 처음부터 변수에 대입, 함수명은 생략해도 된다.
const variable = function(sample) {
  console.log(sample);
};

// 변수명으로 함수 호출
variable("익명함수");  // 익명함수

6. 화살표 함수 (arrow function)

ES6 버전 부터 새롭게 추가된 구문 형식으로 기존의 익명 함수 문법을 간단하게 축약하여 사용할 수 있다.

1) 화살표함수 정의

익명함수에서 function 키워드를 " => " 형태로 바꾸어 매개변수 괄호 ( ) 와 블록 { } 사이에 배치하면 된다.

// 익명함수 형태로 정의
const 변수이름 = function(매개변수1, 매개변수2) {
	실행할 코드
};
변수이름(값1, 값2);

             ↓

// 화살표함수 형태로 정의
const 변수이름 = (매개변수1, 매개변수2) => {
	실행할 코드
};
변수이름(값1, 값2);

2) 매개변수(파라미터)가 하나만 존재할 경우

매개변수를 감싸는 괄호 ( ) 를 생략할 수 있다.
하지만, 매개변수가 없거나 두 개 이상인 경우 생략할 수 없다.

const 변수이름 = 매개변수 => {
	실행할 코드
};
변수이름(값);

--------------------

const example = x => {
	console.log(x);
};
example("Hi");  // Hi

3) 실행할 코드가 한줄만 있을 경우

블록 { } 안에 실행할 코드가 한줄인 경우, 블록 { } 을 생략할 수 있다.
블록 안에 실행할 코드가 return 문 일 경우, return도 생략할 수 있다.

// 일반적인 익명함수 선언
const example = function(x) {
	return x + x;
};

console.log(example(2));  // 4

	     ↓

// 생략가능한 부분 생략 후 선언
const example = x => x + x;

console.log(example(2));  // 4

7. 콜백함수 (callback function)

매개변수로 전달되기 위해 사용되는 함수
어떤 함수가 동작하는 과정에서 일부에 대한 처리가 상황에 따라 다르게 구성되어야 할 경우, 그 부분을 함수 형태로 묶어 매개변수로 받아 처리할 수 있다.

콜백함수에 대해 이해하지 못하고 있었는데, 강사님이 " 여러사람이 나눠서 코드를 짜는데 나타내고자 하는 값(목적)은 확실하지만 과정을 모르겠다 할 때 콜백함수 쓴다고 생각하면 이해할 수 있다" 라고 하셨다.

// A -> 파라미터를 받아서 연산 결과를 출력하는 함수를 제작해서 B에게 전달

function sample(x, y, cb) {

const result = cb(x, y);

console.log("결과값은: " + result);

}

// B -> A로 부터 전달 받은 함수를 사용하여 파라미터를 전달하고 그에 따른 결과 (+)가 출력되도록 구현

sample(10, 20, function(x, y) {

return (x * x) + y + 1;

})

// C -> A로 부터 전달 받은 함수를 사용하여 파라미터를 전달하고 그에 따른 결과 (-)가 출력되도록 구현

sample(50, 20, (x, y) => {

return (x * 2) + (y * 2);

})

// D -> A로 부터 전달 받은 함수를 사용하여 파라미터를 전달하고 그에 따른 결과 (*)가 출력되도록 구현

sample(4, 2, (x, y) => (x + y) * x);

// E -> A로 부터 전달 받은 함수를 사용하여 파라미터를 전달하고 그에 따른 결과 (/)가 출력되도록 구현

sample(10, 2, (x, y) => x / y);

↑↑

// 콜백함수를 파라미터로 요구하는 함수 정의
function example(x, y, call) {

	// x와 y의 연산 결과를 파라미터로 전달받은 콜백함수에 다시 전달하여 리턴값을 받아 처리한다
	const result = call(x, y);
   	console.log(`${x}과 ${y}의 연산결과는 ${result}`);
};


[ 콜백함수 유형1 - 직접 함수를 정의 ]
function plus(a, b) {
	return a + b;
};

function minus(a, b) {
	return a - b;
};

// 호출
example(100, 50, plus);  // 100과 50의 연산결과는 150
example(100, 50, minus);  // 100과 50의 연산결과는 50


[ 콜백함수 유형2 - 콜백함수를 익명함수 형태로 전달]
example(200, 100, function(a, b) {
	return a * b;
};  				// 200과 100의 연산결과는 20000

example(200, 100, function(a, b) {
	return a / b;
};  				// 200과 100의 연산결과는 2


[ 콜백함수 유형3 - 익명함수를 화살표 함수로 사용 ]
example(3, 7, (a, b) => {
  if(a == 3) {
    if(b == 7) {
      console.log("true!!!");
    } else {
      console.log("NO");
    }
  } else {
      console.log("X");
  }                //  true!!!
});                //  3과 7의 연산결과는 undefined


[ 콜백함수 유형4 - 축약된 형태 ]
example(6, 4, (a, b) => console.log(a + b));  // 10
                                              // 6과 4의 연산결과는 undefined

8. 재귀 함수

1) 재귀 함수

함수가 실행하는 코드 내부에서 자기 자신을 호출하는 형태
재귀호출은 마지막에 종료 조건을 명시하지 않는다면 무한루프에 빠지게 된다. 따라서 재귀호출을 구현할 때 가장 먼저 처리해야할 것은 종료조건을 명시하는 것이다.
트리탐색 알고리즘할 때 많이 사용된다.
재귀함수로 구현할 수 있는건 반복문으로도 가능하다.

function 함수이름(파라미터1, 파라미터2) {
  if(종료조건) {
  	return (값);
  } else {
  	실행할 코드
    
    // 자신을 호출
    함수이름(파라미터1, 파라미터2);
  }
};
함수이름(값1, 값2);

2) 팩토리얼

어떤 범위에 있는 모든 정수를 곱하는 것을 의미한다.
정수는 양의 정수를 사용하며 팩토리얼을 표시하는 기호는 느낌표( ! ) 를 사용한다.

예를들어 5에 대한 팩토리얼은 5! = 5 * 4 * 3 * 2 * 1 를 나타낸다. 즉, 5! = 120 이다.
1! = 1
2! = 2
3! = 6
4! = 24
5! = 120
6! = 720
7! = 5040
8! = 40320
9! = 362880
10! = 3628800

재귀함수로 팩토리얼 구하기

function f(x) {
  if(x <= 1) {
  	return 1;
  } else {
  	return x * f(x-1);
  };
};

// 호출과 출력
console.log(f(5));  // 120
console.log(f(10));  // 3628800
console.log(f(20));  // 2432902008176640000

일반 함수로 팩토리얼 구하기

function f(x) {
  let example = 1;
  for(let i = 0; i <= x; i++) {
  	example = example * i;
  }
  
  return example;
};

// 호출과 출력
console.log(f(5));  // 120
console.log(f(10));  // 3628800
console.log(f(20));  // 2432902008176640000

저작자표시 비영리 변경금지

'국비수업 > JavaScript' 카테고리의 다른 글

[Javascript] 프로토타입 (0)	2022.02.10
[Javascript] [연습문제] 함수 실습 (0)	2022.02.09
[Javascript] [연습문제] JSON 객체 실습 (0)	2022.02.07
[Javascript] JSON (0)	2022.02.04
[Javascript] [연습문제] 배열 실습 (0)	2022.02.03

{ chanCo }