자바스크립트에서의 함수
1. 함수란?
함수란 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록으로 이름과 매개변수를 갖으며 필요할 때 호출하며 코드블록에 담긴 문을 일괄적으로 실행 할 수 있어 재사용측면에서 매우 유용합니다.
2. 자바스크립트에서의 함수
자바스크립트에서의 함수는 일급객체로 값처럼 취급이 되어 다른 값들처럼 사용을 할 수 있습니다. 변수나 객체, 배열 등에 저장을 할 수 있고 다른 함수에 전달되어 인수도로 사용될 수 있으며 함수의 반환값이 될 수도 있습니다.
일급객체로서의 자바스크립트 함수 특징
1. 무명의 리터럴로 표현이 가능
2. 변수나 자료(객체, 배열 등)에 저장 가능
3. 함수의 파라미터로 전달 가능
4. 반환값을 사용할 수 있음
또한 자바스크립트의 함수는 일반적으로 반환문을 생략할 수 있지만 생략을 하더라도 내부적으로는 undefined을 리턴하고 있습니다.
3. 함수정의
자바스크립트에서 함수는 일반함수, 화살표함수, 생성자함수, 메소드 등 다양하게 있으며, 함수를 정의하는 방법에는 함수 선언문, 함수 표현식, 생성자함수가 있습니다.
//1. 함수선언문
function fnc(){}
//2. 메서드 : 일종의 객체의 프로퍼티의 value가 함수인 경우
const obj = {
prop: function(){}
}
//3. 생성자함수: 특정 인스턴스를 만들어낼 수 있는 함수
function MyObj(){}
//4. 화살표함수 : ES6부터 추가된 함수
const arrFnc = ()=>{}1. 함수 선언문
함수 선언문은 function 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미합니다. 따라서 반드시 함수명이 정의되어야 합니다.
하지만 함수선언문의 경우 코드가 길어지며 같은 이름을 중복해서 작성하며 함수 호출시 예측하지 못한 결과값을 가지고 올 수 있는 중복선언과 호이스팅의 문제점을 가지고 있습니다.
function func(parma1, parma2) {
return param1 + param2
}
function func() {
return 'param1 + param2';
}
func() //같은 이름의 함수가 있는 경우 마지막에 작성된 함수가 호출됩니다.2. 함수 표현식
함수 표현식은 함수의 일급객체 특성을 이용하여 함수 리터럴 방식으로 함수를 정의하고 변수에 할당한 방식입니다. 변수에 관리를 하기 때문에 함수명이 있어도(기명함수) 되고 없어도(익명함수) 됩니다. 하지만 함수명을 생략하는 것이 일반적입니다.
정의한 function을 별도의 변수에 할당하기 때문에 함수선언문에서 발생하는 중복선언과 호이스팅의 문제를 예방할 수 있습니다.
// 익명 함수 표현식
const func1 = function(){
return 'func';
}
//기명 함수 표현식
const func2 = function func() {
return 'func';
}
func()
- 변수는 함수명이 아니라 할당된 함수를 가르키는 참조값을 저장하게 됩니다. 따라서 함수 호출 시 함수명이 아니라 함수를 가르키는 변수명을 사용해야합니다.
- 변수를 사용해 함수를 호출하지 않고 기명함수의 함수명을 사용해 호출하게 되면 에러가 발생합니다.
3. Function 생성자함수
Function 생성자 함수는 Function.prototype.constructor 프로퍼티로 접근할 수 있습니다. 하지만 Function 생성자 함수로 함수를 생성하는 방식은 일반적으로 사용하지 않습니다.
new Function(arg1, arg2, ... argN, functionBody)
var square = new Function('number', 'return number * number');
console.log(square(10)); // 1004. 화살표함수
ES6에 추가된 화살표함수는 비교적 가볍과 간단하게 사용할 수 있다는 장점을 가지고 있습니다. 하지만 동작방식에 있어서 일반 함수와는 큰 차이점이(argument, this등)
있기 때문에 이를 염두해두고 사용해야합니다.
ArrowFunction
() => {}
가장큰 차이는 축약형으로 줄일 수 있다는 점이다.
단, 만약 return 키워드 앞에 특정 로직이 들어 있다면 축약이 어렵다
ex)
const doubleArrow = (x) => {
console.log(123)
return x*2
}
축약은 실행문을 제외하고 {}와 return을 생략해줄 수 있다.
const dobuleArrow = (x) => x*2
또한 매개변수가 1개인 경우에는 ()도 생략을 해줄 수 있다.
const dobuleArrow = x => x*2
단, 실행문 부분을 {}로 감싸게 되면 실행문이 반환될 수 없다.
//const doubluArrow = x => { x*2 } // 잘못된 부분
반환을 하기 위해서는 return 키워드를 반드시 써야한다.참고자료
