Function

• JavaScript는 다른 언어와 달리 타입이 없어서 타입 생략이 가능하다

• 재사용과 유지보수 용이

• JavaScript에서 Function은 Object이다

• 하나의 함수는 한가지 일만 하도록 만들기

• 가독성을 위해 함수의 이름은 동사형으로 만들기

• 🥰개발자의 세계에서 가독성은 정말정말 중요하다🥰

---

😄 code 1. 함수 선언, 호출

// 함수 선언
// 함수 이름은 doSomeThing
// 인자로는 아무것도 받아오지 않음
function doSomething() {
  console.log('함수 선언만 했습니다');
}
// 함수 호출
// 함수 선언할 때 인자가 없기 때문에 호출할 때도 인자가 없다
doSomething(); // output : 함수 선언만 했습니다
// 함수 선언
// 이번엔 a,b라는 특정한 인자를 받아오는 함수
function add(a,b) {
  const sum = a + b;
  return sum;
}
add(5, 3); // output : xx
const result = add(5, 3);
console.log(result); // output : 8

• 함수 선언만 하고 호출하지 않으면 결과값이 출력되지 않는다

• 함수의 이름은 사용자가 지정할수도 있고 함수의 이름이 없을수도 있다

• 함수를 변수에 저장하지 않고 그냥 불러오면 아무 값도 안나온다

---

😄 code 2. 인자로 함수 전달

// code 1.에 있던 add 함수
function add(a, b) {
  const sum = a + b;
  return sum;
}
// 인자로 add 함수를 받아오는 something 함수
function something(add) {
  console.log(add);
// output
// ƒ add(a, b) {
//   const sum = a + b;
//   return sum;
// }
}

// 함수 자체를 전달
const addFun = add;
console.log(addFun);
// output
// ƒ add(a, b) {
//   const sum = a + b;
//   return sum;
// }

// 호출한 함수의 내부의 값을 전달
const addFun2 = add(1, 2);
console.log(addFun2); // output : 3

• 위의 코드에서 알 수 있듯이 함수 자체를 전부 전달하고 싶으면 ()는 붙이지 않도록 한다

• 반대로 add() 이런식으로 ()를 붙여서 인자로 넘겨주면 add()가 먼저 호출되어서 add() 안의 값을 전달하게 된다

---

😄 code 3.

// message를 인자로 가지는 log 함수
function log(message) {
  console.log(message); // output : 안녕
}
// message 인자에 안녕 전달
log('안녕');
// obj를 인자로 가지는 changeName 함수
function changeName(obj) {
  obj.name = 'seung';
}
const change = { name: 'jung' };
changeName(change);
console.log(change); // output : seung

• Function은 Object이기 때문에 값을 전달하는게 아닌 reference를 전달한다

---

😄 code 4.

// message와 from 두가지의 파라미터를 받아오는 showMessage 함수
function showMessage(message, from = 'unknown') {
  console.log(`${message} by ${from}`); // output : 승옥이 by uknwon
}
showMessage('승옥이');
// ...args는 배열 형태로 전달됨
function printAll(...args) {
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]); // output : nam, seung, oak
  }
}
// 3개의 파라미터가 배열 형태로 전달된다
printAll('nam', 'seung', 'oak');

• from의 default 값이 unknown이기 때문에 하나의 인자도 전달이 가능하다.
• from의 default 값이 없는데 하나의 인자만 전달한다면 from은 undefined로 출력된다
• ...args는 배열 형태이기 때문에 for문으로 간단하게 바꿀 수 있다
  • for (const arg of args) {
    console.log(arg); // output 동일
    }

---

😄 code 5.

// 전역변수
let globalMessage = '전역변수입니다!!';
function printMessage() {
  // 지역변수
  let message = '지역변수입니다!!';
  console.log(message); // output : 지역변수입니다!!
  console.log(globalMessage); // output : 전역변수입니다!!
}
printMessage();
console.log(message); // error!! Why ? message는 지역변수이기 때문에

// 이름이 없는 함수 (anonymous function)
const print = function () {
  console.log('이름이 없어요!!'); // output : 이름이 없어요!!
};
print();
const printAgain = print;
printAgain(); // output : 이름이 없어요!!

• 지역변수는 { } 벗어나면 생명 소멸해서 사용 불가능
• 전역변수는 { } 벗어나도 사용 가능
• 이름이 없는 함수는 함수 선언 이후 호출해야한다
• 이름이 있는 함수는 hoisting이 가능하기 때문에 아무때나 호출 가능하다

hoisting ?

• 어떤 위치에서 선언하더라도 JavaScript 엔진이 맨 위에 선언한 것처럼 해주기 때문에 error 발생 안한다

---

😄 code 6. callBack Function

// Callback 함수인 randomQuiz
function randomQuiz(answer, printYes, printNo) {
  // 만약 answer이 love라면 printYes() 함수 호출, love가 아니라면 printNo() 함수 호출
  if (answer === 'love') {
    printYes(); // 아래에서 'love'를 받았기 때문에 printYes() 함수를 호출
  } else {
    printNo();
  }
}
// 이름이 없는 함수
const printYes = function () {
  console.log('정답');
};
// 이름이 있는 함수 (print라는 이름을 가짐)
const printNo = function print() {
  console.log('오답');
};
randomQuiz('love', printYes, printNo);

• 어떤 함수를 인자로 전달해서 사용하는 함수를 Callback 함수라고 한다
• randomQuize는 3개의 파라미터를 가지는데 'love'는 string, printYes와 printNo는 함수로 전달한다

---

😄 code 7. IIFE

// Arrow Function (항상 이름이 없는 함수)
// 코드 간결하게 작성 가능
const add = (a, b) => a + b;
console.log(add);
// IIFE (선언과 동시에 호출)
// 함수를 ()로 묶고 마지막에 함수 호출하듯이 ()사용
(function print() {
  console.log('IIFE입니다');
})();

• 코드가 한줄이면 {} 생략 가능, 코드가 두줄 이상이라면 {} 생략 불가
• { } 사용시 안에 return 필수 지정

---

😄 code 8.

function surprise(operator) {
  // add 함수를 받아왔기 때문에 add()와 동일
  const result = operator(4, 5);
  console.log(result); // output : 9
}
// add 함수의 reference를 operator에 전달
surprise(add);

---

😍 Early return, Early exit 😍
-> 리턴은 빠르게, 함수는 빨리 종료되게
-> 가독성 good !!

---

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍