JavaScript 기초 - 함수(function)

🌈 함수(function)

🔥 함수 선언

🔥 매개변수(parameter)

🔥 반환 값 : return

🔥 함수 이름 짓기

🔥 익명 함수

🔥 함수 복사

🔥 콜백 함수(calledback function)

🔥 화살표 함수(arrow function)

1. 함수 선언

1) 함수 선언

• 함수 선언 방법 : 🔍 function 함수이름 (함수인자) { 함수 실행 코드 };
• 스코프(=선글라스) 범위 : {} 밖에서는 안이 보이지 않고, {}안에서만 밖을 볼 수 있음
• 즉, 함수 안에서는 함수 외부에 변수를 이용할 수 있으나, 함수 외부에서는 함수 안에 변수를 직접적으로 호출 불가
• 이에 {} 내의 값을 사용하고 싶을 땐, 함수호출을 통해 불러옴
• 함수의 핵심은 함수 선언과 함수 호출 방법 : 🔍 함수이름(함수인자);
• 함수의 전달 방법 : 🔍 함수명; 👈 ()를 제거한 "함수명"을 통해 함수 전달 가능
• 즉 함수명에 ()를 붙인다는 것은 함수를 전달하는 것이 아닌 함수를 호출하는 것임

// 함수 선언
function name(parameters) {
  ...함수 본문...
};
// 함수 선언 예시
function sayHello() {
  console.log( '안녕하세요!' );
};
// 함수 호출 예시
sayHello() // 안녕하세요!

2) 함수 선언문 vs 함수 표현식

• 함수 선언문은 함수가 정의되기도 전에 함수를 호출하여도 함수가 정상적으로 실행됨
• 함수 표현식은 실행 흐름이 함수에 도달했을 때(함수가 정의된 이후)부터 해당 함수를 사용 가능
• 함수 선언문과 함수 표현식의 차이는 "문법 형태"와 "함수 호출 위치"로 크게 구분 가능

// 함수 선언문 기본
function sum(a, b) {
  return a + b;
}
// 함수 표현식 기본
let sum = function(a, b) {
  return a + b;
};

// 함수 선언문 활용
sayHi("John"); // Hello, John
function sayHi(name) {
  alert( `Hello, ${name}` );
}
// 함수 표현식 활용 : 함수가 정의된 이후 함수 호출 가능
sayHi("John"); // error : Uncaught ReferenceError: sayHi is not defined
let sayHi = function(name) {
  alert( `Hello, ${name}` );
};
sayHi("John"); // Hello, John -> 함수 표현식은 정의된 이후에는 사용 가능

2. 매개변수(parameter)

• 매개변수(parameter)를 전달하면 데이터(값)를 함수 안에 전달할 수 있음

//함수 예시1 : 파라미터 사용
function sayHello(name) {
  console.log( name +'님 안녕하세요!' );
}
sayHello("Jaewon") // Jaewon님 안녕하세요!
sayHello("Haezin") // Haezin님 안녕하세요!
//함수 예시2 : 파라미터 2개 사용(from, text) 
function sayHello(from, text) {
  console.log( from+' : ' + text );
}
sayHello("Jaewon", 'Hello!') // Jaewon : Hello!
sayHello("Haezin", 'What are you doing?') // Haezin : What are you doing?
//함수 예시3 : 파라미터 기본값(text = "no text given")
function showMessage(from, text = "no text given") {
  console.log( from + " : " + text );
}
showMessage("Ann"); // Ann: no text given
showMessage("Jaewon", "Where are you from?"); // Jaewon: Where are you from?
// 함수 예시4 : 파라미터를 obj로 전달
function changeName(obj) {
  obj.name = "coder";
}
const jaewon = { name: "jaewon" };
changeName(jaewon);
console.log(jaewon); // {name: "coder"}
// 함수 예시5 : 주어진 파라미터의 갯수가 정해져 있지 않을 때 -> ...args
// python *args처럼 여러가지 파라미터를 다 받을 수 있음
function printFoodAll(...args) {
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }
}
printFoodAll("kimchi", "bulgogi", "hambuger", "chicken", "pizza");
printFoodAll("soup", "kimbab", "bread");

// 함수안에 객체(plus, minus, multi, divide)로 함수 생성
// console.log로 할 경우, 호출했을 때 undefined 발생하기 때문에 return으로 반환
const calculator = {
  plus : function(num1, num2){
    return num1 + num2;
  },
  minus : function(num1,num2){
    return num1 - num2;
  },
  multi : function(num1, num2){
    return num1 * num2
  },
  divide : function(num1,num2){
    return num1 / num2
  }
}
// 함수 호출
const plus = calculator.plus(5,5);
const minus = calculator.minus(10,5);
const multi = calculator.multi(10,10);
const divide = calculator.divide(10,10);
console.log(plus);
console.log(minus);
console.log(multi);
console.log(divide);

3. 반환 값 : return

• return은 함수를 호출했을 때, 호출한 곳으로 함수의 결과 값을 전달해주기 위해 사용함
• console.log는 값을 출력만할 뿐 값을 전달하지 않기 때문에 undefined가 발생
• return은 함수 내 어디서든 사용할 수 있고, 함수 내에서 return을 만나면 호출한 곳에 값을 반환하고 즉시 함수를 종료시킴
• 함수를 호출한 장소에서 선언된 장소로 값을 전달하는 것이 파라미터라면, 함수가 선언된 장소에서 함수가 호출된 장소로 데이터를 전달하는 것이 return의 기능임

// return예시
function sum(a, b) {
  return a + b; // 👈 return : 함수를 선언된 곳으로 이 결과값을 전달
}
let result = sum(1, 2); // 👈 parameter : 함수를 선언한 내부로 이 값을 전달
console.log( result ); // 3 👈 return으로 전달되기 때문에 값이 출력 가능

4. 함수 이름 짓기

• 함수는 어떤 동작을 수행하기 위한 코드를 모아둔 것이기 때문에 함수의 이름은 보통 동사임
• 함수의 이름 또한 간결하고 명확해야하고, 함수가 어떤 동작을하는지 설명할 수 있어야 함
• 어떤 동작을하는지를 설명 가능한 동사를 접두어로 붙여 함수명를 짓는게 관습임
  🔍 "show..." : 무언가 보여주는 기능을하는 함수
  🔍 "get..." : 무언가 값을 반환함
  🔍 "calc..." : 무언가 계산함
  🔍 "create..." : 무언가 생성함
  🔍 "check..." : 무언가 확인하고 불린값을 반환함
  🔍 "handle..." : 무언가를 제어함
• 또한, 함수명은 속한 조직 구성원들과 합의된 접두어를 주로 사용하는 것을 권장함
• 함수 생성할 때는 한가지 기능한 수행할 수 있게 만드는 것을 지양하고, 여러 기능이 필요할 땐 함수의 기능을 쪼개서 여러 함수를 선언하는 것이 좋음

// 소수를 출력해주는 함수 : 소수검증 및 소수출력이 한 함수에서 기능하도록 선언했을 때
function showPrimes(n) {
  nextPrime: for (let i = 2; i < n; i++) {
    for (let j = 2; j < i; j++) {
      if (i % j == 0) continue nextPrime; // 레이블 사용
    }
    console.log( i ); // 소수
  }
}
showPrimes(10) // 2,3,5,7
// 소수를 출력해주는 함수 : 소수검증하는 함수와 소수출력하는 함수를 분리 했을 때
function showPrimes(n) {
  for (let i = 2; i < n; i++) {
    if (!isPrime(i)) continue;
    console.log(i);  // a prime
  }
}
function isPrime(n) {
  for (let i = 2; i < n; i++) {
    if ( n % i == 0) return false; // if문이 true이면 false를 반환
  }
  return true; 
}
showPrimes(10) // 2,3,5,7

5. 익명 함수

• 함수 명이 없이 함수를 담음 변수에 ()를 붙여 바로 호출 가능

const print = function () {
  console.log("print"); // anonymous function(익명 함수)
};
print(); //print
const printAgain = print; //다른 변수에 함수 할당
printAgain(); // print

6. 함수 복사

• 함수를 복사할 때 복사될 함수는 ()를 붙이지 않음
• ()를 있는 채로 새로운 변수에 함수를 담으면, 함수 자체가 아니라 호출 결과(반환값)이 저장됨

// 함수 복사
function sayHi() {   // (1) 함수 생성
  console.log( "Hello" );
}
let func = sayHi;    // (2) 함수 복사
func(); // Hello     // (3) 복사한 함수를 실행
sayHi(); // Hello    // (4) 본래 함수도 정상적으로 실행
//
// 함수 복사 : 잘못된 예
function sayBye(){
	console.log("Bye");
}
let sayBye2 = sayBye();
sayBye(); // Bye
sayBye2(); // 오류 발생 ⇢ Uncaught TypeError: sayBye2 is not a function

7. 콜백 함수(calledback function)

• 함수를 함수의 파라미터로 전달하고, 상황에 따라 인자로 전달된 함수를 "나중에 호출(called back)"하는 것
• 함수는 "동작"을 나타내는 값임(문자열이나 숫자 등 원시값들은 데이터를 나타냄)
• 동작을 대변하는 값인 함수를 파라미터로 전달하고, 동작이 필요할 때 이 값을 실행할 수 있음

// 콜백 함수
function randomQuiz(answer, printYes, printNo) {
  if (answer === "love you") {
    printYes();
  } else {
    printNo();
  }
}
const printYes = function () {
  console.log("Yes!");
}; // 익명함수 : printYes에 저장
const printNo = function () {
  console.log("No!");
}; // 익명함수 : printNo에 저장
randomQuiz("wrong", printYes, printNo); // No!
randomQuiz("love you", printYes, printNo); // Yes!

8. 화살표 함수(arrow function)

• 화살표 함수('=>')는 ES6에 추가된 문법으로 함수 표현식을 간결하게 만들어 줌
• arrow 함수는 항상 익명 함수임
• 화살표 함수 만드는 법 : 🔍 let 변수 = (함수 파라미터) => 함수 기능 코드;
• 함수에 전달한 파마리터가 1개 뿐이면 ()로 생략 가능
• 함수의 body가 1줄이라면, 스코프({}) 뿐아니라 return도 생략 가능
• 함수의 body가 2줄 이상이라면, {}를 명시해주고, 값을 전달하기 위해 return 입력

// arrow function type : always anonymous
// "function"과 "{}" 대신에 "=>"로 대체, return도 생략 가능
const arrowPrint = () => console.log("simplePrint!");
//
// 함수 표현식과 화살표 함수 비교
// 기본 함수 표현식(익명 함수)
const add = function (a, b) {
  return a + b;
};
// 화살표 함수
const add = (a, b) => a + b;
// 단, 본문이 여러줄이라면 {}를 넣고, return으로 결과값을 명시해줘야 함
// function만 안적어주면 됨
let sum = (a, b) => {
  let result = a + b;
  return result; // 중괄호를 사용했다면, return으로 결괏값을 반환해야 함
};
alert( sum(1, 2) ); // 3