🍌 JavaScript

Function

Function(함수)는 일련의 처리를 하나로 모아 언제든 호출할 수 있도록 만들어 둔 것이다. 함수의 입력 값을 인수(argument)라 하고 함수의 출력 값을 반환값(Return Value)이라고 부른다.

Rules for naming function :

• 일반적으로 동사 또는 동사로 시작되는 어휘 사용
  (예: funcion getMousePosition(event) {...})
• Camel Case를 주로 사용함 (예: saveImage)

Defining Functions

Function Declarations(함수 선언)

• function 키워드를 사용하여 함수를 정의
• 함수의 매개변수들은 괄호(())안에 쉼표(,)로 구분
• 함수를 정의하는 js문은 중괄호({ /* ... */ })로 묶음

function square(number) {
  return number * number;
}

• 함수 square은 number라는 하나의 매개변수를 가짐
• return문은 함수가 반환하는 값 지정

Function Expression(함수 표현식)

함수 리터럴(function() {...})은 anonymous(익명 함수, 무명 함수)라 하며, 함수가 이름을 가질 필요 없음을 의미

• 함수 리터럴을 사용할 때는 끝에 반드시 세미콜론(;)을 붙임

const square = function (number) {
  return number * number;
};
const x = square(4); // `x` 의 값은 16

• 익명 함수에도 함수의 이름을 붙일 수 있음

const square = function sq(number) {
  return number * number;
};

• arrow function(화살표 함수)

const square = number => {
  return number * number;
};
const x = square(4); // `x` 의 값은 16

Calling functions

• parameter(매개변수, 인자)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미
• argument(인수)는 함수가 호출될 때 함수로 값을 전달해주는 값

// passing of value(값의 전달)
function add(x) {
  return (x = x + 1);
}
let a = 3;
let b = add(a);
console.log(`a = ${a}, b = ${b}`); // a = 3, b = 4

// passing by reference(참조 전달)
function add(p) {
  p.x = p.x + 1;
  p.y = p.y + 1;
  return p;
}
let a = { x: 3, y: 4 };
let b = add(a);
console.log(a, b); // {x: 4, y: 5} {x: 4, y: 5}

인수 여러 개를 전달할 때

• 함수의 인수를 객체의 프로퍼티에 담아서 전달

let parameters = {
  x: 0,
  y: 0,
  vx: 10,
  vy: 15,
  radius: 5,
};

function setBallProperties(params) {...}

📌 함수의 리턴값을 없을 경우 undefined가 함수의 반환값이 됨

참고문헌,
이소 히로시, 『모던 자바스크립트 입문』, 서재원 역, 길벗, 2019
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Functions