บันทึก 기능 프로그래밍

52573 단어 writingjavascript

JavaScript ES6 (ES2015)

화살표 함수
// ES6
[1, 2, 3].map(num => num * 2);

// ES5
[1, 2, 3].map(function(num) {
  return num * 2;
});

// ES6
app.get('/', (req, res) => {  
  res.json({
    message: 'Hello World'
  });
});

// ES5
app.get('/', function(req, res) {  
  res.json({
    message: 'Hello World'
  });
});


() => Hello
() => {} (แบบ code block)
(num) => num * 2
(num1, num2) => {return num1 + num2;} (แบบ code block)
() => ({ foo: bar }) (return เป็น Object ให้ใช้ปีกกา)

ลองเล่น
const f = x => x * 2
print(f(2));

//===========================
var materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

//จัดให้ดูง่ายสำหรับผม
const a = materials.map(
    function(material) {
        return material.length;
    }
);

//เปลื่อน function เป็น =>  ไว้ด้านหลังแทน
const b = materials.map(
    (material) => {
      return material.length;
    }
);

// ลบ  () ของ parameter ออก
รวมถึง {},return ของ Function   
materials.map(material => material.length);
//output [8, 6, 7, 9]


//====================================
var simple = a => a > 15 ? 15 : a;

print(simple(16));
print(simple(10));
// 15 10


const a = (a,b=10) => a*b
print(a(2));
// 20


//  ต้องใส่ () ด้วย ถ้าจะ Default
const a = (a=5) => a
print(a());

네스트된 화살표 함수
let add = (x,y) => x + y;
add(2,3); //=> 5


let add = x => y => x + y;
add(2)(3);


let add = function (x) {
  return function (y) {
    return x + y;
  };
};

What is Functional Programming

แบบธรรมดา
let numbers = [1, 2, 3, 4, 5, 6 ,7, 8, 9, 10];
let squaredEvens = [];
for(let i = 0; i < numbers.length; i++) {
  let currentNumber = numbers[i];
  if(currentNumber % 2 === 0) {
    squaredEvens.push(currentNumber * currentNumber)
  }
}

แบบ FP
const numbers = [1, 2, 3, 4, 5, 6 ,7, 8, 9, 10];
const isEven = n => n % 2 === 0;
const square = n => n * n;
numbers.filter(isEven).map(square);

메모
필터รับ 매개 변수เป็น 기능ที่โยนไปค่าจาก 어레이ไปเชคทีละตัว

동일했어
function isEven(n) { return n % 2 === 0; }
function square(n) { return n * n; }

หัวใจสำคัญของ 함수식 프로그래밍
หลีกเลี่ยง 부작용หรือผลข้างเคียงที่จะเกิดต่อ 기능อื่นและต่อตัวเอง
  • เมื่อมี 입력ค่าหนึ่ง จะได้ต้องได้ 출력เท่าเดิมเสมอ
  • ไม่ไปเปลี่ยนแปลงค่าของตัวแปรจำพวก 전역 변수หรือ 정적 변수
  • ###클래스 함수와 고급 함수
  • 1급 함수คือ 특징.ของ 프로그래밍 언어ที่อนุญาตให้ 기능นั้นเป็น 일등 공민ประชากรอันดับหนึ่งของภาษา เทียบเท่ากับ 가치관อื่น ๆ อย่างตัวเลข หรือ 꿰미เป็นต้น ซึ่งเราสามารถ 할당 기능ให้กับตัวแปรได้ เป็น 논쟁하다หรือ 반환값ของ 기능อื่นๆก็ได้
  • 기능ในลักษณะที่รับ 논쟁하다เป็น 기능หรือ 반환 함수ออกมามีชื่อเรียกว่า 고급 함수
  • ###Lambda 표현식 및 클로즈업

  • ตัวแปร (ในเชิงคณิตศาสตร์ ซึ่งเป็นตัวแทนของค่า หรือ 논쟁하다ของ 기능ไม่ใช่ 가변 변수หรือตัวแปรแบบที่เรา 업데이트ค่าได้เรื่อยๆเวลาเขียนโปรแกรมแบบ (명령식)
  • 기능ซึ่งใน λ연산นั้น 기능ไม่มีชื่อ
  • 응용 프로그램([함수][매개 변수])ถ้าเปรียบเทียบกับพีชคณิตก็คล้ายๆกับแทนค่า 매개 변수ใน 기능เช่น ƒ(3),g(21)
  •  const foo = [1,2,3];
     const baz = foo.map(function bar (n) { return n + 1; });
    
    ส่วน 닫기เป็นสิ่งที่ผมสงสัยอยู่นานมาก เพราะมักจะเจอตัวอย่างแบบนี้
     function ticker() {
       let count = 0;
       return () => count++;
     }
     let t = ticker();
     t(); // 0
     t(); // 1
     t(); // 2
     t(); // 3
    
    เขาบอกว่า 가방을 닫다คือ 기능ที่อ้างอิง 자유 변수เจ้า 자유 변수เนี่ย มันคือตัวแปรที่ไม่ได้ถูกประกาศไว้ใน 매개 변수จากตัวอย่างด้านบน จะเห็นได้ว่า () = > 계수++ไม่มี 매개 변수เลย แต่มีตัวแปร 세다ซึ่งโดยปกติแล้วเมื่อ 실행 주식 코드เสร็จ เจ้า 세다ควรจะถูก 스팸 컬렉터เก็บไป แต่ในกรณีนี้ เมื่อเราบอกว่า t=ticker()를 설정합니다.แล้ว tจะกลายเป็น 닫기ซึ่งเป็น 기능ที่จำสภาพแวดล้อมที่สร้างมันขึ้นมา ทำให้ผลลัพธ์เป็นอย่างที่เห็น แต่ไม่เป็น FP
     // Original
     function makeAdder(a) {
       return b => a + b;
     }
     const addFive = makeAdder(5);
     const addTen = makeAdder(10);
     addFive(20); // 5 + 20 => 25
     addTen(9); // 10 + 9 => 19
    
    
     // Refactoring
     const makeAdder2  = a => b => a + b;
     const addfuck = makeAdder2(5)
     addfuck(20)
    
    คราวนี้จะเห็นได้ว่าทั้ง makeAdder,add5และ 가등하다ล้วนเป็น 순함수หรือตัวอย่างที่ดูฉลาดขึ้นหน่อย
     const makeSum = transFunc  => (a, b) =>
     transFunc(a) + transFunc(b);
    
    const sumSquared = makeSum(n => n * n);
    const sumCubed = makeSum(n => n * n * n);
    
    sumSquared(1, 2); // 1^2 + 2^2 => 5
    sumCubed(1, 2); // 1^3 + 2^3 => 9
    
    ## รู้จักกับ Javascript Callback Function
    ### แบบธรรมดา (동기화)
    console.log('Step 1');
    funcSync();
    console.log('Step 3');
    
    function funcSync () {
      console.log('Step 2');
    }
    
    ### แบบไม่ธรรมดา (비동기식)
     setTimeout(function(){
       console.log('Step 1')
     }, 3000);
    
     console.log('Step 2')
    
     // ผลลัพท์
     // Step 2
     // Step 1
    
    setTimeout(doSomeThing, 3000);
    
    function doSomeThing () {
      console.log('Hello')
    }
    
    ฟังชั่น 시간 초과 설정จะมีการรับ 매개 변수อยู่ 2ตัวก็คือ
    기능ที่จะให้ทำงานเมื่อถึงเวลาที่กำหนด(หรือก็คือ 콜백 함수นั่นเอง)
    정수ที่ใช้กำหนดเวลา มีหน่วยเป็น ms
     const myAsyncFunc = callback => callback();
    
    myAsyncFunc(callbackFunc);
    
    function callbackFunc () {
      print('this is callback function')
    }
    
    มันจะทำ 기능ที่ใส่เข้าไปให้เสร็จก่อนแล้วค่อยออกมา

    ลองเล่น

    예1
    // Original
    asyncFunc(
              function (str)
              {
                  print('cb1 : ' + str);
              },
              function (str)
              {
                  print('cb2 : ' + str);
              }
        );
    
    function asyncFunc (cb1, cb2) {
      cb1('A');
      cb2('B');
    }
    
    // Refactoring
    
    let  asyncFunc = (cb1,cb2) =>  {
        cb1('A');
        cb2('B');
    }
    
    const  f1 = str => print('cb1 : ' + str);
    const  f2 = str => print('cb2 : ' + str);
    
    asyncFunc(f1,f2);
    

    예2
    // Original
    asyncFunc(cb, cb);
    
    function asyncFunc (cb1, cb2) {
      cb1('A');
      cb2('B');
    }
    
    function cb (str) {
      print('cb : ' + str);
    }
    
    // Refactoring
    
    const cb = str => print('cb : ' + str)
    
    let  asyncFunc = (cb1,cb2) => {
        cb("A");
        cb("B");
    }
    asyncFunc(cb,cb);
    
    

    예3
    // Original
    
    asyncFunc(cb, cb);
    
    function asyncFunc (running, done) {
      for (var i = 0;i<10;i++) {
        running('i = ' + i);
      }
      done('done');
    }
    
    function cb (str) {
      print(str);
    }
    // Refactoring
    let  cb = str => print(str);
    let asyncFunc = (running, done) =>{
        for (var i = 0;i<10;i++) {
        running('i = ' + i);
      }
      done('done');
    }
    asyncFunc(cb, cb);
    

    จัดการ Callback

    보증하다
    เป็นเหมือนกับคำสัญญาว่าจะทำคำสั่งนี้ให้เรานะ โดยมันจะมีอยู่ 셋สถานะก็คือ 보류 중, 해결됨, 거부됨เมื่อเริ่มต้นทำคำสั่ง 보증하다จะมีสถานะเป็น 미해결이었어ถ้าทำเสร็จแล้วจะมีสถานะเป็น 단호했어โดยจะทำคำสั่งถัดไปที่อยู่ใน .다음 ()และถ้าทำคำสั่งไม่สำเร็จ จะมีสถานะเป็น 거부และจะไม่ทำคำสั่งถัดไป แต่จะทำคำสั่งที่อยู่ใน .캡처()แทน
    var p = new Promise(function(resolve, reject) {
        let a = 5;
        if(a >= 5) {
            resolve(a);
        }else {
            reject(a);
        }
    }).then(function(a) {
        console.log(`result then : ${a}`);
        return a + 2;
    }).then(function(b) {
        console.log(`result then : ${b}`);
    }).catch(function(a) {
        console.log(`result catch : ${a}`);
    });
    

    메모
    การส่ง 되돌아오다จะไม่ออกมาข้างนอกนะ จะเข้า 그럼 매개 변수는요?ถัดไป

    비동기식/대기
    const resolveAfter2Seconds = x => {
         return new Promise(
            resolve => {
                setTimeout(() => {
                    resolve(x);
                }, 2000);
            }
        );
    }
    console.log(resolveAfter2Seconds(50));
    
    async function add1(x) {
      const a = await resolveAfter2Seconds(20);
      const b = await resolveAfter2Seconds(30);
      return x + a + b;
    }
    console.log(add1(100));
    
    add1(10).then(v => {
        console.log(v);  // prints 60 after 4 seconds.
    });
    
    async function add2(x) {
      const p_a = resolveAfter2Seconds(20);
      const p_b = resolveAfter2Seconds(30);
      return x + await p_a + await p_b;
    }
    
    add2(10).then(v => {
      console.log(v);  // prints 60 after 2 seconds.
    });
    

    Function Composition
    คือกระบวนการรวมกันของ 기능มากกว่า 1ขึ้นไป และก่อให้เกิด 기능ใหม่ขึ้นมา
    หรือรูปแบบหนึ่งที่ใช้ในการอธิบายที่ง่ายที่สุดก็คือ f(g(x))หรือการรวมกันของ 함수และ gมากระทำกับ x
    const compose = function(f, g) {
      return function(x) {
        return f(g(x))
      }
    }
    
    const compose = (f, g) => x => f(g(x))
    
    응용 함수ไล่ไปจาก ขวา ไป ซ้าย

    ตัวอย่าง
    จินตนาการว่า เราจะสร้าง 기능ทำความสะอาด 꿰미ก่อนนำไปใช้งาน (소독 기능)

    ขั้นตอนการทำงาน
    ตัดช่องว่างที่ไม่จำเป็นหน้าหลังของคำ (트림)
    แปลงคำทั้งหมดเป็นตัวพิมพ์เล็ก (트림)
  • ตัดช่องว่างที่ไม่จำเป็นหน้าหลังของคำ (배평)
  • แปลงคำทั้งหมดเป็นตัวพิมพ์เล็ก (트림)
  • function sanitize(str) {
      return str.trim().toLowerCase()
    }
    sanitize('  Hello My Name is Ham     ') // 'hello my name is ham'
    
    ทีนี้ เราลองเขียนแบบ FPกันดู
    const trim = s => s.trim()
    const toLowerCase = s => s.toLowerCase()
    function sanitize(str) {
      return toLowerCase(trim(str))
    }
    sanitize('  Hello My Name is Ham     ') // 'hello my name is ham'
    
    const compose = (f, g) => x => f(g(x))
    const sanitize = compose(toLowerCase, trim)
    sanitize('  Hello My Name is Ham     ') // 'hello my name is ham'
    
    const trim = s => s.trim()
    const toLowerCase = s => s.toLowerCase()
    const join = separator => arr => arr.join(separator)
    const split = separator => arr => arr.split(separator)
    const toSlug = compose(
      toLowerCase,
      join('-'),
      split(' '),
      trim,
    )
    toSlug('   THIS is SluG    ') // 'this-is-slug'
    

    담뱃대
    ลักษณะการทำงานของ 담뱃대คือ การส่งต่อ ผลลัพธ์ ที่ได้จากการ คำสั่งก่อนหน้า ไปให้แก่ คำสั่งด้านหลัง
  • 작성:함수 적용จาก ขวา ไป ซ้าย
  • 파이프: 응용 기능จาก ซ้าย ไป ขวา
  • const toSlug = pipe(
      trim,
      split(' '),
      join('-'),
      toLowerCase,
    )
    toSlug('   THIS is SluG    ') // 'this-is-slug'
    
    https://github.com/NantipatSoftEn/FunctionalPrograming/blob/master/Higher-Order/README.md

    좋은 웹페이지 즐겨찾기