위챗 미니프로그램 가이드 : 함수 Function

유튜브 강좌 : youtu.be/qbncWPR8yMQ

ECMAScript는 자바 스크립트를 이루는 코어(Core) 스크립트 언어.
ECMAScript를 ES라 줄여 부르고 버전에 따라서 ES뒤에 숫자가 붙는데 아직까지도 가장 많이 쓰이는 ES5는 2009년에 만들어졌고 ES6은 2015년에 만들어져 널리 사용중이다.

 

- 함수 function

어떠한 작업을 할 수 있도록 설계된 블록.

 

함수의 형태 : 일반함수, ES5, ES6

 

일반함수

    function myFunc1(param1, param2) {  // 일반함수
      return param1 + param2;
    };

ES5

    var myFunc2 = function (param1, param2) { // ES5
      return param1 + param2;
    };

ES6

    var myFunc3 = (param1, param2) => { // ES6
      return param1 + param2;
    };

함수의 호출

    console.log(myFunc1('myFunc1', ' 호출'));
    console.log(myFunc2('myFunc2', ' 호출'));
    console.log(myFunc3('myFunc3', ' 호출'));
    //myFunc1 호출
    //myFunc2 호출
    //myFunc3 호출

주의사항 : 세미콜론 자동 삽입과 중괄호 위치 버그

세미콜론 없이 코드작성 : 컴파일시 문제없이 처리.

    var number = 100
    console.log(number)
    //100 문제없이 출력된다.

세미콜론 없이 코드작성 : 중괄호 위치에 의한 버그 발생

    function test1() { 
      return { 
        message: 'Hello world' 
      }
    } 
    
    function test2() 
    { 
      return // 세미콜론이 자동 삽입되어 실행 => return; 는 return undefined; 와 같다
      { 
        message: 'Hello world' 
      } 
    }

    console.log(test1());
    //{message: "Hello world"}
    console.log(test2());
    //undefined

 

 

- 화살표 함수 arrow function : ES6문법

function 키워드를 생략할 수 있습니다.

함수의 매개변수가 1개라면 괄호()를 생략할 수 있습니다.

함수 바디가 표현식 하나라면 중괄호{}와 return 문을 생략할 수 있습니다.

"{}"를 사용하면 값을 반환할 때 return을 사용해야합니다.

"{}"를 사용하지 않으면 undefied를 반환합니다.

"{}"을 사용할 때는 여러줄을 썼을 때 사용합니다.

 

매개변수가 없는 경우 : 괄호()를 표시, 표현식 하나라면 중괄호와 return 문을 생략

    var foo = () => 'bar';
    console.log(foo()); // bar

    //일반함수 표현
    //function foo() {
    //  return 'bar';
    //}

매개변수가 하나인 경우 : 괄호()를 생략, 표현식 하나라면 중괄호와 return 문을 생략

 

    var foo = x => x;
    console.log(foo('bar')); // bar
    
    //일반함수 표현
    //function foo(x) {
    //  return x;
    //}

매개변수가 여려개인 경우 : 표현식 하나라면 중괄호와 return 문을 생략

 

    var foo = (a, b) => a + b;
    console.log(foo(1, 2)); // 3

    //일반함수 표현
    //function foo(a,b) {
    //  return a + b;
    //}

콜백함수로 사용할수 있다.

 

map(): 배열의 각 요소에 대해 정의 된 콜백 함수를 호출하고 결과가 포함 된 배열을 반환

  //ES5
    var arr1 = [1, 2, 3];
    var myFunc1 = arr1.map(function(x) {
      return x * x;
    });
    
    console.log(myFunc1);// (3)[1, 4, 9]
    
    
  //ES6
    var arr2 = [1, 2, 3];
    var myFunc2 = arr2.map( x => x * x )
    
    console.log(myFunc2);// (3)[1, 4, 9]

 

 

- 다른 자바스크립트파일에서 호출해보기

util.js의 FormatTime() 호출해보기

 

//util.js

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

먼저 util.js 가져오기 : 페이지상단에 추가.

require 사용 :

 

const util = require('../../utils/util.js'); //경로는 다를수 있습니다.

import 사용 :

import util from '../../utils/util'; //경로는 다를수 있습니다.

사용예

    console.log(new Date()); // 현재 날짜와 시간 확인
    
    var toDay = util.formatTime(new Date());
    console.log(toDay); //xxxx/xx/xx xx:xx:xx

 

- 함수안의 변수(variable)

변수 범위

변수는 함수 본문 외부에서 참조 할 수 없습니다.

    function foo1() {
      var x = 1;
      x = x + 1;
    }
    x = x + 2;//ReferenceError: x is not defined

다른 함수 내에서 같은 이름을 가진 변수는 서로 독립적이며 서로 영향을 미치지 않습니다.

    function foo2() {
      var x = 1;
      console.log(x + 1);
    }
    foo2(); // 2
    
    function foo3() {
      var x = 'A';
      console.log(x + 'B');
    }
    foo3(); // AB

다중 함수

    function foo4() {
      var x = 1;
      function bar() {
        var y = x + 1;
      }
      var z = y + 1; //ReferenceError: y is not defined
    }
    foo4();

 

 

- 고차함수 ( Higher-Order Function )

고차 함수는 함수를 인자로 받거나 함수를 출력(output)으로 반환하는(return) 함수를 말합니다.

예를 들면, map(), filter(), reduce()가 고차함수입니다.

 

map()

map() 메소드는 입력으로 들어온 배열 내 모든 엘리먼트를 인자로 제공받는 콜백 함수를 호출함으로써 새로운 배열을 만들어냅니다.

map() 메소드는 콜백 함수에서 모든 반환된 값을 가져올 것입니다. 그리고 그 값들을 이용한 새로운 배열 하나를 만들어냅니다.

map() 메소드로 전해진 콜백 함수는 3가지 인자를 받습니다: element, index, array

 

예1

우리가 숫자가 들어있는 배열을 가지고 있고 각각의 숫자 값이 2배가 된 배열을 만들길 원한다고 해봅시다.

고차 함수(Higher - Order function)가 없을 때와 있을 때, 각각 우리가 문제를 어떻게 해결할 수 있는지 봅시다.

 

고차 함수가 아닌 함수로 작성

    var arr1 = [1, 2, 3];
    var arr2 = [];
    for (let i = 0; i < arr1.length; i++) {
      arr2.push(arr1[i] * 2);
    }
    
    console.log(arr2);//[2, 4, 6]

고차 함수로 작성

    var arr1 = [1, 2, 3];
    var arr2 = arr1.map(function (item) {
      return item * 2;
    });
    
    console.log(arr2);//[2, 4, 6]

화살표 함수 이용하면 훨씬 짧게 작성 가능합니다.

    var arr1 = [1, 2, 3];
    var arr2 = arr1.map(item => item * 2);
    
    console.log(arr2);//[2, 4, 6]

 

filter()

filter() 메소드는 콜백 함수에 의해 제공된 테스트를 통과한 모든 엘리먼트를 가진 새로운 배열을 만들어냅니다.

filter() 메소드로 넘겨진 콜백 함수는 3가지 인자를 받습니다: element, index, array를 받습니다.

 

예

우리가 이름과 나이 프로퍼티를 가진 오브젝트를 가지고 있다고 해봅시다.

우리는 18살 이상의 사람만 필터링된 새로운 배열을 만들고 싶습니다.

    const persons = [
      { name: 'Peter', age: 16 },
      { name: 'Mark', age: 18 },
      { name: 'John', age: 27 },
      { name: 'Jane', age: 14 },
      { name: 'Tony', age: 24 },
    ];

고차 함수가 아닌 함수로 작성

 

    var fullAge = [];
    for (let i = 0; i < persons.length; i++) {
      if (persons[i].age >= 18) {
        fullAge.push(persons[i]);
      }
    }
    
    console.log(fullAge);
    
    /* 결과
    { name: "Mark", age: 18 }
    { name: "John", age: 27 }
    { name: "Tony", age: 24 }
    */

고차 함수, 화살표 함수로 작성

    var fullAge = persons.filter(person => person.age >= 18);
    
    console.log(fullAge);
    
    /* 결과
    { name: "Mark", age: 18 }
    { name: "John", age: 27 }
    { name: "Tony", age: 24 }
    */

 

reduce()

reduce 메소드는 두 개의 매개 변수를 수신하고 누적 계산을 계속 수행

초기값을 지정할수 있습니다.

 

예

숫자 배열의 합을 구하는 예제를 만들어봅시다.

    const arr = [5, 7, 1, 8, 4];

고차 함수가 아닌 함수로 작성

    var sum = 0;
    for (let i = 0; i < arr.length; i++) {
      sum = sum + arr[i];
    }
    
    console.log(sum);//25

고차 함수로 작성

    var sum = arr.reduce(function (accumulator, currentValue) {
      return accumulator + currentValue;
    });
    
    console.log(sum);//25

화살표 함수 이용

    var sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue )
    
    console.log(sum);//25

 

 

함수에 초기값을 제공

    var sum = arr.reduce(function (accumulator, currentValue) {
      return accumulator + currentValue;
    }, 10);//초기값 10
    
    console.log(sum);//35

 

sort()

배열의 요소를 정렬한다. 원본 배열을 직접 변경하며 정렬된 배열을 반환한다.

    var str = ["bbb", "ddd", "aaa", "ccc"];
    str.sort();
    
    console.log(str); //(4) ["aaa", "bbb", "ccc", "ddd"]

숫자일경우 주의

숫자일경우 아스키코드 순으로 정렬되어 원하는 정렬을 얻을수 없습니다.

    var points = [1, 5, 2, 10];
    points.sort();
    
    console.log(points); //(4) [1, 10, 2, 5]

고차 함수로 작성 : ascending(오름차순)

    //var asc = points.sort(function(x, y) { return x - y; })
    var asc = points.sort((x, y) => x - y);// ES6 화살표 함수
    
    console.log(asc);//(4) [1, 2, 5, 10]

고차 함수로 작성 : descending(내림차순)

    //var desc = points.sort(function (x, y) { return y - x; })
    var desc = points.sort((x, y) => y - x);// ES6 화살표 함수
    
    console.log(desc);//(4)[10, 5, 2, 1]