함수

*익명 함수

function ( ) { }

---

*선언적 함수

- 함수 선언문 : function 함수 ( ) { }

 - 함수 표현식 let 함수 = function ( ) {  };

---

*화살표 함수 

: function 키워드 대신 화살표 (=>)를 사용.

 

->

1)

(매개변수) => {

}

2)(매개변수)=> 리턴값

*this 키워드가 지칭하는 대상이 다른 미세한 차이가 있음. (객체에서 확인 가능)

---

*매개 변수 

 : 함수를 호출할 떄 괄호 안에 넣는 것.

*리턴값

 : 함수의 최종 결과

 

-> function 함수 ( 매개변수, 매개변수, 매개변수 ) {

       문장

       문장

       return 리턴값

  }

---

*숫자를 계산해서 출력하는 일반적인 경우

 

-> function 함수 ( 매개변수 ) {

      let output = 초깃값

      처리한다

       return output

  }

---

*나머지 매개변수

: 함수를 호출할 때 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수라고 함.

  이러한 함수를 구현할 떄는 나머지 매개변수라는 형태의 문법을 사용. (배열로 받음)

->function 함수명 ( ... 나머지 매개변수) { }

 

 

*나머지 매개변수와 일반 매개변수 조합

->function 함수명 ( 매개변수, 매개변수, ... 나머지 매개변수) { }

 

---

*전개연산자

: 배열을 전개해서 함수의 매개변수로 전달해주는 것.

( 전개 연산자를 사용하지 않은 경우에는 배열이 매개변수로 들어오고, 전개연산자를 사용한 경우에는 숫자가 하나하나 전개되어 매개변수로 들어옴.)

 

-> 함수 이름 (...배열)

 

 ex)

function smaple(...item) {
 console.log ( items)
}
const array = [ 1,2,3,4 ]

 

sample(array)        -> [Array(4)]

sample(...array)     -> [1,2,3,4]

 

 

---

 

*기본 매개변수

: 매개변수에 기본값을 지정하는 것.

 

-> 함수이름 (매개변수, 매개변수=기본값, 매개변수 =기본값)

 

 

---

*콜백함수

: 함수도 하나의 자료형이므로 매개변수로 전달 가능.

 

ex)

function callBackThreeTimes (callback) {
 for ( let i =0 ; i < 3 ; i++ ) {
  callback( i )
  }
}
 callBackThreeTimes ( function ( i ) {
  console.log (`{ i }번째 함수 호출`)
} )

 

-> 실행결과

 0번째 함수 호출

1번째 함수 호출

3번째 함수 호출

 

*고차함수

ex)

// 콜백함수
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

// 전달된 action은 콜백함수이다.
// 전달될 당시에 함수를 바로 호출해서 반환된 값을 전달하는 것이 아니라
// 함수를 가리키고 있는 함수의 레퍼런스(참조값)가 전달된다.
// 그래서 함수는 고차함수안에서 필요한 순간에 호출이 나중에 됨
function calculator(a, b, action) {
  if (a < 0 || b < 0) {
    return;
  }
  let result = action(a, b);
  console.log(result);
  return result;
}

calculator(1, 1, add);
calculator(1, 2, multiply);

---

*콜백함수를 사용하는 함수 

 

forEach ( ) , map( ), filter ( ) 등

https://jsp0422.tistory.com/21

 

---

*메소드 체이닝

: 어떤 메소드가 리턴하는 값을 기반으로해서 함수를 줄줄이 사용하는 것.

 

ex)

let numbers = [ 0,1,2,3,4,5,6,7,8,9 ]
numbers
  .filter ((value)=>value %2===0)
  .map ((value) => value*value)
  .forEach ((value)=>{
    console.log(value)
});

 

실행 결과

0

4

16

36

64

 

---

*즉시 호출 함수 (IIFE) -> 프론트 함수에서 아주 가끔 사용됨.

 

 

---

*Immutability (불변성)

 

함수 내부에서 외부로부터 주어진 인자(오브젝트)의 값을 변경하는 것은 좋지 않음. 

상태 변경이 필요한 경우에는, 새로운 상태를 (오브젝트, 값) 만들어서 반환해야 함.

(원시값 - 값에 의한 복사 / 객체값 - 참조에 의한 복사(메모리 주소))

 

function display(num) {
  num = 5; // ❌
  console.log(num);
}
const value = 4;
display(value);
console.log(value);

function displayObj(obj) {
  obj.name = 'aplle'; // ❌❌❌❌❌❌ 외부로 부터 주어진 인자(오브젝트)를 내부에서 변경 ❌
  console.log(obj);
}
const banana = { name: 'banana' };
displayObj(banana);
console.log(banana);

function changeName(obj) {
  return { ...obj, name: 'Bob' };
}