[Codecademy-Javascript] 4장 Functions

4. Functions

 함수는 자바스크립트의 기본 구성 요소 중 하나로, 특정한 작업을 수행하기 위해 일련의 명령문을 그룹화한 재사용이 가능한 코드 블록입니다.

---

4-1. 함수 선언

 함수를 사용하기 위해선 함수를 선언해야 합니다.

함수 선언식은 function 키워드, 함수의 이름 또는 식별자, 중괄호로 둘러싸인 함수의 내용으로 구성되어 있습니다.

https://content.codecademy.com/courses/learn-javascript-functions/Diagram/declaration.svg

 

4-2. 함수 호출

 함수는 함수를 선언하는 것만으로는 동작하지 않습니다. 함수 이름 뒤에 괄호를 사용하여 다른 곳에서 함수를 호출하거나 실행할 수 있습니다. 함수를 호출하면 함수 내부의 모든 코드가 실행됩니다. 함수 호출은 필요한 만큼 얼마든지 반복할 수 있습니다.

function sayThanks() {
	console.log('Thank you!');
}
// 함수 호출
sayThanks();

 

4-3. 매개 변수와 인수

일부 함수는 데이터를 받고 그 받은 데이터를 사용하여 작업을 수행합니다. 이때 함수를 호출할 때 함수에 전달되는 값을 인수(argument)라고 합니다. 매개 변수(parameter)는 이 전달되는 값을 가지고, 함수 내부에서 변수처럼 사용됩니다. 매개 변수는 함수를 호출할 때 함수 이름 뒤에 오는 괄호 안에 값이 지정됩니다. 만약 함수를 실행하는데 전달될 값이 없다면, 매개 변수 없이 함수를 정의할 수 있습니다.

https://content.codecademy.com/courses/learn-javascript-functions/Diagram/function_parameters.svg

 

4-4. 기본 매개 변수

 기본 매개 변수를 사용하면 함수에 전달된 인수가 없거나 인수가 정의되지 않은 경우 매개 변수가 미리 결정된 값을 가질 수 있습니다.

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

 

4-5. return 키워드

 함수가 호출되면, 컴퓨터는 함수의 코드를 실행하고 함수 결괏값을 도출합니다. 이때 함수는 return 키워드를 이용해 결괏값을 반환합니다. return 키워드가 실행되면 함수의 실행은 종료되며 그 뒤에 오는 코드는 실행되지 않습니다. 반환된 결괏값은 변수에 저장하여 나중에 사용할 수 있습니다.

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

 

4-6. 도우미 함수

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

function multiplyByNineFifths(number) {         
  return number * (9/5);
};  // 도우미 함수
 
function getFahrenheit(celsius) {
  return multiplyByNineFifths(celsius) + 32;
};
 
getFahrenheit(15); // Returns 59

 

4-7. 함수 표현식

 함수를 정의하는 또 다른 방법은 함수 표현식을 사용하는 것입니다. 표현식 내에서 함수를 정의하려면 function 키워드를 사용할 수 있습니다. 함수 표현식에서 함수 이름은 일반적으로 생략되는데, 이처럼 이름이 없는 함수를 익명 함수라고 합니다.

const calculateArea = function(width, height) {
	const area = width * height;
	return area;
};

 

4-8. 화살표 함수

 function 키워드를 없앤 후, ( ) 내부에 매개변수를 적고, { }에 둘러싸여 있는 함수의 코드를 가리키는 =>(화살표 기호)를 추가한 함수를 화살표 함수라고 합니다. 화살표 함수를 사용하면 간단하게 함수를 작성할 수 있습니다.

const rectangleArea = (width, height) => {
	let area = width * height;
	return area;
};

 

4-9. 간결한 화살표 함수

• 매개변수를 하나만 사용하려고 할 때, 해당 매개변수를 괄호로 묶을 필요가 없습니다. 그러나 0개 또는 여러 개의 매개변수를 사용하려고 하는 경우에는 반드시 괄호를 사용해야 합니다.
• 코드가 한 줄인 함수는 { }가 필요하지 않습니다. 코드는 =>(화살표) 바로 뒤에 와야 하며 return 키워드를 사용하지 않아도 됩니다. 이를 암시적 반환이라고 합니다.

const mulNum = (num) => {
	return num + 10;
};

따라서 위의 함수를 아래와 같이 코드의 구조를 재조정할 수 있습니다.

const mulNum = num => num + 10;

---

JavaScript

Editor: 도담