[javascript 기본] javascript 함수의 선언과 표현

javascript에서 함수를 사용하는 방법에 대해 알아보자

 

다른 함수들과 똑같이 파라미터, return값으로 이루어진다.

 

 

 

 

1. 하나의 함수는 하나의동작만 수행한다.

2. 함수의 이름은 명사가 아닌 동사여야 한다.

 

 

 

 

특이한점은 javascript에 type이 없기때문에 매개변수와 리턴값에 type제한이 없어 제약이 적지만, 잘못 사용될 가능성이 있다.

 

 

 

 

 

 

 

 

 

 

- parameters  ( passed by values, passed by reference )

 

object는 메모리에 참조하는 형태로 저장되고, 나머지 변수들은 메모리에 바로 올라간다.

때문에 object가 함수 파라미터로 들어갈경우 참조가 그대로 전달되어,

함수의 동작에 따라 안의 변수가 바뀔수 있다.

하지만 일반적인 변수는, 값만 전달되어 함수이후 변화가 없다.

위에 예제를 보면, obj로 전달되어

obj.name이 "after" 로 변하는 것이 함수 실행이후에도 반영되었고

name만 즉 값만 전달하는경우 함수 실행이후에도 "before"인것을 확인할수있다.

 

 

 

 

 

 

 

 

 

- default parameters 

 javascript 는 default parameters를 지원한다.

때문에 파라미터가 들어와야 할 자리에 아무것도 명시되지 않는경우 

할당되는 기본값을 정해줄수 있다.

아래와같이 from 으로 아무값도 넘겨주지 않아 unknown이 출력되는것을 확인할수있다.

 

 

 

 

 

 

 

 

- Rest Parameters

 

함수인자로 배열을 넣을수 있다. function foo(...args )  로 사용된다.

 

배열을 순회하며 출력하는 간단한 함수이다. 배열의 메소드를 사용하는 방법도 존재하지만 오늘은 다루지않겠다.

 

 

 

 

 

 

 

 

- 함수 최적화

함수를 만들다보면 반드시 조건문인 else , if절을 쓸수밖에 없는데 

이런경우 동작이 많은 코드보다 return 하는 코드를 최대한 앞에 작성해

빠르게 return하게 해주는것이 프로그램 최적화에 도움이 된다.

 

만약 user.score이 10 이하인 유저들에 대해 어떠한 동작을 하게한다면,

이처럼 100이상인 user들에대해 return하는것을 먼저 쓰는것이 프로그램 최적화에 도움이 된다.

 

 

 

 

 

 

 

- function expression

 

 

javascript의 자료형을 보면서 함수또한 변수에 저장된다는 first-class function이라는것을 배웠따.

 

first-class function 이란?

- 함수가 변수에 할당이되고, 파라미터로 전달되기도하며 리턴값에 사용할수도 있는것.

 

이처럼 함수를 변수에 할당하여 실행시키고, 다른변수에 변수로써 할당해 실행할수도 있고,

이렇게 함수를 선언하는것이아닌 변수에 할당하여 사용하는 방식을 function expression이라고 한다.

 

함수를 할당하여 사용할떄는, 할당전에 사용할경우 에러가 나지만

함수를 선언하는방식은 함수가 hoisting되어, 함수를 선언하기전에 사용해도 에러가 나지 않는다.

 

 

 

 

 

 

 

 

 

- functoin expression 을 이용해 callback function 사용

함수를 변수에 할당할때 함수이름을 명시하는 방법과 명시하지 않고 function() 만 명시하는 방법이 있는데

 

함수이름을 명시할경우 디버깅시 스택에 올라가있기 때문에 버그를 찾기가 편리하고

재귀함수를 사용할수있다는 장점이 있다.

 

 

이와같이 pNo에 print()라는 이름으로 명시하여, 재귀함수로 사용하는것을 확인할수 있다.

 

 

 

 

 

 

 

 

 

- arrow function

마지막으로 가장 많이 쓰이는 arrow function이다.

function expression보다 더 간결하게 표현이 가능한데,

(arg1,arg2...) => (함수내용); 이런식으로 작성한다.

두번째 add와 add_exp 가 같은 동작을 하는데 arrowfunction을 통해 간결하게 표현한것을 확인할수 있다.

add = (a,b) => (a+b); 에서 a,b 가 매개변수이고, (a+b) 가 리턴값이다.

 

또 arrowfunction의 내용이 많아 한줄에 다 표현하기 힘든경우 { } 블락을 통해 표현할수도 있으며 

이때는 return값을 꼭 명시해주어야한다.