[자바스크립트] 기능

Reference
Codecademy. Retrieved from https://www.codecademy.com/

함수는 JavaScript의 기본 빌딩 블록 중 하나입니다. 함수는 작업을 수행하거나 값을 계산하기 위해 재사용 가능한 일련의 명령문입니다. 함수는 하나 이상의 값을 전달할 수 있으며 실행이 끝날 때 값을 반환할 수 있습니다. 함수를 사용하려면 호출하려는 범위의 어딘가에 함수를 정의해야 합니다.

함수 선언

함수 선언은 명명된 함수를 만드는 데 사용됩니다. 이러한 함수는 선언된 이름을 사용하여 호출할 수 있습니다. 함수 선언은 다음에서 빌드됩니다.

function 키워드입니다.

함수 이름입니다.

일련의 괄호로 묶인 쉼표로 구분된 선택적 매개변수 목록() .

중괄호 세트로 묶인 함수 본문{} .

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

함수 호출

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

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

// Calling the function
sum(2, 4); // 6

매개변수 및 인수

함수에 대한 입력은 함수가 선언되거나 정의될 때 매개변수로 알려져 있습니다. 매개변수를 사용하면 함수가 입력을 수락하고 입력을 사용하여 작업을 수행할 수 있습니다. 호출될 때 함수에 전달될 정보에 대한 자리 표시자로 매개변수를 사용합니다. 매개변수 없이 함수를 정의할 수 있습니다.



매개변수가 있는 함수를 호출할 때 함수 이름 뒤에 오는 괄호 안에 값을 지정합니다. 함수가 호출될 때 함수에 전달되는 값을 인수라고 합니다. 인수는 값이나 변수로 함수에 전달할 수 있습니다.

반환 키워드

함수는 return 키워드를 사용하여 값을 반환(다시 전달)합니다. return 함수 실행을 종료하고 지정된 값을 호출된 위치로 반환합니다. 일반적인 실수는 return 키워드를 잊어버리는 것입니다. 이 경우 함수는 기본적으로 undefined를 반환합니다.

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

// Without return, so the function doesn't output the sum
function sum(num1, num2) {
  num1 + num2;
}

함수 표현식

함수 표현식은 함수 선언 대신 표현식 내부에 함수를 생성합니다. 익명 및/또는 변수에 할당될 수 있습니다. 함수 선언과 달리 함수 표현식은 호이스팅되지 않으므로 정의되기 전에 호출할 수 없습니다.

익명 기능

JavaScript의 익명 함수에는 이름 속성이 없습니다. function 키워드를 사용하거나 화살표 함수로 정의할 수 있습니다. 명명된 함수와 익명 함수의 차이점은 코드 예제를 참조하세요.

// Named function
function rocketToMars() {
  return 'BOOM!';
}

// Anonymous function
const rocketToMars = function() {
  return 'BOOM!';
}

화살표 함수(ES6)

화살표 함수 표현식은 ES6에서 도입되었습니다. 이 표현들은 깨끗하고 간결합니다. 화살표 함수 표현식의 구문에는 function 키워드가 필요하지 않으며 굵은 화살표=>를 사용하여 매개변수를 본문에서 분리합니다.

화살표 기능에는 여러 가지 변형이 있습니다.

단일 매개변수가 있는 화살표 함수는 매개변수 목록 주위에 () 필요하지 않습니다.

단일 표현식이 있는 화살표 함수는 return 키워드 없이 표현식의 결과를 반환하는 간결한 함수 본문을 사용할 수 있습니다.

// Arrow function with two arguments 
const sum = (firstParam, secondParam) => { 
  return firstParam + secondParam; 
}; 
console.log(sum(2,5)); // Prints: 7 

// Arrow function with no arguments 
const printHello = () => { 
  console.log('hello'); 
}; 
printHello(); // Prints: hello

// Arrow functions with a single argument 
const checkWeight = weight => { 
  console.log(`Baggage weight : ${weight} kilograms.`); 
}; 
checkWeight(25); // Prints: Baggage weight : 25 kilograms.


// Concise arrow functions
const multiply = (a, b) => a * b; 
console.log(multiply(2, 30)); // Prints: 60 

기본 매개변수

ES6에 추가된 기능 중 하나는 기본 매개변수를 사용하는 기능입니다. 기본 매개변수를 사용하면 함수에 전달된 인수가 없거나 호출 시 인수가 undefined인 경우 매개변수가 미리 결정된 값을 가질 수 있습니다.

function greeting (name = 'stranger') {
  console.log(`Hello, ${name}!`)
}

greeting('Nick') // Output: Hello, Nick!
greeting() // Output: Hello, stranger!