[JS] 함수 function

📌 함수?

📍기능을 한다.
📍여러줄의 코드를 재사용하기 위해서 사용한다.

✏️ 그중에 이미 만들어진 함수:

console.log
alert
confirm
...등등

📍함수의 정의

세가지를 정의한다
1. 인자(Argument)를 몇개 쓸수 있는지 정의한다
✏️ 함수를 정의할 떄 매개변수(parameter)를 사용하면 함수를 사용하는 사람이 소괄호() 안에 쓴 인자가 매개변수에 각각 순서대로 대입이 된다
✏️ 함수를 만드는 입장에서 특정 값을 정할수 없고 함수를 사용하는 사람이 정할수만 있을떄 매개변수(parameter)를 통해 값을 전달받는 것이다
ex) 경고 메세지(논리적으로)

2.함수가 어떻게 동작하는지 정의한다
✏️ 중괄호(body) 안쪽에 코드가 위에서부터 차례로 실행한다

3.함수실행 결과 값이 무엇이 되는지를 정의한다
✏️ return 값; 을 통해 함수 실행 결과를 값으로 되돌려준다.
✏️ 함수 실행 결과는 return 옆에있는 값이 되므로 치환해서 해석하면 된다
✏️ return 이 생략되거나 return 옆에 값이 없으면 함수 실행 결과는 모두 undefined 가 된다

✏️ 함수 실행결과를 추가적으로 연산하거나 구분해서 사용해야 할때

ex) prompt함수 
let myName = prompt('hihi);
console.log(myName);

// alert 함수는 return 이 없음
let res = alert('경고');
console.log(res);
//출력값 undefined

1. 일반적 함수 정의(과거사용)

function 함수이름 () {
   코드 ...
}

✏️ 함수호출연산자 () 를 사용하여 함수를 실행한다.

//함수 정의 (test 함수)
function test() {
   console.log('안녕하세요');
   console.log('반갑습니다');
}

//함수 실행
test();
//출력값은
//안녕하세요
//반갑습니다

✏️ 함수예시.

//안녕하세요 출력 강수지 출력 반갑습니다 출력
function printName() {
    console.log('안녕하세요');
    console.log('강수지');
    console.log('반갑습니다');
}
printName();
//출력값은
//안녕하세요
//강수지
//반갑습니다

📍이름을 여러가지로 다르게 쓰고싶을떄.

📍매개변수(parameter)1개

function printName(a) {
    console.log('안녕하세요');
    console.log(a);
    console.log('반갑습니다');
}

printName('강수지');
printName('김철수');
printName('홍길동');
//출력값은

//안녕하세요
//강수지
//반갑습니다

//안녕하세요
//김철수
//반갑습니다

//안녕하세요
//홍길동
//반갑습니다

📍메개변수(parameter) 2개도 사용가능

//a라는 변수에는 이름
//b라는 변수에는 나이
function printName(a, b) {
    console.log('안녕하세요');
    console.log(`${a}님 의 나이는 ${b}입니다`);
    console.log('반갑습니다');
}

printName('강수지', 20);
printName('김철수', 50);
printName('홍길동', 30);

//출력값

//안녕하세요 
//강수지님 의 나이는 20입니다
//반갑습니다

//안녕하세요 
//김철수님 의 나이는 50입니다
//반갑습니다

//안녕하세요 
//홍길동님 의 나이는 20입니다
//반갑습니다

//함수 실행 결과를 값으로 받아오자
function f1(x) {
    2 * x + 1;
    return '강수지';
}
console.log(f1(5));
//출력값 : 강수지

//함수 실행 결과를 값으로 받아오자
function f1(x) {
   return 2 * x + 1;
}
console.log(f1(5));
//출력값 : 11

✏️ 다른예시

function 함수이름 (매개변수, 매개변수, ...) {
   코드 ...
   return 값;
}

✏️ 다른예시

function f2(x){
    return x * 3 + 3;
  }
  
  function f3(x){
    x * 3 + 3;
    return undefined;
  }
  
  let res1 = f2(3);
  let res2 = f3(3);

  //배열은 object타입 中 array타입
  // 함수도 객체 object 타입
  // 중에서도 function 타입
  let res3 = f2;
  console.log(res3);

📌 익명함수(Anonymous function)(이름이 없는 함수)

이름이 존재하지 않는 함수 : 다시쓰지 않겠다
일회성으로 사용하고 버리는 함수

function (매개변수, 매개변수..){
  코드
  코드
  코드
  ...
 }

📍전통적인 방식의 함수(옛날에 많이 사용) : 이름이 중복됬을때 오류로 표현해주지 않는다 (그래서 사용하지않음)

function printName(a) {
    console.log('안녕하세요');
    console.log(a);
    console.log('반갑습니다');
}
printName('강수지');
//출력값: 안녕하세요 강수지 반갑습니다

✏️이름없는 함수, 바로 실행

(function (a) {
    console.log('안녕하세요');
    console.log(a);
    console.log('반갑습니다');
})('김철수');

//보통이렇게는 사용안함.왜냐면 그러면 함수를 쓰는 의미가 없기 때문. 
//바로쓰고 부르고 할필요없음
//그렇기 때문에 다음과 같은 방법을 사용.

✏️이름없는 함수는 변수에 저장해놓고 사용

let tmp = function (a) {
    console.log('안녕하세요');
    console.log(a);
    console.log('반갑습니다');
}
tmp('홍길동');

📍1. 익명함수를 변수에 담아놓고 사용.

const 변수 = function (매개변수, ...){
    코드
    코드
    코드
    return 값;
}

ES6 새로운 버전

📍2. 화살표표현식 (Arrow Function)을 통한 익명함수 2가지 예시

매개변수가 한개라면 소괄호()가 생략 가능하다
body 안쪽의 코드가 한줄이라면 중괄호{}와 return이 생략 가능하다.

✏️예시

 function f1(a){
    console.log(a,'님 안녕하세요'); 
 }
//f1생략가능
 function (a){
    console.log(a,'님 안녕하세요'); 
 }
//function생략가능
  (a)=>{
    console.log(a,'님 안녕하세요'); 
 }
//중괄호, 소괄호생략가능 
 a=> console.log(a, '님 안녕하세요');

(매개변수, 매개변수 ...) => {
    코드
    코드
    return 값;
}

✏️ 화살표 표현식 익명함수

((a) => {
    console.log('안녕하세요');
    console.log(a);
    console.log('반갑습니다');
}) ('박영희');
//다른예제 변수놓고
let tmp2 = (a)=>{
    console.log('안녕하세요');
    console.log(a);
    console.log('반갑습니다');
}

🌟객체 속에 함수가 들어있을 수 있다. (객체는 여러개의 값을 저장하기위해서 사용)

// 150 값과 '강수지' 값과 🌟함수를 저장하겠다
let person = {
    age: 150,
    title: '강수지',
    f: () => console.log('안녕하세요')
}
console.log(person.age);//출력값 150
console.log(person.title);//출력값 강수지
person.f(); //출력값 안녕하세요

❗️생성자함수(constructor function), 객체를 생성해주는 함수 this

this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

👉 예시

// 책 제목, 가격, 저자
function Book(a, b, c) {
    this.price = a;
    this.title = b;
    this.author = c;
}

❗️new 생성자() --> 객체(object)가 만들어진다

new키워드로 함수를 실행하는 방식이다.
new라는 키워드를 이용해 함수를 호출 시, 새롭게 생겨난 빈 객체를 반환한다.

let b1 = new Book(100, '홍길동전', '미상');
console.log(b1);
console.log(typeof b1); //출력값 object

*결과값

✏️날짜 객체

// 년도, 월, 일, 요일, 시, 분, 초
//'2023-07-14'
let day =new Date();
let day =new Date('2023-07-14');
console.log(day);
console.log(day.getDate());
console.log(day.getDay());