대망의 함수!
🟡 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. 변수나 자료 구조에 저장할 수 있다.
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를 반환
긴 글 읽어주셔서 감사합니다 :)
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~
'Front-End > JavaScript' 카테고리의 다른 글
[자바스립트(JavaScript )] 12. 함수의 다양한 형태 (즉시 실행 함수, 내부 함수, callback 등) (0) | 2022.02.21 |
---|---|
[자바스립트(JavaScript )] 11. 함수 프로퍼티 (Function Property) (0) | 2022.02.10 |
[자바스립트(JavaScript )] 09. 객체 (Object) (0) | 2022.02.03 |
[JavaScript] 08. 타입 변환 (0) | 2022.01.27 |
[JavaScript] 07. 반복문 (0) | 2022.01.26 |