'국비지원'의 시작
자바스크립트(JS) 비긴즈 02 함수 선언 방법
개발할 결심
2023. 3. 10. 19:36
자바스크립트에서 함수를 선언하는 방법은 크게 두가지가 존재합니다. 바로 함수 표현식(Function Expression ) 과 함수 선언식(Function Declaration)입니다. 그렇다면, 밑에서 직접 각각의 방식으로 함수를 만들어서 살펴보도록 하겠습니다.
// 자바스크립트에서 함수를 선언하는 방법1 ==> 함수 표현식(Function Expression)
// 밑에서 정의한 두 함수 모두 num1 과 num2 를 더한 값을 리턴해주는 함수이다.
const func_sum = function(num1,num2){
if (typeof(num1) == "string" ){
// num1 이 문자열이라면, 더하기가 안되고, 문자열 결합이 되는 것을 방지하기 위한 것
num1 = Number(num1);
}
if (typeof(num2) == "string" ){ // 위와 동일 ..
num2 = Number(num2);
}
return num1+num2
} // end of const func_sum = function(num1,num2){ -----------------------------
// 자바스크립트에서 함수를 선언하는 방법2 ==> 함수 선언식(Function declaration)
function func_sum(num1,num2){
if (typeof(num1) == "string" ){
// num1 이 문자열이라면, 더하기가 안되고, 문자열 결합이 되는 것을 방지하기 위한 것
num1 = Number(num1);
}
if (typeof(num2) == "string" ){ // 위와 동일 ..
num2 = Number(num2);
}
return num1+num2
}// end of function func_sum(num1,num2){ ----------------------------------------------
위와 같이, 함수 선언식과 함수표현식을 사용하여 함수를 선언 할 수 있다. 그러나, 사람들은 점점 더 편한 것을 원하기 때문에, 이를 좀 더 간결하게 할 수 있는 방법이 탄생했는 데 그것이 바로 화살표 함수 이다. 화살표 함수란 ? ES6( ECMAScript 6 ) 에서 처음으로 소개된 것으로써 , 화살표( => ) 를 사용하여 함수를 선언하는 방식이다. 다른 말로는 람다 표현식( lambda expression ) 이라고 부른다. 이것은 function 과 return 을 생략하여 더욱 편하게 사용하기 위해서 개발한 것이다. ' 백문이 불여일견 ' 이라는 말이 있듯이, 바로 밑에서 하는 방법에 대해서 살펴보도록 하겠다.
// 해당 함수는 변수 두 개를 곱한 값을 리턴해주는 함수이다.
const func_multiply_1 = (num1,num2) => { // 화살표함수를 통해 함수를 선언한 것이다.
if (typeof(num1) == "string" ){
num1 = Number(num1);
}
if (typeof(num2) == "string" ){
num2 = Number(num2);
}
return `${num1*num2}` ;
// 앞뒤에 백틱 ` 을 쓰고 백틱 속에 ${}를 넣고 그 안쪽에 변수를 넣어준다.
};
const func_multiply_2 = (num1,num2) => { return `${num1*num2}` } ;
// 화살표함수를 통해서 간단하게 나타낸 것이다.
const func_multiply_3 = (num1,num2) => `${num1*num2}` ;
// 함수의 내용물이 return 값만 있을 경우에는
// { }와 return 을 생략할 수 있다.
// 변수 1개에 5를 곱하는 함수
const func_multiply_4 = num1 => `${num1*5}` ; // 매개변수의 개수가 1개만 있을 경우()를 생략할 수 있디.
// 숫자 200를 리턴해주는 함수이다.
const func_multiply_5 = () => {return 200}; ; // 매개변수가 없을 경우 반드시( ) 를 사용해야 하며, return이 있을 경우 반드시 { }를 사용해야한다.
// 이처럼, 함수에서 요구하는 값, 리턴해주는 값이 적어질수록, 화살표 함수는 많은 것을 생략해서
// 표현할 수 있다.