화살표 함수

1. 일반적인 함수

function key(){
return 'abc123';
};

const key = () => {
return 'abc123';
};

const key = () => 'abc123';

 

2. 매개변수 2개 이상

function greet(first, last){
return `안녕하세요, ${capitalize(first)} ${capitalize(last)}님`;
};

const greet = (firts, last) => {
return `안녕하세요, ${capitalize(first)} ${capitalize(last)}님`;
};

const greet = (firts, last) => `안녕하세요, ${capitalize(first)} ${capitalize(last)}님`;

 

3. callback 함수

function capi(name){
return name[0].toUpperCase() + name.slice(1);
}

function app1(name, callback){
return callback(capi(name));
}

app1("abcde", function (name){
return `안녕, ${name}!`;
});

//"안녕, Abcde!"


//***화살표 함수로 변경하면
app1("abcde", name => `안녕, ${name}!`;);

 

4. 부분 적용 함수

const instructors = [
    {
        name: '짐',
        libraries: ['미디어교육정보 도서관']
    },
    {
        name: '새라',
        libraries: ['기념 도서관','문헌정보학 도서관']
    },
{
        name: '엘리엇',
        libraries: ['중앙 도서관']
    }
];

const findByLibrary = library => instructor => {
return instructor.libraries.includes(library);
};

const librarian = instructors.find(findByLibrary('미디어교육정보 도서관'));
//내부 함수에 요소를 주는 방식으로 쓸 수 있는게 아닐까?
//instructors.find(findByLibrary('미디어교육정보 도서관')(요소));

console.log(librarian);
/*
 {
	name: '짐',
	libraries: ['미디어교육정보 도서관']
 }
*/

 

5. 고차 함수 (다른 함수를 반환하는 함수)

- 매개 변수를 가둘 수 있다. (원래의 인수에 접근할 수 있게 해두고 함수 실행을 마칠 수 있다 / 함수의 의도를 명확하게 유지할 수 있다)

- 배열 메서드와 나머지 매개변수에 도움을 줄 수 있다.

//1. return 문자 사용
const first = discount => {
return price => {
return price * (1 - discount);
}
};

//2. return 제거
const first = discount => price => price * (1 - discount);

const second = first(0.1);
//first 함수가 첫번째 return 전까지 수행된다.

second(100);
//first로 discount(0.1)는 이미 설정되어 있고
//price(100)를 받아와 second 함수가 수행됨

 

- 두 개의 다른 매개변수 집합을 가진 단일 함수로 변환

const first = discount => price => price * (1 - discount);

first(0.1)(100);
//90

 

6. 부분 적용 함수

6.1 단일 책임 매개 변수 (중복되는 두개의 매개변수를 사용, 마지막 매개변수만 변경해서 쓸 수 있다)

- 여러 정보 정의

const school = {
hours: '8 a.m. - 8 p.m',
address: 'Seoul'
};

const manager = {
name: '홍길동',
phone: '010-1234-1234'
};

const program = {
name: 'Field day',
room : 'schoolyard',
hours : '2 - 6'
}

const exhibit = {
name: 'Graduation exhibitions',
contact: 'Olivia'
}

- 여러 정보를 가지고 하나의 정보로 만드는 함수

function mergeInfo(school, manager, event){
const {hours, address} = school;
const {name, phone} = manager;
const defaults = {
hours,
address,
constact: name,
phone
};

return {...defaults, ...event};
//겹치는 요소는 마지막에 선언한 것으로 덮어진다
//(event가 defaults보다 우선순위가 높은듯)
}

const programInfo = mergeInfo(school, manager, program);
const exhibitInfo = mergeInfo(school, manager, exhibit);

- 하나의 정보로 만든 함수를 고차 함수로 변경

function mergeInfo(school, manager){
const {hours, address} = school;
const {name, phone} = manager;
const defaults = {
hours,
address,
constact: name,
phone
};

return program => {
//겹치는 요소는 마지막에 선언한 것으로 덮어진다(event가 defaults보다 우선순위가 높은듯)
return {...defaults, ...event}
};
}

const programInfo = mergeInfo(school, manager)(program);
const exhibitInfo = mergeInfo(school, manager)(exhibit);

 

6.2 반환된 함수 재사용

- '원본'과 '결과값'을 배열 쌍으로 연결 => 인터페이스를 간결하게 유지해야 할 때 유용

const colors = getColors('banana','apple','peach');
//['yellow','red','pink']

//함수로 반환한 값을 다시 재사용?
const zip = (...first) => (...second) => {
return {first.map((item,i) => [item, second[i]]);
};

zip('banana','apple','peach')(...colors);
//[
// ["banana", "yellow"]
// ["apple", "red"]
// ["peach", "pink
//]

 

6.3 반복함수 저장하여 새로운 함수로 호출해 사용

- 매개변수를 나눠서 먼저할당할 것과 나중에 할당할 것을 설정할 수 있는듯.

function mergeInfo(school, manager){
const {hours, address} = school;
const {name, phone} = manager;
const defaults = {
hours,
address,
constact: name,
phone
};

return program => {
//겹치는 요소는 마지막에 선언한 것으로 덮어진다(event가 defaults보다 우선순위가 높은듯)
return {...defaults, ...event}
};
}

const setMerge = mergeInfo(school, manager);
const programInfo = setMerge(program);
const exhibitInfo = setMerge(exhibit);

 

6.4 매개변수로 함수 넣어서 사용하기

- filter 안에 함수를 밖에서 제어할 수 있고, 유효범위도 제어 가능

const dog = [
{
이름: '미미',
무게: 10,
견종: '사냥개',
지역: '서울',
색상: '검정색'
},
{
이름: '보보',
무게: 90,
견종: '말티즈',
지역: '부산',
색상: '흰색'
},
{
이름: '바바',
무게: 40,
견종: '말티즈',
지역: '대구',
색상: '갈색'
}
]

function getDogNames(dogs, filterFunc){
return dogs.filter(filterFunc).map(dog => dog["이름"])
}

const weightCheck = weight => dog => dog["무게"] < weight;

getDogNames(dog, weightCheck(20));
//["미미"]

 

7. 커링함수

- 인수가 하나만 있어야 하는 함수를 작성할 때 좋다.

7.1 특정 조건을 입력하여 name을 출력

const dog = [
{
이름: '미미',
무게: 10,
견종: '사냥개',
지역: '서울',
색상: '검정색'
},
{
이름: '보보',
무게: 90,
견종: '말티즈',
지역: '부산',
색상: '흰색'
},
{
이름: '바바',
무게: 40,
견종: '말티즈',
지역: '대구',
색상: '갈색'
}
]

function getDogNames(dogs, filterFunc){
return dogs.filter(filterFunc).map(dog => dog["이름"])
}

const identity = field => value => dog => dog[field] == value;
const colorCheck = identity('색상');
const stateCheck = identity('지역');

getDogNames(dog, colorCheck('흰색'));
//["보보"]
getDogNames(dog, stateCheck('부산'));
//["보보"]

7.2 모든 조건을 충족하거나 하나만 충족하여 name 출력

const dog = [
  {
    이름: "미미",
    무게: 10,
    견종: "사냥개",
    지역: "서울",
    색상: "검정색",
  },
  {
    이름: "보보",
    무게: 90,
    견종: "말티즈",
    지역: "부산",
    색상: "흰색",
  },
  {
    이름: "바바",
    무게: 40,
    견종: "말티즈",
    지역: "대구",
    색상: "갈색",
  },
];

const identity = field => value => dog => dog[field] == value;

const colorCheck = identity("색상"); //제일 먼저 수행됨, field까지만 넣어줌
const stateCheck = identity("지역"); //colorCheck 다음으로 수행됨, field까지만 넣어줌

function allFilters(dogs, ...checks) { //다음 형태로 두개의 함수가 들어옴 /* (dog) => {...} */
  return dogs
    .filter(dog => checks.every(check => check(dog)))
    //dog를 하나씩 가져와서 checks 안에 들어있는 함수를 하나씩 수행한다.
    //colorCeck 먼저 수행하고 조건에 맞으면 stateCheck를 수행
    //colorCheck 조건에 안맞으면 다음 dog를 가져오고 stateCheck는 넘어간다.  
    .map((dog) => dog["이름"]);
}

allFilters(dog, colorCheck("흰색"), stateCheck("부산"));
// 왼쪽에서 부터 함수 차례대로 identity를 수행하면서 value까지만 넣어줌

function anyFilters(dogs, ...checks) { //다음 형태로 두개의 함수가 들어옴 /* (dog) => {...} */
  return dogs
    .filter(dog => checks.some(check => check(dog)))
    //colorCheck 맞으면 다음 dog를 가져온다.
    //colorCheck 안맞으면 stateCheck를 한다.
    .map((dog) => dog["이름"]);
}

allFilters(dog, colorCheck("검정색"), stateCheck("대구"));
//['미미','바바']