*익명 함수
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' };
}