함수(Function)란?

자바스크립트에서는 단순히 동작 하나만 실행되는게 아니라 여러가지 동작이 연결됩니다.이렇게 동작해야 할 목적들을 묶은 명령을 함수(Function)라고 합니다.

함수 선언 및 호출

함수를 사용하는 가장 기본적인 방법은 함수를 만들때 이름을 붙이고 필요할 때마다 함수 이름을 사용해 실행하는 것입니다.

✔️ 함수 선언

함수가 어떤 명령을 처리할지 미리 알려주는 것을 함수를 선언한다 또는 함수를 정의한다 라고 합니다.
함수를 선언할 때는 function이라는 예약어를 사용하고 중괄호{ } 안에 실행할 여러 명령들을 넣습니다.

function 함수명() {
    명령
{

✔️ 함수 호출

함수를 선언하는 것만으로 함수가 실행되지는 않습니다!. 함수를 선언한 후에 따로 실행 코드를 입력 해주어야 하는데 이렇게 선언한 함수를 사용하는 것을 함수를 호출한다 또는 함수를 실행한다 라고 합니다.

함수명() 또는 함수명(변수)

함수를 선언하고 호출하는 하는걸 한번에 해보기

function myAge() {
  let a= "나이 : ";        // 💡지역변수
  let age = "25살";
  console.log(a + age);
}
myAge()                       // 나이 : 25살

💡 지역변수란 함수 안에서 선언하고 함수 안에서만 사용 가능한 변수다.

재사용할 수 있는 함수

매개변수를 이용해 입력을 바꿔 여러번 사용할 수 있는 성질을 함수의 재사용성 이라고 하는데
재사용성 은 함수의 가장 큰 장점이라고 할 수 있다.

• 매개변수(parameter)
  함수를 선언할 떄부터 외부에서 값을 받아 줄 변수를 미리 만들어야 합니다. 이것을 매개변수(parameter)라 하고
  함수를 호출할 때 괄호( ) 안에 매개변수의 이름을 넣어서 쓸수 있습니다.
• 반환(return)
  함수의 결과값을 함수 밖에서 사용하려면 함수를 실행한 위치로 돌려줘야하는데
  이러한 동작을 값을 반환(return) 이라고 합니다
• 인수(augument)
  매개변수가 있는 함수를 호출할때 실제 값 부분을 인수(augument)라고 합니다.

function numbers(num1, num2) {      // num1, num2 <-매개변수
  let sum = num1 + num2;            // num1과 num2를 더하여 sum변수에 저장
  return sum;                       // 반환하는 값 지정
}
let result = numbers(2, 5);         // 2, 5 <-인수
console.log(result);                // 7   함수호출

💡 함수안에 있는 변수sum은 단순히 결과값을 저장했다가 반환하므로 아래 예시처럼 소스를 줄여서 작성 할수있다.

function numbers(num1, num2) {
  return num1 + num2;               //num1 과 num2를 더한후 값을 바로 반환
}
let result = numbers(2, 5);         
console.log(result);    

함수 표현식

지금까지 위에서 살펴본 함수의 사용 방법은 함수 이름만 알면 어디서나 호출할 수있는 방법이였다.
위 방법 말고 함수 이름을 지정하지 않고 사용하거나, 함수를 호출하지 않고 바로 실행하는 방법을 알아보겠습니다.

✔️ 익명함수

익명 함수는 이름이 없는 함수를 말합니다.
즉 함수를 이름을 붙이지 않고 선언을 할수 있습니다.

function(a, b) {     // 익명 함수 선언
  return a + b;
}

⁉️ 익명 함수는 이름이 없는데 어떻게 실행해야 할까요?
익명 함수는 자체가 식이여서 변수에 할당해서 쓸수 있고 다른 함수의 매개변수로도 사용 할수 있습니다.

let sum = function(a, b) {          // 익명 함수를 선언후 sum변수에 할당
  return a + b;
}
console.log(sum(100, 1000);         // 익명 함수를 실행

✔️ 즉시 실행 함수

보통 함수는 선언하고 필요할때 호출해서 실행하는 방법을 많이 사용합니다.
함수를 정의하는 동시에 실행하는 함수를 즉시 실행 함수라고 합니다.

(function() {                 (function(매개변수) {
  명령                 또는       명령  
}());                         }(인수));

(function()                   (function(a, b){           
  let name = "태양"    또는       sum = a + b;
}());                         }(777, 333));

✔️ 화살표 함수

화살표 함수는 =>를 이용해 보다 간단하게 함수를 작성 할수있습니다.
ES6 버전부터 생겼고 익명 함수에만 사용할수 있다고 합니다.

✔︎(기본형)

(매개변수) => {함수 내용}

매개변수가 없는 경우

let name1 = function() {
  return "빅뱅태양";
}
         ⬇️
let name1 = () => {return "빅뱅태양"};
let name2 = () => "아니그냥태양";    <-이렇게 중괄호{},return 생략 가능

매개변수가 1개인 경우

let name = function(user) {
console.log(user);
}
         ⬇️
let name = user => {console.log(user);}

매개변수가 2개인 경우

let sum = function(a, b) {
return a + b;
}
         ⬇️
let sum = (a, b) => a + b;

---

참고

JAVASCRIPT.INFO 함수
MDN Web Docs 함수
📒 Do it! HTML+CSS+자바스크립트 웹 표준의 정석

회고🤔

처음으로 내생각을 써 보는거같은데 기술 블로그를 쓰면서 내가 알고 있는 내용이 진짜 맞는지
의심이 드는 걸로 보아 내가 너무 얕게 알거나 모르는 것이 너무 많아 반성이 많이 되었다.
더 열심히 공부하고 계속 글을 쓰면 조금씩 성장 할거 같단 생각이 든다.
글을 작성할때 내가 공부한 나의 언어로 바꿔서 쓰는 법을 길러야 한다는데 아직 나의 언어로
쓰기에는 역부족인거 같아서 조금씩 나의 생각과 내용들을 담아서 쓰도록 노력해야겠다.🙂