🎈 JavaScript function

🤍 function

✔ 함수의 선언 2가지 방법이 용도가 다르다!

1. 함수 선언식

function 함수명(매개변수1, 매개변수2 ..){
	함수가 호출되었을 때 실행할 문장;
        ...
        return 값;
    }
//호출할때
함수명(값1, 값2, 값3);

2. 함수 표현식

let 변수명 = function(매개변수1, 매개변수2 ..){
    함수가 호출되었을 때 실행할 문장;
    ...
    return 값;
	}
//호출할때
변수명(값1, 값2 ..);

두가지 방법의 차이점을 알고싶다면 호이스팅게시물을 확인하세요!

✔ 화살표 함수: 더 간결한 문법!

• ECMA Script6에 추가된 문법입니다.
• function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현할 수 있습니다.
• 화살표 함수는 항상 익명함수입니다.
• 표현방법

  const 함수이름 = (매개변수1, 매개변수2..) =>{
      함수가 호출되었을 때 실행할 문장;
      ...
      return 값;
  }

✔ 함수 작성 팁: 조건이 맞지 않는 경우 함수 도입부분에서 함수를 미리 종료!

• return은 값을 전달하는 것 뿐만 아니라 더이상 밑으로 내려가지않고 함수 종료하는 기능이 있습니다.
• return; 이라고 하게되면 undefined를 리턴하여 값이 출력되지 않습니다.

function print(num){
    if(num<0){
        return;     
    }
    console.log(num);
}
print(10)

✔ 함수의 매개변수의 기본값은 무조건 undefined임을 주의!

매개변수에 아무값도 넣지 않는다면, undefined로 적용 됩니다.

function total(num1,num2){
    console.log(num1);
    console.log(num2);
    return num1 + num2;
}
total();    //num1: undefined   num2: undefined

만약 undefined로 정의 되는 것이 싫다면 default값을 설정 해둘 수 있습니다.

function total2(num1=0,num2=0){
    console.log(num1);
    console.log(num2);
    return num1 + num2;
}
total2();   //num1: 0     num2: 0

✔ 콜백함수 (callback function): 매개변수안에 함수를 넣는다면?

• 프로그래밍에서 콜백(callback) 또는 콜백 함수는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말합니다.

• 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있습니다.
  콜백함수

• (ex)

const calc_add = (a,b) => a + b;
const calc_multifly = (a,b) => a * b;

function calculator(num1, num2, action){
    //방어코드: 원하지 않는 결과가 나오는 것을 방지
    if(num1 < 0 || num2 < 0){
        return;
    }
    const result = action(num1,num2);
    console.log(result);
    return result;
}
calculator(4, 2, calc_add);     //calculator쪽으로 calc_add 메모리 주소를 보낸다.
calculator(4, 2, calc_multifly);

여기서 action이 아닌 다름이름을 써도 상관없습니다!

✔ 원시값과 객체값을 생각하며 코드를 짜자!

• 원시값: 값에 의한 복사

• 객체값: 참조에 의한 복사(메모리 주소)

• 함수를 만들때 객체값을 바꾸지 않도록 주의해야합니다.

• (ex)

  function display(num){
    num = 10;
    console.log(num);
  }
  const value = 5;
  display(value);     // 10  값에 의한 복사
  console.log(value); // 5
  // 상수value값의 변화는 없습니다.
  
  function displayObj(obj){
      obj.age = 12;    //❗❗❗ 주의 ❗❗❗
      console.log(obj);
  }
  
  const dog = {name:'루시', age:13};   
  displayObj(dog);    //{ name: '루시', age: 12 }
  console.log(dog);   //{ name: '루시', age: 12 }
  // dog의 property가 영구적으로 변하게 됩니다.
  // 오브젝트를 복사해서 값을 바꾸고싶다면 다음과 같이 return값을 이용하면 좋습니다.
  function changeAge(obj){
    return { ...obj, age: 16}; 
  }
  dog2 = changeAge(dog);
  console.log(dog2)   //{ name: '루시', age: 16 }