Front-End/JavaScript

[자바스립트(JavaScript )] 10. 함수 (Function)

Bigone17 2022. 2. 4. 11:20

대망의 함수!

 

🟡 1. 함수란?

 - 함수란 어떤 작업을 수행하기 위해 필요한 코드(문)들의 묶어놓은 코드 블록을 의미합니다. 함수는 매개변수와 이름을 갖으며 필요할 때 이름으로 함수를 호출하여 코드를 실행시킵니다.

// 함수의 정의(선언)
function sum(a, b) {
	return a + b;
}

// 함수의 호출
sum(1, 2) // 3

 

함수 구성

명칭 설명
이름(함수명) 함수명은 변수명이라고 생각하면 이해하기 쉽다. 함수를 호출하기 위해서 함수명이 필요하다.
매개변수 0개 이상의 목록으로 콤마(,)로 나누어 여러개의 변수들을 넣을 수 있다.
함수 몸채 함수가 호출되었을때 실행되는 코드들의 집합을 의미한다. return 문을 통해서 결과값(반환값)을 반환 할 수도 있고, return 문 없이 어떠한 기능만 실행 할 수도 있다.

 

 

 

🟡 2. 함수 정의

- 함수를 정의하는 방법은 3가지가 있습니다.

  • 함수 선언식
  • 함수 표현식
  • Fuction 생성자 함수

 

🟣 2.1 함수 선언식

   - 함수 선언문에서는 함수명을 생략하면 안 됩니다.

// 함수 선언문
function minus(a, b) {
	return a - b;
}

 

 

🟣 2.2 함수 표현식

 - 함수 표현식은 변수에 함수를 할당하는 방식을 말합니다. 이때는 함수명이 생략이 되는데 이것을 익명 함수(anonymous function)이라고 합니다. 

 - 변수에 함수를 할당할 수 있는 이유는 자바스크립트에서 함수는 일급 객체이기 때문입니다. 일급 객체는 하단에서 설명하도록 하겠습니다.

// 함수 표현식
let multiply = function(a, b) {
	return a * b;
}

console.log(multiply(2, 5)); // 10


// 함수 표현식에서 함수의 이름을 지정해준 경우
let min = function minus(a, b) {
	return a - b;
}

console.log(min(4,1)); // 3
console.log(minus(4,1)); // Uncaught ReferenceError: minus is not defined - 에러발생

- 함수 표현식에서는 변수에 함수를 할당할 때 함수명이 할당되는 것이 아니라 함수 코드가 할당되는 것이므로, 함수명으로 호출을 하게 되면 에러가 발생하게 됩니다.

 

let apple = function(){
	console.log('나는 과일입니다.');
}

let melon = apple;

apple(); // '나는 과일입니다.'
melon(); // '나는 과일입니다.'



apple = function(){
	console.log('나는 과일일까요?');
}

apple(); // '나는 과일일까요?'
melon(); // '나는 과일입니다.'

- 위 예시에서 apple에 함수(함수 주소 값)를 할당 후 melon에 apple에 담겨 있는 함수의 주소 값을 할당합니다. 이때에는 apple과 melon은 같은 함수를 바라보고 있습니다. 
- apple에 새로운 함수를 할당해줍니다. 이때 melon과 apple이 바라보는 함수의 주소 값은 달라집니다.
- 즉, 같이 바라보고 있던 함수를 수정하는 것이 아니고 새로운 함수를 할당해주는 것입니다.

 

 

🟣 2.3 Function 생성자 함수

- 함수 선언문, 함수 표현식 모두 Function 생성자 함수를 단순화시킨 축약법입니다.

// Function 생성자 함수
new Function(매개변수1, 매개변수2, ..., 코드블럭)


let sum = new Function(a, b, 'return a + b');
console.log(sum(1,3)); // 4

 - Function 생성자 함수는 일반적으로는 사용하지 않습니다.

 

 

 

🟡 3. 일급 객체 (First-class Object)

- 일급 객체란 생성, 대입, 연산, 인자 또는 반환 값으로서의 전달 등 프로그래밍 언어의 기본적 조작을 제한 없이 사용할 수 있는 대상을 의미합니다. (무슨 말이야?_?)

- 아래 4가지 조건에 만족하면 일급 객체로 간주합니다. (함수 기준으로 설명)

  1.  무명의 리터럴로 표현이 가능하다. -> 함수명 없이 선언이 가능한가?
  2.  변수나 자료 구조(객체, 배열)에 저장할 수 있다. -> 변수, 객체, 배열에 할당이 가능한가?
  3. 함수의 매개변수에 전달할 수 있다. -> 함수를 다른 함수의 매개변수로 사용할 수 있는가?
  4. 반환 값으로 사용할 수 있다. -> 함수를 다른 함수의 반환 값으로 사용할 수 있는가?
// 1. 무명의 리터럴로 표현이 가능하다. && 2. 변수나 자료 구조에 저장할 수 있다.
let sayHello = function () {
	console.log('안녕!');
};

// 객체에도 저장 가능
let person = {
	name : 'bigone',
    hi : sayHello
}

person.hi(); //'안녕!'


// 3. 함수의 매개변수에 전달할 수 있다.
function introduce(func){
	func();
    console.log('나는 bigone이야');
};

introduce(sayHello); // '안녕!' '나는 bigone이야'



// 4.반환값으로 사용할 수 있다.
function makeCoffee(coffee){
	return function(){
    	console.log(coffee+'가 나왔습니다~')
    }
}

let order = makeCoffee('아메리카노');

order(); // '아메리카노가 나왔습니다~'

 

 

 

🟡 4. 매개변수 (Parameter, 인자)

- 함수의 작업을 실행할 때 추가적인 정보가 필요할 때 매개변수를 지정합니다. 매개변수는 함수 내에서 변수와 동일하게 동작합니다.

function strange_sum(a, b) {
    a = a + 1;
    b = b + 2;
    console.log(a + b);
}

strange_sum(1,2); // 6

 

- 매개변수에 인수가 전달이 되지 않았으면 매개변수는 undefined로 초기화됩니다.

매개변수 & 인수

function logs(log1, log2) {
	console.log(log1, log2);
}

logs('인수1입니다.'); // '인수1입니다.' undefined

 

 

 

🟡 5. 반환 값(return value)

- 함수는 호출되어 실행된 후 결과를 반환할 수 있습니다. 이때 반환되는 값을 반환 값이라고 합니다.

// return 키워드를 통해서 반환값 반환
function sum(a, b){
	return a + b;
}

sum(1,2) // 3 (반환값)


// 함수는 배열 등을 이용하여 한 번에 여러 개의 값을 리턴 가능
function ret1(){
	let arr = ['a', 'b', 'c', 'd', 'e'];
    let obj = {
    	aa : 1,
        bb : 2,
        cc : 3
    }
    
    return [arr, obj];
}

ret1(); // [['a', 'b', 'c', 'd', 'e'], {aa: 1, bb: 2, cc: 3}]



// 함수는 반환을 생략할 수 있다. 이때 암묵적으로 undefined를 반환
function ret2(){
	console.log('undefined 반환하기');
}

let un = ret2(); // undefined 반환하기
console.log(un); // undefined



// return 이후에 코드는 실행되지 않는다.
function ret3(){
	console.log('return 전입니다.');
    return 1;
    console.log('return 후입니다.');
}

ret3(); // return 전입니다.

 

 

함수의 기본적인 구조와 개념에 대해서만 설명을 진행했습니다.
함수 객체의 프로퍼티, callback 함수, 즉시 실행, 재귀 함수 등
더욱 자세한 내용은 다음 편이나 중급자 설명에서
자세하게 다루도록 하겠습니다 :)

 

 

📝 정리 

  • 함수는 어떠한 기능을 하기 위한 코드들의 묶음
  • 함수는 함수명, 매개변수, 코드 블록으로 구성되어 있다.
  • 함수를 생성하는 방법에는 함수 선언문, 함수 표현식, Function 생성자 함수가 있다.
  • 함수 선언문에서는 함수명이 무조건 필요하고, 함수 표현식이나 Function 생성자에서는 익명 함수로 생성
  • 함수는 일급 객체이다.
  • 매개변수는 함수 내에서 변수로 사용 가능하고, 매개 변수에 인자가 할당되지 않으면 undefined로 초기화됨
  • 반환 값으로는 자바스크립트에서 쓸 수 있는 모든 값을 사용할 수 있다. 반환 값이 없을 경우 undefined를 반환

 

 

 

긴 글 읽어주셔서 감사합니다 :) 
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~

728x90
반응형