[Javascript] 7. 함수, 인수 표기법
1. 함수
- 함수란 주어진
입력(파라미터)
에 근거하여 특정 처리를 진행한 뒤 결과
를 돌려주는 구조를 말한다.
- 사용자 정의 함수를 정의하는 방법은 크게 네 가지가 있다.
- function 명령으로 정의하기
- Function 생성자 경유로 정의하기
- 함수 리터럴 표현으로 정의하기
- 애로우 함수로 정의하기
1.1 function 명령
- 함수를 정의할 때 가장 기본적인 접근 방법이다.
function 함수명(인수, ...) {
...함수 안에서 실행되는 처리...
return 반환값;
}
- 함수명은 앞서 언급한 이름 선두를
소문자
, 단어의 구분을 대문자
로 나타내는 camelCase 형식
을 기본적으로 사용한다.
1.2 Function 생성자
- Javascript에서는 내장형 객체로서
Function
객체의 생성자를 사용하여 정의할 수 있다.
var 변수명 = new Function(인수,... , 함수의 본체);
var getTriangle = new Function('base', 'height', return base * height / 2;');
console.log('삼각형의 면적:' + getTriangle(5, 2)); // 👉 결과: 삼각형의 면적:5
String
, Number
, Boolean
등의 객체와 동일하기 new 연산자를 생략하여 글로벌 함수인 것처럼 정의할 수 있다.
- 또한, 아래와 같이 가인수 부분을 한 개의 인수로 정의할 수 있다.
var getTriangle = new Function('base, height', return base * height / 2;');
1.3 함수 리터럴 표현
- 함수 리터럴은 변수에 대입한다든지, 어떤 함수의
인수
로 건네준다거나, 반환값
으로서 함수를 전달하는 것이 가능하다.
var getTriangle = function(base, height) {
return base * height / 2;
};
console.log('삼각형의 면적:' + getTriangle(5 ,2)); // 👉 결과: 삼각형의 면적:5
- 이와같이 함수 리터럴은 선언한 시점에서는 정확한 이름을 가지지 않기 때문에
익명 함수
또는 무명 함수
라고 불린다.
1.4 애로우 함수
- ES2015에서 새롭게 추가된 방법으로, 애로우 함수(Arrow Function)를 사용함으로써
함수 리터럴
을 보다 간단하게 정의할 수 있다.
(인수, ...) => { ... 함수의 본체 ... }
let getTriangle = (base, height) => {
return base * height / 2;
};
console.log('삼각형의 면적:' + getTriangle(5 ,2)); // 👉 결과: 삼각형의 면적:5
- 애로우 함수에서는 function 키워드를 사용하지 않고
유래인 => (화살표)
로 인수와 함수 본체를 연결한다.
- 또한,
문장
의 반환값
이 그대로 반환값
으로 간주될 때는 아래와 같이 return
명령도 생략이 가능하다.
let getTriangle = (base, height) => base * height / 2;
1.5 ES2015 인수 표기법
- ES2015에서는 새로운 구문에 의해
arguments
객체가 거의 불필요하다.
1.5.1 인수의 디폴트값
- ES2015에서 인수의 디폴트값을 선언하려면,
'가인수 = 디폴트값'
의 형식으로 가인수
를 선언할 수 있다.
function getTriangle(base = 1, height = 1) {
return base * height / 2;
}
console.log(getTriangle(10, 5)); // 👉 결과: 25
- 하지만, 다른 인수를 디폴트값으로 할 경우 참조할 수 있는 것은 자기 자신보다 앞에서
정의
된 것뿐이다.
function getTriangle(base = height, height = 1) {
return base * height / 2;
}
console.log(getTriangle()); // 👉 결과: ReferenceError: height is not defined
1.5.2 가변길이 인수의 함수 정의
- ES2015에서는
가인수
의 앞에 ...(점 3개)
를 사용하면 가변길이 인수가 된다.
즉, 전달된 임의의 개수의 인수를 배열로 모으는 기능
function sum(...nums) {
let result = 0;
for (let num of nums) {
if (typeof num !== 'number') {
throw new Error('숫자가 아닙니다:' + num);
}
result += num;
}
return result;
}
try {
console.log(sum(1, 3, 5, 7, 9));
} catch(e) {
window.alert(e.message);
}
1.5.3 '...' 연산자
- '...'연산자는 실인수를 이용하여 배열을 각각의 값으로 전개할 수 있지만, 배열을 건네면 오류가 발생한다.
console.log(Math.max(15, -3, 78, 1)); // 👉 결과: 78
console.log(Math.max([15, -3, 78, 1])); // 👉 결과: NaN
- 위의 경우 ES2015 이전에는
apply 메소드
를 이용할 수 있지만, ...
연산자를 이용하여 해결할 수 있다.
console.log(Math.max(...[15, -3, 78, 1)); // 👉 결과: 78
end
Author And Source
이 문제에 관하여([Javascript] 7. 함수, 인수 표기법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@daekyeong/Javascript-7.-함수
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
입력(파라미터)
에 근거하여 특정 처리를 진행한 뒤 결과
를 돌려주는 구조를 말한다.- function 명령으로 정의하기
- Function 생성자 경유로 정의하기
- 함수 리터럴 표현으로 정의하기
- 애로우 함수로 정의하기
function 함수명(인수, ...) {
...함수 안에서 실행되는 처리...
return 반환값;
}
소문자
, 단어의 구분을 대문자
로 나타내는 camelCase 형식
을 기본적으로 사용한다.Function
객체의 생성자를 사용하여 정의할 수 있다.var 변수명 = new Function(인수,... , 함수의 본체);
var getTriangle = new Function('base', 'height', return base * height / 2;');
console.log('삼각형의 면적:' + getTriangle(5, 2)); // 👉 결과: 삼각형의 면적:5
String
, Number
, Boolean
등의 객체와 동일하기 new 연산자를 생략하여 글로벌 함수인 것처럼 정의할 수 있다.var getTriangle = new Function('base, height', return base * height / 2;');
인수
로 건네준다거나, 반환값
으로서 함수를 전달하는 것이 가능하다.var getTriangle = function(base, height) {
return base * height / 2;
};
console.log('삼각형의 면적:' + getTriangle(5 ,2)); // 👉 결과: 삼각형의 면적:5
익명 함수
또는 무명 함수
라고 불린다.함수 리터럴
을 보다 간단하게 정의할 수 있다.(인수, ...) => { ... 함수의 본체 ... }
let getTriangle = (base, height) => {
return base * height / 2;
};
console.log('삼각형의 면적:' + getTriangle(5 ,2)); // 👉 결과: 삼각형의 면적:5
유래인 => (화살표)
로 인수와 함수 본체를 연결한다.문장
의 반환값
이 그대로 반환값
으로 간주될 때는 아래와 같이 return
명령도 생략이 가능하다.let getTriangle = (base, height) => base * height / 2;
arguments
객체가 거의 불필요하다.'가인수 = 디폴트값'
의 형식으로 가인수
를 선언할 수 있다.function getTriangle(base = 1, height = 1) {
return base * height / 2;
}
console.log(getTriangle(10, 5)); // 👉 결과: 25
정의
된 것뿐이다.function getTriangle(base = height, height = 1) {
return base * height / 2;
}
console.log(getTriangle()); // 👉 결과: ReferenceError: height is not defined
가인수
의 앞에 ...(점 3개)
를 사용하면 가변길이 인수가 된다.즉, 전달된 임의의 개수의 인수를 배열로 모으는 기능
function sum(...nums) {
let result = 0;
for (let num of nums) {
if (typeof num !== 'number') {
throw new Error('숫자가 아닙니다:' + num);
}
result += num;
}
return result;
}
try {
console.log(sum(1, 3, 5, 7, 9));
} catch(e) {
window.alert(e.message);
}
console.log(Math.max(15, -3, 78, 1)); // 👉 결과: 78
console.log(Math.max([15, -3, 78, 1])); // 👉 결과: NaN
apply 메소드
를 이용할 수 있지만, ...
연산자를 이용하여 해결할 수 있다.console.log(Math.max(...[15, -3, 78, 1)); // 👉 결과: 78
Author And Source
이 문제에 관하여([Javascript] 7. 함수, 인수 표기법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@daekyeong/Javascript-7.-함수저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)