[JS] 함수(Functions)

JS 앱의 기본 구성요소는 함수이다. 또한 언어에서 가장 필수적인 개념 중 하나이다. 

 

함수란 무엇일까?

• 함수는 코드의 일부로 우리 코드에서 재사용할 수 있다. (코드를 반복해서 작성하는 비효율 ↓ )
• 변수와 비슷하지만 코드 덩어리 전체를 위한 것이다. → 작업의 묶음

따라서 변수는 값을 갖고 있지만 함수는 코드 한줄 이상을 갖는다.

 

프로그래밍 언언의 함수도 입력을 받아서 출력을 내보낸다.

이때 함수 내부로 입력을 전달받는

변수 → 매개변수(parameter)

입력 →  인수(argument)

출력 →  반환값(return value)

라고 한다.

 

---

매개변수

● 함수를 선언할 때 외부에서 값을 받는 변수

● 함수 이름 옆의 괄호 안에  매개변수 이름을 넣어준다. 

● 매개변수에 이름을 붙이는 방법은 일반적인 변수 이름을 붙이는 방법과 같다. 

● 매개변수는 선언된 함수에서만 사용한다. 

● 함수에 여러 개의 매개변수를 필요할 때에는 매개변수 사이에 쉽표(,)를 찍으면서 나열한다. 

 

인수

● 매개변수가 있는 함수를 실행할 때, 매개변수로 값을 넘겨주는 변수

 

😀 매개변수와 인수를 통틀어서 '인자'라고 한다.

---

 

function describeCountry(country, population, capitalCity) {
  return `${country} has ${population} people and its capital city is ${capitalCity}`;
}

함수는 함수 정의(function definition)를 통해 생성한다. 그러나 함수 정의만으로 함수가 실행되는 것은 아니다.

인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시해야 한다.

//함수 호출
const SouthKorea = describeCountry("SouthKorea", 6, "Seoul");

이를 함수 호출(fucntion call/run/invoke)이라고 한다. 함수를 호출하면 코드 블록에 담긴 문들이 일괄적으로 실행되고, 실행결과 즉 반환값을 반환한다. 

console.log(SouthKorea);

 

---

함수 선언(Function Declarations)

함수 선언은 함수 키워드만으로 함수를 선언한다. 마치 변수를 선언하듯말이다. 

 

함수를 선언하지 않고 함수 키워드 부터 적는다.

function  → 함수 이름을 정의한다.  logger를 만든다. logger은 함수의 이름이다.  logger는 큰솔에 뭔가를 로그하는 함수이다.

function logger → 괄호가 필요하다.

function logger() → 중괄호를 써서 소위 함수 친구를 만든다.

function logger () { } 중괄호 안에 있는 모든 코드는 함수의 친구이다. 함수를 실행할때 실행되는 코드이다. 

 

프로그램 무언가를 로그를 여러번 실행한다고 가정해보겠다. 

function logger() {
  console.log("My name is Jonas");
}

이전에는 프로그램 무언가에 코드 줄을 여러번 재사용했었다. 비효율적인 것을 줄이기 위해 함수를 생성했다.

함수를 생성했으니 이제 사용할 수 있다. 원하는 만큼 많이 사용할 수 있다.

 

logger이라는 함수를 만들어 My name is Jonas를 호출할것이다.

function logger() {
  console.log("My name is Jonas");
}

//calling / running / invoking functions
logger();

logger(); → 함수를 사용하려면 그냥 함수 이름을 쓰고 괄호를 쓰면 된다. 여기 함수를 사용하는 이 과정은 기본적으로 함수를 호출한다. 함수를 실행하거나 함수를 호출하는 것이다. 

 

📢 실행이나 함수를 호출할 때 calling, running, invoking

세 가지 용어를 교환해서 사용하는 걸 볼 수 있다. (기본적으로 의미는 생각하는 거와 같다.)

 

이전에 정의한 함수를 실행하거나 사용하는 것과 같다고 생각하면 된다.

function logger() {
  console.log("My name is Jonas");
}

//calling / running / invoking functions
logger();
logger();
logger();

logger() 이 함수는 사용하거나 호출하거나 실행할 수 있고 함수를 호출할 때마다 함수 안에 있는 코드가 실행된다. 

그렇게 3번 정도 코드를 재사용했다. 

---

함수의 기능성 

보통 함수를 작성할 때 데이터를 함수에 전달하고 추가로 함수는 데이터도 return(리턴)할 수 있다.

return(리턴)은 프로그램내의 다른 것에 사용할 데이터를 돌려준다는 뜻이다.
함수를 즉시 종료하거나 반환할 수 있다. 

 

function logger() {
  console.log("My name is Jonas");
}

 

여기에서 콘솔 값에 적었던 "My name is Jonas"를 함수는 코드 조각을 재사용할 수 없다.

그러나 데이터를 수신하고 데이터를 다시 반환할 수 있다. 함수를 기계라고 생각하면 쉽다. 

 

먼저 함수 키워드를 만들어야한다. 그런 다음 함수 이름을 선택한다.

(변수 이름과 마찬가지로 뭘하는지 알 수 있게 서술된 함수 이름을 선택하면 좋다.)

function fruitProcessor(apples, orange) {
  
}

이 함수에서는 매개 변수라는 것도 지정한다.

매개 변수는 이 함수에만 고유한 변수 같아서 내가 함수를 호출하면 정의가 된다. 매개 변수를 두개하고 싶으면 ,를 작성하면된다. 

이제 저 두가지는 함수가 호출되면 정의된다. 이 함수는 입력데이터를 나타낸다. 

 

사과와 오렌지로 주스를 만드는 시뮬레이션 ← 문자열로 만들 예정

function fruitProcessor(apples, oranges) {
  console.log(apples, oranges);
  const juice = `juice with ${apple} apples`;
}

주스라는 변수를 만들고 템플릿 리터럴을 만들거다. 주스라고 쓰고 사과로 매개 변수를 만든다. 이걸 호출하면 매개변수는 숫자가 된다. 

 

예를 들어 사과 3개로 설정하면 3개의 사과로 주스를 만들 수 있다. 

function fruitProcessor(apples, oranges) {
  console.log(apples, oranges);
  const juice = `juice with ${apple} apples and ${oranges} oranges`;
}

함수에 들어가는 입력 데이터를 이용해 문자열을 만들어 봤다.

function fruitProcessor(apples, oranges) {
  console.log(apples, oranges);
  const juice = `juice with ${apple} apples and ${oranges} oranges.`;
  return juice;
}

return 키워드 또한 사용할 수 있다.

return은 사용자/ 개발자/ 프로그램에게 값에 대해 반환해주는 키워드이다.  즉! 이걸로 함수로 부터 어떤 값이든 반환할 수 있다. 반환하는 이 값은 나중에 내 코드 어디에서든 사용할 수 있다.

주스 함수를 실행하면 결과가 된다. 

function fruitProcessor(apples, oranges) {
  console.log(apples, oranges);
  const juice = `juice with ${apples} apples and ${oranges} oranges.`;
  return juice;
}

fruitProcessor(5, 0);

 

이제 매개 변수의 실제 값을 지정하겠다.  사과 5개 오렌지 0개라고 하면 fruitProcessor 함수에 입력값이 되는거다.

 

function fruitProcessor(apples, oranges) {
  console.log(apples, oranges);
  const juice = `juice with ${apples} apples and ${oranges} oranges.`;
  return juice;
}

 

회색으로 밑줄그어진 매개 변수들은 빈칸이라고 보면 된다. 함수를 작성할 때도 저 빈칸을 채워야 한다. 함수를 호출할 때도 말이다.

fruitProcessor(5,0)에 값을 적은 거처럼 진짜 특정값을 전달함으로 나중에 코드에서 빈칸을 채울 것이다. 

그래서 fruiProcessor에 사과 5개랑 오렌지 0개를 적음으로 매개변수에 할당이 되었다.

이제 사과 5개, 오렌지 0개는 두번째 매개변수가 되었다.

매개변수에 실제 값을 넣는것이 인수(argument)라고 한다. 

매개변수와 인수를 통틀어서 '인자'라고 한다.

이제 값을 실행해보면 5와 0이 나온다. 이 값들은 console.log(apples, oranges);여기에서 온 값이다.

큰솔의 사과, 오렌지로 logging하는 것이다. 큰솔에서 사과 5개, 오렌지 0개로 지정한게 마지막 줄인 fruitProcessor의 값이다.

사과를 5개로 적었으니 function fruitProcessor(apples,oranges) ←이 함수에서 사과 매개변수 혹은 매개 변수를 변수로 생각할 수 있다. (오렌지도 마찬가지로)

 

그렇다면   const juice = `juice with ${apples} apples and ${oranges} oranges.`; 이 값들은 어떻게 된 것일까? 

주스가 리턴되었다. 기본적으로 이 함수를 실행한 결과 내가 방금 주스를 반환한 것이다. 

 

그래서 frunitProcessor 함수는 결과 5와 0으로 대체되었다. 

function fruitProcessor(apples, oranges) {
  console.log(apples, oranges);
  const juice = `juice with ${apples} apples and ${oranges} oranges.`;
  return juice;
}

const appleJuice = fruitProcessor(5, 0);
console.log(appleJuice);

반환된 값을 사용하고 싶으면 변수에 저장해야 한다. 그러면

이렇게 결과가 나온다. 

 

 

정리를 해보면 

const appleJuice = fruitProcessor(5, 0);여기서 fruitProcessor를 5와 0 인수로 호출했다. 이 인수들은 구체적이다.

→  function fruitProcessor(apples, oranges)의 매개 변수의 실제 값은 사과와 오렌지이다.

→   console.log(apples, oranges); 지금 함수가 실행되면 사과는 5개, 오렌지는 0개가 된다. 

→  그 다음   const juice = `juice with ${apples} apples and ${oranges} oranges.`; 이 값을 주스 문자열로 만든다.

→  그 함수에서   return juice; 그 값을 반환한다. 무슨 뜻? juice를 Juice = fruitProcessor(5, 0);에서  fruitProcessor(5, 0)로 호출한 결과 방금 반환된 주스 값이 되는 거다.

→  fruitProcessor(5, 0)값을 어딘가에 저장해야한다.

→ const appleJuice = fruitProcessor(5, 0); 에서 const appleJuice에 값을 저장한다.

→ 그 값을 큰솔에 잠그는 거다. 물론 큰솔에 입력할 수 있다.

function fruitProcessor(apples, oranges) {
  console.log(apples, oranges);
  const juice = `juice with ${apples} apples and ${oranges} oranges.`;
  return juice;
}

const appleJuice = fruitProcessor(5, 0);
console.log(appleJuice);
console.log(fruitProcessor(5, 0));

console.log(fruitProcessor(5, 0)); → 아무데나 값을 저장하지 않고 그냥 logging하는 거다. 

fruitProcessor 함수는 여기에서 한번 실행되었다.

유일한 차이점은 이 경우 어떤 변수로든 값을 저장하지 않고 큰솔에 직접 실행한 결과를 기록하는 거다. 

 

이제 함수를 사용해 다른 입력 값으로 함수를 재사용하고 다른 출력을 얻을 수 있다.

function fruitProcessor(apples, oranges) {
  console.log(apples, oranges);
  const juice = `juice with ${apples} apples and ${oranges} oranges.`;
  return juice;
}

const appleJuice = fruitProcessor(5, 0);
console.log(appleJuice);
//console.log(fruitProcessor(5, 0));

const appleOrangeJuice = fruitProcessor(2, 4);
console.log(appleOrangeJuice);

 

const appleOrangeJuice = fruitProcessor(2, 4);를 작성하여 특정 값을 정의하고 매개 변수로 function fruitProcessor(apples, oranges 여기 코드 블록에 전달된 인수이다.

그래서 사과와 오렌지를 빈칸으로 두고 함수를 호출할 때 인수를 이용해 빈칸을 채우는 것이다.

적어도 한번 const appleOrangeJuice = fruitProcessor(2, 4); 이렇게 함수를 호출해야 한다. 함수를 호출하지 않으면 함수 안에 있는 코드는 실행이 되지 않고 처리되지도 않는다. 

 

function logger() {
  console.log("My name is Jonas");
}

//calling / running / invoking functions
logger();
logger();
logger();

이 코드의 경우 매개변수도 없고 인수도 없다. 그러나 여기에 인수를 표시해도 아무런 효과가 없다. looger함수는 아무것도 반환하지 않기 때문이다. 물론 문제가 되지는 않는다. 모든 함수를 뭔가에 반환할 필요도 없고 모든 함수가 매개 변수를 갖고 있을 이유도 없다. 

매개변수나 반환 없이 이런식으로 반복해서 재사용하는 블록이 있을때 가능하다.

logger();
logger();
logger();

여기에서는 아무 값도 생성하지 않는다. 왜냐하면 함수에서 아무것도 반환하지 않기때문이다. 그래서 함수의 결과를 어떤 변수에 저장하는 것도 아니다. 기술적으로 정의되지 않은 상태에서 어떤 결과도 생성하지 않으니까 말이다. 정의되지 않은 값을 저장하지 않는다.

 

function fruitProcessor(apples, oranges) { → 1.매개변수로 일반함수를 작성하는게 함께 작용하고
  console.log(apples, oranges);
  const juice = `juice with ${apples} apples and ${oranges} oranges.`;
  return juice; → 3. 함수가 그 값을 반환하는 방식
} 
const appleJuice = fruitProcessor(5, 0); → 2. 특정 값으로 함수를 호출
console.log(appleJuice); → 4. 그 값을 여기서 어떻게 받아 이 변수로 저장한다. 
console.log(fruitProcessor(5, 0));

같은 코드를 반복해서 사용하는 대신 함수를 통해 재사용가능한 코드를 만들 수 있다. 프로그래밍에서는 코드를 반복해서 사용안하는게 좋다. 즉 dry상태로 두자는 거다.

DRY 
Don't Repeat Yourself

함수는 dry 코드를 구현하기에 완벽하다. 재사용 가능한 코드블록으로 함께 모든 응용 프로그래밍을 만들기 때문이다. 함수는 JS에서 기본 빌드 블록이다. 그런데 큰솔, log도 사실 그냥 함수지만 내장된 함수이다. 고유의 함수처럼 호출하는 거로 보인다. console.log(appleJuice) → 괄호를 사용하여 호출하고 값을 전달한다. 그 함수를 호출한 결과 간단히 메시지를 큰솔창에 나타낸다. 

const num = Number('23');

Number('23')

코드를 보면 23의 문자열을 매개 변수로 받아들인다. 이 인수 23은 함수로 넘겨져 이 함수는 실행되고 문자열은 숫자로 반환된다.

const num = Number('23'); 

그럼 그전에 설명했던 거처럼 저장할 수 있게 된다.