[TIL] Javascript function

javascript logo

1. 함수

◎ 함수는 특정 코드를 하나의 명령으로 실행 하 수 있게 해주는 기능입니다.

예를 들어서, 우리가 특정 값들의 합을 구하고 싶을 때는 다음과 같은 코드를 작성한다.

 

위의 작업을 함수로 만들어 보자.

 

 

• 함수를 만들 때는 function 키워들 사용하며, 함수에서 어떤 값을 받아올지 정해주는데 이를 파라미터(매개변수)라고 부른다.

• 함수 내부에서 return 키워드를 사용하여 함수의 결과물을 지정할 수 있다.

2. 문법

◎ 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다. 한번 함수를 정의하는 문법을 봐보자.

function 함수이름() {
 실실행할 코드 작성
 return;
}

함수 정의식

• function 키워드로 시작한다.

• 함수 이름을 지어준다.

• 함수를 알리는 ( )를 열고 닫는다.

• 함수의 시작을 알리는 { }을 열어준다.

• { } 안에 실행할 코드를 작성한다. 함수의 body라고 부르기도 한다. 

• return 할 것이 있다면 작성한다.

◎ 변수도 이름이 있듯이, 함수도 이름이 있다. 함수 이름을 부르면, 함수 내에 있는 코드가 실행된다. 함수 이름을 부르는 것을  "함수를 호출한다"라고 표현한다. 이제 함수를 호출하는 문법을 봐보자.

함수이름();

• 함수 이름을 지어준다.

• ( )를 열고 닫고 함수를 호출한다

• 함수를 호출하기 전까지 함수는 실행을 안 한다. 함수는 꼭 호출해주자.

4. 함수의 반환(return)

◎ 모든 함수는 반환을 합니다.

모든 함수는 반환을 하긴 하는데, return을 생략할 수도 있다.

함수 내부에 return 키워드가 보이지 않으면 반환을 생략했다는 말이다.

함수가 반환을 생략하면 undefined라는 값을 반환한다.

return 키워드를 사용하지 않은 함수의 코드를 봐보자.

 

처음 실행해본 코드에서 return 키워드만 뺏는데 결과는 확실히 달라진다.

return 키워드를 잊지 말고 사용하자.

5. 매개변수(parameter)와 인자(argument)

◎ 매개변수는 함수 등에서 사용되는 전달된 값을 받는 변수이다.

일단 매개변수가 뭔지 코드를 보면서 이해해보자.

 

parameter

• getName함수의 () 안에 name이 있다. 이걸 매개변수라고 부른다.

• 매개변수 이름은 개발자 마음대로 작성해도 된다. 하지만 의미를 맞추는 것이 좋다.

• 받아온 매개변수를 함수 내부 실행코드에 사용할 수 있다.

◎ 인자는 함수 호출 시 전달되는 값을 의미합니다.

인자에 대한 코드도 봐보자. (매개변수 코드와 같다.)

 

argument

• getName 함수를 호출하는 과정에서 ( )에 "개발자"라는 값을 전달한다.

• 함수 호출을 result라는 변수에 담는다.

• console을 찍어보면 값이 잘 나온다.

값을 넘겨줄 때 number, string, array 등 여러 타입이 가능하다.

6. 템플릿 리터럴(Template Literal)

◎ 우리는 함수의 값을 console.log를 하게 될 때 문자열을 조합하기 위해서  + 연산자를 사용했다.

이렇게 문자열을 조합할 때 + 를 사용해도 큰 문제는 없지만, 더욱 편하게 조합을 하는 방법이 있다.

바로, ES6의 템플릿 리터럴(Template Literal)이라는 문법을 사용하는 것이다.

+ 익숙해져서 템플릿 리터럴을 사용하는 게 어색하지만 익숙해지면 훨씬 편할 거 같다.

템플릿 리터럴을 사용하여 구현을 해보자.

 

Template Literal

• ``(백 틱) 키워드를 사용한다

• 매개변수를 받을 때 ${매개변수명}이라고 작성해야 한다.