정보실

웹학교

정보실

javascript JavaScript의 일급 함수

본문

소개 


JavaScript에는 일급 함수가 있습니다. 이것은 함수가 다른 값처럼 취급 될 수 있음을 의미하며, 이는 JavaScript 개발자로서 발전함에 따라 이해해야 할 매우 중요한 행동으로 판명되었습니다. 다음 세 가지 글 머리 기호는 중요한 일급 함수 동작을 나타냅니다.

  • 변수에 함수를 할당 할 수 있습니다
  • 함수는 다른 함수에 인수로 전달 될 수 있습니다
  • 다른 함수에서 함수를 반환 할 수 있습니다

기본 예제를 사용하여 이 글 머리 기호 각각을 살펴본 다음 좀 더 복잡한 실제 예제를 사용하여 끝까지 모두 모아 봅시다.


https://nick.scialli.me/first-class-functions-in-javascript/ 


변수에 함수 할당 


텍스트 "Hello"를 반환하는 함수를 만든 다음 sayHello라는 이름의 변수에 해당 함수를 할당하겠습니다.


const sayHello = () => {
  return 'Hello';
};

console.log(sayHello());
// "Hello"


인수로 함수 전달 


위에서 언급 한 sayHello 함수를 다른 함수의 인수로 전달해 봅시다. 이 다른 기능은 특정 사람에게 인사합니다.


const sayHelloToPerson = (greeter, person) => {
  return greeter() + ' ' + person;
};

console.log(sayHelloToPerson(sayHello, 'John'));
// Hello John

sayHello 함수를 sayHelloToPerson에 전달할 때 발생하는 상황에 대한 간단한 설명 : sayHelloToPerson 함수 내에서 변수 greeter는 메모리의 sayHello 함수를 가리킵니다. greeter()를 호출하면 함수가 호출됩니다!


참고 :이 경우 일반적으로 템플릿 리터럴을 사용하지만 (예 :return `${greeter()} ${person}`) 이 예제에서는 템플릿 리터럴 구문을 사용하여 물을 흐릿하게 만들지 않았습니다!


다른 함수에서 함수 반환 


어쩌면 우리는 항상 "안녕하세요"라고 말하고 싶지 않고 오히려 다양한 유형의 인사말을 선택하기를 원할 것입니다. 인사말 함수을 만들 수 있는 함수을 사용하겠습니다.


const greeterMaker = greeting => {
  return person => {
    return greeting + ' ' + person;
  };
};

const sayHelloToPerson = greeterMaker('Hello');
const sayHowdyToPerson = greeterMaker('Howdy');

console.log(sayHelloToPerson('Joanne'));
// "Hello Joanne"

console.log(sayHowdyToPerson('Joanne'));
// "Howdy Joanne"


재미있는 실제 사용 사례 


일급 함수의 기본 사항을 확인 했으므로 실제 사용 사례를 살펴 보겠습니다.


객체 검증 


아마도 당신은 객체 (예를 들어, 새로운 사용자 정보)가 “유효한” 것으로 간주되어야 하는 많은 기준을 가지고 있을 것입니다. 우리의 모든 기준을 반복하고 객체가 유효한지 아닌지를 반환하는 함수를 만들어 봅시다.


const usernameLongEnough = obj => {
  return obj.username.length >= 5;
};

const passwordsMatch = obj => {
  return obj.password === obj.confirmPassword;
};

const objectIsValid = (obj, ...funcs) => {
  for (let i = 0; i < funcs.length; i++) {
    if (funcs[i](obj) === false) {
      return false;
    }
  }

  return true;
};

const obj1 = {
  username: 'abc123',
  password: 'foobar',
  confirmPassword: 'foobar',
};

const obj1Valid = objectIsValid(obj1, usernameLongEnough, passwordsMatch);
console.log(obj1Valid);
// true

const obj2 = {
  username: 'joe555',
  password: 'foobar',
  confirmPassword: 'oops',
};

const obj2Valid = objectIsValid(obj2, usernameLongEnough, passwordsMatch);
console.log(obj2Valid);
// false

JavaScript를 처음 접하는 사람이라면 진행 상황을 이해하기 위해 몇 가지 독해가 필요할 수 있지만, 일단 믿으면 보상이 큰 것입니다!


참고 : 나머지 연산자 (...)에 익숙하지 않은 경우 함수에 제공된 나머지 모든 인수를 지정된 이름으로 배열에 넣을 수 있습니다.


API 키 Closure


API 키를 사용하여 API에 연결하려는 상황이 있을 수 있습니다. 모든 요청에 이 키를 추가하거나 API 키 매개 변수를 사용하고 각 요청마다 API 키가 포함 된 함수를 리턴 하는 함수를 작성할 수 있습니다.


중요 : 비밀 API 키를 프런트 엔드 코드에 넣지 마십시오. 대신 다음 코드가 노드 기반 백엔드에 있다고 가정하십시오.


const apiConnect = apiKey => {
  const getData = route => {
    return axios.get(`${route}?key=${apiKey}`);
  };

  const postData = (route, params) => {
    return axios.post(route, {
      body: JSON.stringify(params),
      headers: {
        Authorization: `Bearer ${apiKey}`,
      },
    });
  };

  return { getData, postData };
};

const api = apiConnect('my-secret-key');

// No need to include the apiKey anymore
api.getData('http://www.example.com/get-endpoint');
api.postData('http://www.example.com/post-endpoint', { name: 'Joe' });


결론 


다행스럽게도 이제 JavaScript의 함수가 진정한 일류이며 JavaScript 개발 경력에 중요한 함수가 될 수 있기를 바랍니다. 코드에서 함수를 사용하는 모든 종류의 방법을 연습하는 것이 좋습니다!





페이지 정보

조회 46회 ]  작성일19-08-13 11:03

웹학교