[JavaScript] #3. 함수

JavaScript의 함수에서 헷갈리는 것들을 작성해보았다.

 

 

* 함수

 

함수의 작성 형식은 function 함수명 ( 매개변수 ) { 내용 } 이다. 

const ms = 'Hello';
function print(message){
   console.log(message)
}
print(ms);  // Hello 출력

 

JavaScript 함수의 특징으로는 C언어와 다르게 함수를 뒤에서 선언 및 정의해도 위에서 함수 사용이 가능하다.

 

 

또한 함수를 정의와 동시에 호출할 수 있다.

이 경우에는 ( function 함수명 ( 매개변수 ) { 내용 } ) ( ) 와 같은 형식으로 괄호를 작성하면 된다.

 

 

그리고 JavaScript는 type을 고려하지 않기 때문에 매개변수 타입과 반환 타입을 지정해주지 않는다.

이로 인해 실수를 범할 가능성이 높아서 문제가 발생하는 경우가 허다하다.

이를 해결한 것이 TypeScript로 이 언어에서는 type 지정이 가능하다.

 

 

따라서 js를 사용하다가 불편함을 느낀다면 ts를 공부해보길 바란다.

 

 

 

* 매개변수 기본값 설정

 

매개변수를 작성하는 란에 값을 미리 지정해주면, 사용자가 매개변수에 값을 할당해주지 않았더라도 미리 지정해준 기본값을 제공한다.

function f(a, b='banana'){
   console.log(`${a} and ${b}`)
}
f('apple')  // apple and banana 출력

 

 

 

* 변수와 매개변수에 함수 할당

 

변수에 함수를 할당할 수 있으며, 이를 통해 함수 호출이 가능하다.

const print = function( ){ console.log('Hello'); };
print( );  //Hello 출력
const printAgain = print;
printAgain( );  //Hello 출력

 

매개변수에도 함수를 할당할 수 있다.

function print( ){
   console.log('Hello');
}

function f(a){
   a( );
}
f(print);  //Hello출력

 

 

 

* 화살표 함수

 

화살표 함수는 위에서 살펴본 기존의 함수 형식을 간결하게 표현한 형태이다.

화살표 함수의 형식은 ( 매개변수 ) => { 내용 }이다. 

 

 

여기서 { } 대괄호는 사용해도 되고 사용하지 않아도 된다.

 

 

대괄호를 사용하지 않는 경우는 내용이 한줄로 간단한 경우이다.

대괄호를 사용하는 경우는 주로 내용이 여러줄인 경우이다.

 

 

이 때 주의해야 할 것은 { } 대괄호를 사용하는 경우에는 무조건 반환(return)을 해야한다.

const f = function( ) { console.log('hi'); };
const f = ( ) => console.log('hi');  // 위 함수와 같은 표현

const sum = function(a, b){ return a + b; };
const sum = (a, b) => a + b;             // 위 함수와 같은 표현
const sum = (a, b) => { return a + b; };  // 위 함수와 같은 표현