[Javascript] Codecademy 3. Functions

3. Functions

함수는 자바스크립트의 기본 구성 요소 중 하나로, 작업을 수행하거나 값을 계산하기 위해 사용됩니다. 함수는 하나 이상의 값을 전달할 수 있으며 실행이 끝날 때 값을 반환할 수 있습니다.

---

3-1. 함수 선언

함수를 사용하려면 함수를 호출할 곳에 함수를 정의해야 합니다. 함수를 생성하는 한 가지 방법은 함수 선언을 사용하는 것입니다. 함수 이름 또는 해당 식별자 뒤에 괄호가 오고, 함수의 중괄호 { } 안에 특정 작업을 수행하는 데 필요한 명령문 또는 본문을 담고 있습니다.

Function HiWorld() {
  console.log('Hello, World!');
}

 

3-2. 함수 호출

함수 이름 뒤에 괄호를 사용하여 코드의 다른 곳에서 함수를 호출하거나 실행할 수 있습니다. 함수를 호출하면 함수 본체 내부의 코드가 실행됩니다. 인수는 함수를 호출할 때 함수에 전달되는 값입니다.

function mul(num1, num2) {
  return num1 * num2;
}
// Calling the function
sum(1, 2);

 

3-3. 매개 변수 및 인수

함수를 선언할 때 매개 변수를 지정할 수 있습니다. 매개 변수는 함수 본문 내에서 변수로 사용됩니다. 매개 변수가 있는 함수를 호출할 때 함수 이름 뒤의 괄호 안에 값을 지정합니다. 위에서 말했듯이, 함수를 호출할 때 함수에 전달되는 값을 인수라고 합니다. 인수는 값 또는 변수로 함수에 전달될 수 있습니다. 기본 매개 변수를 사용하면 전달된 인수가 없거나 인수가 정의되지 않은 경우, 매개 변수에 미리 결정된 값을 가질 수 있습니다.

// The parameter is name
function favoritecolor(color) {
  return `I like, ${color}!`;
}

 

3-4. 반환 키워드

함수는 반환 키워드를 사용하여 값을 반환합니다. return은 함수 실행을 종료하고 지정된 값을 호출된 위치로 반환합니다. 반환한 값은 변수에 저장하여 나중에 사용할 수 있습니다.

function sum(num1, num2) {
  return num1 + num2;
}

 

3-5. 도우미 함수

다른 함수 내에서 함수의 반환 값을 사용할 수 있습니다. 다른 함수 내에서 호출되는 이러한 함수를 도우미 함수라고 합니다. 각 기능이 특정 작업을 수행하므로 필요한 경우 코드를 쉽게 읽고 디버깅할 수 있습니다.

function monitorCount(rows, columns) {
  return rows * columns;
}

function costOfMonitors(rows, columns) {
 return monitorCount(rows, columns) * 200;
}

const totalCost = costOfMonitors(5, 4);

 

3-6. 함수 표현식

함수를 정의하는 또 다른 방법으로 함수 표현식을 사용하는 방식이 있습니다. 표현식 내에서 함수를 정의하려면 function 키워드를 사용할 수 있습니다. 함수 표현식에서 함수 이름은 일반적으로 생략됩니다. 이러한, 이름이 없는 함수를 익명 함수라고 합니다. 함수 표현식은 참조하기 위해서 종종 변수에 저장됩니다.

const animal = function() {
  return 'Fox!';
}

 

3-7. 화살표 함수

화살표 함수를 사용하면 반환 키워드 없이 식 결과를 반환하는 간결한 함수 본문을 작성할 수 있습니다. ( ) 내부에 매개 변수를 포함시킨 다음, 아래와 같이 { }에 둘러싸여 있는 함수 본체를 가리키는 화살표 =>를 추가합니다.

const plantNeedsWater = (day) => {
  if (day === 'Wednesday') {
    return true;
  } else {
    return false;
  }
};

 

3-8. 간결한 화살표 기능

• 단일 매개 변수만 사용하는 함수는 해당 매개 변수를 괄호로 묶을 필요가 없습니다.  그러나 함수가 0개 또는 여러 개의 매개 변수를 사용하는 경우에는 괄호가 필요합니다.
• 한 줄 블록으로 구성된 함수 본문은 중괄호가 필요하지 않습니다.
• 블록의 내용은 화살표 => 바로 뒤에 와야 하며, 반환 키워드는 제거할 수 있습니다. 이를 암시적 반환이라고 합니다.

따라서 아래의 함수를

const plantNeedsWater = (day) => {
  return day === 'Wednesday' ? true : false;
};

다음과 같이 리팩토링할 수 있습니다.

const plantNeedsWater = day => day === 'Wednesday' ? true : false;

 

 

---

Corner React Starter #1

Editor dori

 

다른 포스트 바로가기

2021.09.25 - [분류 전체보기] - 환영합니다!