Learn Javascript -3 "functions"

Functions

How to calculate the area of a rectangle.

1. Measure the width of the rectangle.
2. Measure the height of the rectangle.
3. Multiply the width and height of the rectangle.

const width = 10;
const height = 6;
const area =  width * height;
console.log(area); // Output: 60

Imagine being asked to calculate the area of three different rectangles:

// Area of the first rectangle
const width1 = 10;
const height1 = 6;
const area1 =  width1 * height1;
 
// Area of the second rectangle
const width2 = 4;
const height2 = 9;
const area2 =  width2 * height2;
 
// Area of the third rectangle
const width3 = 10;
const height3 = 10;
const area3 =  width3 * height3;

A function is a reusable block of code that groups together a sequence of statements to perform a specific task.

Diagram showing the syntax of a function declaration

Function keyWord(=called identifier) () {
console.log(‘Heool, World!’)’
}

hoisting feature

console.log(greetWorld()); // Output: Hello, World!
 
function greetWorld() {
  console.log('Hello, World!');
}

Function 불러오려면

Identifier ();

[parameters]
매개 변수를 사용하면 함수가 입력을 받아들이고 입력을 사용하여 작업을 수행 할 수 있습니다. 호출 될 때 함수에 전달 될 정보에 대한 자리 표시 자로 매개 변수를 사용합니다.

JavaScript syntax for declaring a function with parameters

Function calculateArea(width, height)(=parameters) {
console.log(width*height);
}

함수 부르기
calculateArea(10, 6);

위의 함수 호출에서 숫자 10은 너비로 전달되고 6은 높이로 전달됩니다. 인수가 전달되고 할당되는 순서는 매개 변수가 선언 된 순서를 따릅니다.

*응용 크기에따라서 색이 변하게 할 수 있음.

고객에게 감사인사 전하기

function sayThanks(name) {
  console.log('Thank you for your purchase '+ name + '! We appreciate your business.');
}

sayThanks('Cole')//Thank you for your purchase Cole! We appreciate your business.

[Default parameters]
기본 매개변수, 값이 없으면 미리 결정된 값으로 알려줌.
function greeting (name = 'stranger') {
console.log(Hello, ${name}!)
}

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

많이 헷갈리는 ㅜㅜ
[Return]

function rectangleArea(width, height) {
  let area = width * height;
}
console.log(rectangleArea(5, 7)) // Prints undefined

함수가 호출되면 컴퓨터는 함수의 코드를 실행하고 함수 호출 결과를 평가합니다. 기본적으로 결과 값은 정의되지 않습니다.

using return keyword in a function

function rectangleArea(width, height) {
  if (width < 0 || height < 0) {
    return 'You need positive integers to calculate area!';
  }
  return width * height;
}

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

const numOfMonitors = monitorCount(5, 4);
console.log(numOfMonitors);

[helper function]

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

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

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

const totalCost = costOfMonitors(5,4);
console.log(totalCost);

[anonymous function]

Const calculateArea = function(width, height) {
Const area = width * height;
Return area;
};

함수식 호출 - 함수가 저장된 변수의 이름을 쓰고, 그 뒤에 함수에 전달되는 인수를 묶는 괄호 쓰기

1. 보통 const를 씀. 함수의 식별자로 쓸 변수 지정
2. ()안의 파라미터와 function 키워드를 통해, 익명함수는 변수의 값을 할당함.
3. 함수 호출.
   variableName(argument1, argument2)

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

plantNeedsWater('Tuesday')

[Fat arrow]

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

parameter값에 따라서 괄호 생략되기도 함

ZERO PARAMETERS
Const functionName = () => {};

ONE PARAMETER
const functionName = paraOne => {};

TWO OR MORE PARAMETERS
const functionName = (paramOne, paramTwo) => {};

한 줄 블록으로 구성된 함수 본문에는 중괄호가 필요하지 않습니다. 중괄호가 없으면 해당 줄이 평가하는 모든 항목이 자동으로 반환됩니다. 블록의 내용은 화살표 => 바로 뒤에 와야하며 return 키워드를 제거 할 수 있습니다. 이를 암시적 반환(implicit return)이라고합니다.
comparing single line and multiline arrow functions

Single-line block
const sumNumbers = number => number + number;

Multi-line block
const sumNumbers = number => {
const sum = number + number;
return sum;
};

So if we have,

const squareNum = (num) => {
  return num * num;
};

Can refactor this to:

const squareNum = num => num * num;