JavaScript 함수 개요

howtocodejs에 접근합니다.com 예시와 함께 코드 작성
우리는 하루 종일 함수와 그 용법에 대해 시학 연구를 진행할 수 있다.반대로 기능성 있는 생활을 탐색해 보자.

기능 없는 생활

let pets = 35;
let owners = 15;
let petsPerOwner = pets / owners;
//======Pet Info Form
let answer = prompt("how many pets do you have?");
//============
 // update based on answer, add new owner
pets += answer / 1; //  coerce string into number
owners += 1; // register new owner
petsPerOwner = pets / owners;

//test
`There are now ${petsPerOwner} pets per owner at Pet Nirvana `;

이것은 이것보다 읽기 쉽습니까?

기능적 생활

let pets = 35;
let owners = 15;
let petsPerOwner = average(pets, owners);
let answer = prompt("how many pets do you have?");

registerPets(answer);
registerOwner();
updateAvg(); // update based on answer, add new owner
console.log(`There are now ${petsPerOwner} pets per owner at Pet Nirvana `);


function average(total, number){
  return total / number;
}
function registerPets(newNum){
  pets += Number(newNum); // register new pet(s)
}
function registerOwner(){
  ++owners;
}
function updateAvg(){
  petsPerOwner = Math.ceil(average(pets, owners)); // find new average, round up
}

읽기 쉬운 것 외에, 우리가 모든 내장된 기능을 가지고 있을 때, 우리의 일이 얼마나 쉬운지 볼 수 있다.Math.ceil 반올림, log() 코드 디버깅을 도와줍니다.또한 첫 번째 예는 순수한 수요를 충족시키기 위해 함수를 사용하는 것을 주의하십시오.
함수가 없으면 자바스크립트도 없고, 적어도 우리가 알고 좋아하는 자바스크립트의 모든 좋은 부분도 없다.

함수의 분석

function multiply(x, y){
  return x * y;
}

function // keyword for decleration
multiply // function name
(x,y)   // parameters
return x * y; // a return statement allows
              //the function to produce value

함수에는 하나 이상의 매개 변수가 있다.우리는 변수처럼 그것들을 마음대로 명명할 수 있다.그러나 우리는 매개 변수를 저장이 아니라 인용처럼 생각해야 한다.우리는 함수에 사용자가 변수나 데이터 형식을 이 공간에 삽입하기를 바란다고 알려 줍니다.그리고 함수체의 매개 변수 이름을 조작합니다.
많은 경우, 당신은 예상한 결과를 되돌려 주기를 희망할 것이다.이렇게 하지 않으면 함수를 호출할 때 발생합니다 undefined.함수 설정 값을 사용하려면return 키워드를 포함하십시오.

되돌아오다

return 문장은 모든 데이터 형식을 되돌릴 수 있습니다.
숫자:

return 2;

열:

return "hello";

잘못된:

return null;

정의되지 않음:

return undefined;

어레이:

return [1,2,3];

물체:

return {one: 1, two: 2, three: 3};

기능:

return function(){
  return "I'm in a function";
}

호출 함수

함수 이름에 () 을 추가해서 함수를 호출합니다.함수에 인자가 필요하면 입력해야 합니다. 그렇지 않으면 오류가 발생합니다.

function multiply(x, y){
  return x * y;
}
multiply(2,2); // 4

너는 함수 성명 전에 그것을 호출할 수 있다. 그것은 여전히 일할 수 있다.이것은 샹들리에라고 한다.

multiply(2,2); // 4

function multiply(x, y){
  return x * y;
}

함수 기호

하나의 지표나 하나의 일이 모든 인류 언어에서 매우 중요할 때, 보통 그 이름을 발표하는 방법은 한 가지가 아니다.

Fun fact: In Classical Arabic, there are hundreds of ways to name a camel.

이와 유사하게 함수는 JavaScript에서 사용하는 컨텍스트에 따라 함수의 이름이 많습니다.

함수 설명

검증된 함수 선언:

function greet(){
  return 'hello';
}

// we can the call or invoke this functions

greet(); // 'hello'

함수 표현식

또 하나의 함수 표현식이 있다.함수 표현식이라고 부르는 이유는 함수를 변수에 부여하기 때문이다.

let greet = function(){
  return 'hello';
}

// we can still call or invoke this functions

greet(); // 'hello'

주의해야 할 중요한 것은 함수 표현식에 적용되지 않는 향상이다.

greet(); // undefined

let greet = function(){
  return 'hello';
}

익명 함수

함수 키워드 ((function() 는 익명 함수라고 불린 후 이름이 없습니다.Es6는 익명 함수를 작성하는 새로운 방법을 도입했다.function 키워드를 사용하지 않습니다. 이 키워드를 삭제하고 화살표 연산자 => 를 괄호에 추가할 수 있습니다.

let greet = ()=>{
  return 'hello';
}

어느 정도 문법적 차이는 최소 코드를 즐겨 쓰는 순수주의자를 만족시키기 위한 것이다.그러나arrow 함수는 자동 귀속을 도입한 것이 맞습니다.우리는 잠시 후에 당신에게 지나치게 기술화된 것이 아니라 자동 귀속이 무엇인지 보여 드리겠습니다.
익명 함수는 용도가 광범위하다.객체 문자의 가운데 키 값으로 설정할 수 있습니다.

let person = {
  name: "Mark",
  greet: function(){
    return 'hello' + ' ' +  this.name;   
  }
}; // end of object literal

person.greet();

Note: this refers to person within our anonymous function. We could have just as easily wrote person.name.

콜백 함수

익명 함수도 파라미터를 추가할 수 있다.이렇게 하면 익명 함수를 이른바 리셋 함수로 바꿀 수 있다.

//here's a function expression
let greet = (callback, times)=>{
  for(let cnt=0; cnt < times; cnt ++){
      console.log(callback()); //it doesn't return.
                              //This will cause a side effect
  }
}


//here's our anonymous func AKA callback
greet(()=>{return 'hello'}, 3);
//we could have written it like this:
greet(function(){return 'hello'}, 3);

Note: Remember when we talked about the anatomy of a function? When you define a function, you create a mock up. The callback just takes advantage of that because we can wait for the function to arrive. We're telling the interpreter that we want to invoke the function when it arrives by attaching () to our parameter name.

가방을 닫다

함수의 함수를 닫기라고 합니다.

// We have two functions. One is named outie and the other is named closure *wink* *wink*
function outie(){
  // this is closure's first and only outer scope
  function closure(){
   // this is closure's local scope
  }
}

만약 당신이 계속 리셋을 하고 있다면, 리셋도 폐쇄적이라는 것을 정확하게 알았을 것이다.그것이 존재하는 어느 순간에, 그것은 다른 함수에서 호출될 것이다.
배경: '
지금 우리는 이미 함수를 끼워 넣기 시작했으니, 우리는 상하문을 처리해야 한다.함수가 자신의 상하문을 만듭니다. this 키워드에 영향을 미치지만, 익명 함수에서 클립을 작성하면 this 함수를 인용합니다.그래서 우리는 정의가 없다.
다음 예는 다음과 같습니다.

 let person = {
  name: "Mark",
  greet: function(){    
    return function(){
          return 'hello' + ' ' +  this.name;  
    }      
  }
}
// double invoke ()() can invoke a returned closure
person.greet()();// >'hello undefined'

이 문제를 해결하기 위해 개발자는 this 상하문을 보존하기 위해 변수를 설정하기만 하면 된다.다시 말하면 우리는 그것을 구속해야 한다.자동 귀속에 필요한 것 알아보기

//code excerpt
greet: function(){
  let self = this;   
  return function(){
        return 'hello' + ' ' +  self.name;  
  }      
}
//end of excerpt

또 다른 해결 방안은 함수의 끝 괄호에서 현식 호출bind(this)이다.

//code excerpt
greet: function(){
  return function(){
        return 'hello' + ' ' +  this.name;  
  }.bind(this)      
}
//end of excerpt

그것은 보기에는 매우 보기 싫지만, 매우 쓸모가 있다.

Pro Tip: Remember the new ()=> syntax? The example above gives a good example of why we need auto binding. Before, you had to remember to bind this in a variable like we had to do earlier. Now, you just use the new syntax and, wala!, you have a functioning this keyword. Try it out by rewriting the closure.

최종 해결 방안은 Es6 화살표 기능을 사용하는 것이다.

//code excerpt
greet: function(){
  let self = this;   
  return ()=>{
        return 'hello' + ' ' +  this.name;  
  }      
}
//end of excerpt

Note: Using the arrow function on the outer anonymous function destroys context. Because the arrow function binds automatically, you will be binding this to a context outside of the person object. So, this.person would no longer work.

살림살이

자체 함수를 호출하는 것을 즉시 호출 함수 표현식(IIFE)이라고 한다.

(function(){
  return 'hello'; //'hello'
}());

다른 기능을 사용하여 작업을 수행할 수도 있습니다.매개변수를 설정하고 호출기()를 사용하여 데이터를 입력할 수 있습니다.

(function(name){
  return name;   // 'hi'
}("hi"));

IIFE를 변수로 설정할 수 있지만 이름을 선언해야 합니다.하지만, 너는 그것을 호출할 필요가 없다.

var greet =
(function(name){
  return name;   
}("hi"));

greet // 'hi'

기능 마니아

IFFE와 클립을 사용하여 익명 함수를 결합시켜android를 만들 수 있습니다.

//function expression
let android = (function(){
    //==private
    this.name = "Mark VI";
    //declaration
    function addStrings(){
       return "hello" + " " + this.name;
    }
    function setName(name){
      this.name = name;
    }
    //==public: we're just returning an object.
    return {  //anonymous functions
       setName:(name)=>{
          return setName(name);
        },    
        greet: ()=>{
            return addStrings();
        }
    }
}());//IIFE

android.setName("Raj");
android.greet(); //'Hello, I'm Raj'

위의 코드는 함수가 우리에게 제공하는 모든 기능을 이용하여 실행 가능한 대상을 만들었다.그것은 자신의 상태를 관리한다. 이것은 우리가 한 변경 사항이 모두 저장된다는 것을 의미한다.따라서, 만약 우리가 새로운 이름을 설정하고android에게 우리에게 인사를 한다면, 이 새로운 이름으로 우리에게 인사를 할 것이다.이건 강력한 것들이야!우리는 다른 장에서 대상을 대상으로 프로그래밍하는 것에 대한 지식을 더 많이 배울 것이다.

Note: Oftentimes, developers wrap JavaScript code with an IFFE if they want their code to run without having to be triggered by an event.

요약

이 모든 종류의 함수를 추적하기 어려울 수도 있으니, 서로 다른 함수 유형을 보여 주십시오.

선언 함수

익명 함수

콜백

커버

즉시 호출된 함수 표현식

Challenge: write a program that utilizes all of these different functions