[JavaScript] function(함수) 란?

함수 란?

1. 함수의 정의
   - 함수는 다수의 명령문을 코드 블록으로 감싸고, 하나의 실행 단위로 만든 코드의 집합입니다.
   - 함수는 '함수 정의'와 '함수 호출' 부분으로 구성되어 있습니다.
   - 동작 흐름은 input -> function -> output 으로 작동합니다.

2. 권장 사항
   - 1개의 함수는 가급적 1가지의 일만 해야합니다.
   - 함수의 매개 변수는 최대 3개 이내로 사용하는 것을 권장합니다.
   
   

함수 정의 & 함수 호출

1. 함수 선언문

test(10, 20); // (선언 전)함수호출가능

function test(x, y) {
  console.log('hi');
  return x + y;
};

test(10, 20); // (선언 후)함수호출가능

2. 기명 함수 표현식

const test = function check(msg) {
  if (msg) console.log(msg);
  else check('check'); // 함수 표현식 내부에서 자기 자신을 호출할 수 있다
};

// (선언 후)함수호출가능
test('test'); // test
test(); // check

3. 익명 함수 표현식

const test = function (msg) {
  console.log(msg);
};

// (선언 후)함수호출가능
test('test'); // test

4. 화살표함수

const test1 = () => {}; // 기본 형태
const test2 = () => { return 0 };
const test3 = (x, y) => { return x + y };

const test4 = (x, y) => x + y; // return값만 반환하는 것이면 {중괄호} 생략가능
const test5 = (x, y) => (x + y); // 반환하는 곳에 1가지만 넣으면, 안의 내용은 return값(이때, return 생략가능), 함수호출, 콘솔 다 가능
const test6 = (x, y) => (test2());
const test7 = (x, y) => (console.log('hi'));

const test8 = x => { return x }; // 매개변수가 1개면 (괄호)생략가능.

5. 메소드 (method는 객체 안 함수)

• 기본 형태

function hello() {
  console.log('hello');
};

const test = {
  check1: function (x, y) { return x + y },
  check2: (x, y) => { return x + y },
  check3(x, y) {
    return x + y
  },
  check4: hello, // 1번) value값으로 함수를 넣을때는, hello()으로 하면 절대안된다. 그러면 hello()함수가 호출되는걸로 인지한다.
};

test.check4(); // 2번) 그러나, 실행시킬때는 test.check4만 쓰면 호출이 안된다. 꼭 (괄호)를 붙여줘야한다.

• 메소드 with this

// this와 함께 예시 1
const me = {
  name: "chloe",
  age: 28,
  introduce() {
    return `Hi my name is ${this.name}.`; // 2번) me의 다른 키값들을 사용할 수 있다
  },
};

me.introduce(); // 1번) 실행은 항상 (괄호)와 함께

// this와 함께 예시2
const korean = {
  name: "김무명"
};

const english = {
  name: "chloemin"
};

function introduce() {
  return console.log(`Hi. I'm ${this.name}.`);
};

korean.sayhi = introduce; // 1번) introduce라는 함수를 넣을때는 절대 옆에 (괄호)를 붙이면 안된다!
english.sayhi = introduce;

korean.sayhi(); // Hi. I'm 김무명. // 2번) 실행시키고 싶으면 키값옆에 꼭 (괄호)를 붙여줘야한다!
english.sayhi(); // Hi. I'm chloemin.

6. 생성자함수 (붕어빵 틀에 각각 팥, 슈크림, 피자 넣고 붕어빵 만들기)

• 기본 규칙 (2가지)
  - function의 식별자는 '파스칼 케이스'로 작성해야합니다.
  - 생성자함수를 사용할 때는 'new + 식별자'로 작성해야합니다.

• 기본 예시

function Person(name, age, gender) {
  this.name = name; // 이때 this는 생성될 인스턴스. 즉, Chloe와 John.
  this.age = age;
  this.gender = gender;

  this.introduce1 = function() { // 내부에서 바로 할당할때는, key에서 this를 받고있기때문에, 화살표함수를 사용해도 결과가 잘나온다.
    return `Hi, My name is ${this.name}. I'm ${this.age}.`;
  };

  this.introduce2 = () => { // 화살표함수 ver
    return `Hi, My name is ${this.name}. I'm ${this.age}.`;
  };
};

// new 라는 키워드를 통해서 생성자 함수로 실행한 결과가 할당된 변수를, 생성자 함수의 인스턴스라고 부른다.
const Chloe = new Person("chloe", "28", "female"); // 즉, 여기서는 Chloe와 John이 인스턴스.
const John = new Person("john", "40", "male");
console.log(Chloe); // Person { name: 'chloe', age: '28', gender: 'female' }
console.log(John); // Person { name: 'john', age: '40', gender: 'male' }

console.log(Chloe.introduce1()); // Hi, My name is chloe. I'm 28.

7. 함수 호출 방법
   - 반드시 함수를 호출해야 함수가 실행됩니다. 선언만 하면 작동하지 않습니다.

test(10, 20); // 실행만 시켜준다
console.log(test(10, 20)); // 실행 + 콘솔로 찍어준다

8. 또 다른 함수호출 방법

function test({ name, age, gender }) { // 3번) 2번에서 호출과 동시에 넘겨온 매개변수를 사용할 수 있다
  console.log(name, age, gender); // chloe 28 female
  return 0;
};

const check = test({ // 2번) test가 호출되면서
  name: "chloe",
  age: 28,
  gender: "female"
});

check; // 1번) check로 호출하면, (호출 방법이 일반적인 함수호출과 다르니 주의!)

매개변수

1. 매개변수 란?
   - 매개변수는 함수 호출시에 전달받은 인수를, 함수 정의에서 함수 내부로 전달하기 위해 사용하는 변수입니다.
   - 인수는 함수 호출시에 함수로 전달해주는 값 입니다.
   - 자바스크립트에서 함수는 매개변수의 갯수와 인수의 갯수가 일치하지 않아도 오류가 발생하지 않습니다.
   - 단, 인수에서 값을 넘겨받지 못한 매개변수는 undefined 값이 할당됩니다. (이를 방지하기 위해서 기본값을 셋팅해줄 수 있습니다)

2. 매개변수 유, 무 (+ 기본값)

// 매개변수 유
function test1(x, y) { // (매개변수1, 매개변수2)
  console.log(x + y); // 300
};
test1(100, 200); // (인수1, 인수2)

// 매개변수 무
function test2() { // {}안에서 사용할 매개변수가 없다면 -> (매개변수)자리를 ()로 비워두면된다.
  console.log('안녕'); // 안녕
};
test2();

// 매개변수 기본값 유
function test(x, y = 0, z = '안녕') { // 2번) 넣지않은 매개변수에 기본값을 셋팅해놓을 수 있다 // 5번) 기본값은 신경쓰지 않고
  console.log(x + y); // 3번) 이 경우에는 결과가 100 // 6번) 넣어준 값으로 작동을 한다. 결과가 300.
  console.log(z); // 안녕 // HI
};

test(100); // 1번) 매개변수의 갯수 > 인수의 갯수 일때,
test(100, 200, 'HI'); // 4번) 그러나 기본값을 셋팅한 매개변수에 값을 넘겨주면

// 매개변수 기본값 무
function test(x, y) { // 2번) 넣지않은 매개변수에 기본값을 셋팅하지 않았는다면,
  console.log(y); // 3번) undefined 값이 들어오고,
  console.log(x + y); // 4번) 이 경우에는 100 + undefined 이기 때문에, 결과가 NaN.
};

test(100); // 1번) 매개변수의 갯수 > 인수의 갯수 일때,

3. 나머지 매개변수 (...식별자)
   - 마지막 매개변수만, 나머지 매개변수로 설정할 수 있습니다.
   - 나머지 매개변수는 배열로 묶입니다.

function test(a, b, ...check) {
  console.log(a); // one
  console.log(b); // two
  console.log(check); // [ 'three', 'four', 'five', 'six' ]
};

test("one", "two", "three", "four", "five", "six");

함수와 return

1. return
   - 함수 안에서 return 문을 만나면, 해당 함수는 실행을 종료합니다.
   - 이때, return 값은 함수 호출 지점으로 반환됩니다.
   - return 문을 작성하지 않으면, 해당 함수의 return 값은 undefined 가 됩니다.

2. 해당 함수를 완전히 나가는 경우

// 1. function - return;
function hello1() {
  return 'hello1';
};

// 2. function - for문 - return;
function hello2() {
  for(let i = 0; i < 5; i++) {
    console.log(i); // i가 0일때, 한 번만 출력하고
    return i; // 바로 리턴된다
  };

  console.log('hello2'); // 이때, 위에서 함수가 종료되기 때문에, hello2는 출력되지 X
};

// 3. function - for문 - if문 - return;
function hello3() {
  for(let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3 까지 출력하고
    if (2 < i) return i; // i가 3일때, 리턴된다
  };

  console.log('hello3'); // 이때, 위에서 함수가 종료되기 때문에, hello3은 출력되지 X
};

const test1 = hello1(); // hello1
const test2 = hello2(); // 0
const test3 = hello3(); // 3

3. 변수 = 함수()

function test() { // 2번) 그 안에서 함수가 실행되면서
  return "test"; // 3번) return 문으로 반환한 값을
};

const check = test(); // 1번) 함수호출을 변수에 담으면 // 4번) 변수에 넣어준다

console.log(check); // test // 5번) 즉, check 변수에는 "test"가 담겨있고
console.log(typeof check); // string // 6번) 타입이 string이 된다