함수(Function)

1. 함수

• function() { } : 작은 공장 = 지시사항의 묶음, 하나의 닫힌 방

//함수 선언식 (★)
function pracA (parameter){
     // 컴퓨터에 지시할 사항
}
//함수 표현식
let pracA = function(parameter){
     // 컴퓨터에 지시할 사항
}

• 함수를 설정하여, 코드의 가독성을 높일 수 있다.
• 함수를 만들어두면, 어디에서든 호출해도 코드 재사용이 용이하다.
  
• 유지보수 수월
  하나의 함수에 어떤 문제를 해결하게 끔 한번만 수정을 진행하면, 그 함수를 적용한 모든 곳도 수정내역이 동일하게 적용된다.

함수에 대해 재미있는 풀이가 곁들여진 생활코딩 영상

---

Deep Study

1) 화살표 함수(Arrow function)

• ES6에서 새로 도입되어, 함수표현식을 축약할 수 있다. 대표적인 형태로 function 키워드가 화살표로 축약되어 표시된다. (=>)
• return 생략이 가능하다.
  {}에서는 에러가 발생하지만, ()에서는 사용가능.

let getSum = (a, b) => a + b;
let getSum= (a, b) => (a + b);
//에러 문법
let getSum = (a, b) => { a + b };

• arrow function 은 조건이 여러가지 있다.
  • 표현식이 한 줄로만 간단할 때, 여러줄이 있을 때
  • 객체를 반환할 때
• 클로저 표현 시, 강력하다.
  • 치환을 할 때, 중괄호를 하나씩 없애면서 return을 생략하면 손쉽게 변형할 수 있다

//함수표현식
const adder = function(x) {
  return function(y) {
    return x + y
  }
}
adder(5)(7) // 12

//화살표함수
const adder = x => y => x + y

// 간단한 한줄 표현식을 사용
let getSum = (a, b) => a + b;
getSum(3,5);
> 8 

주의사항

• call, apply, bind는 사용할 수 없다.
• 화살표 함수의 실행은 this를 결정짓지 않는다.

• 또다른 예제

const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`
htmlMaker('div')('code states');
// "<div>code states</div>"
const liMaker = htmlMaker('li')

liMaker('1st item');
//"<li>1st item</li>"

2) 함수 메소드

① .apply()

• fn.apply (obj, [ arr1, arr2 ]);
• 다중 인자를 받아올 수 있는 메소드
• this가 없으면 obj는 null로 대체된다.
  apply(null, [arr1, arr2,...]);

let arr = [ 10, 3, 5, 40 ];
Math.max.apply(null, arr);
> 40

function maxLength(){

  let result = [];
  for(let i of this){
    if (i.length > 4){
     result.push(i);
    }
  }
  return result;
}

let animals = [ 'rhinoceros', 'seal', 'otter', 'ostrich', 'rat' ]
maxLength.apply(animals);
> ["rhinoceros", "otter", "ostrich"]

let word = ['banana', 'dog', 'good', 'like', 'I'];
maxLength.apply(word);
> ["banana"]

② .call()

• fn.call(obj, value1, value2);
• this가 없으면 obj는 null로 대체된다.
  call(null, arr1, arr2,...);
• HTML의 노드 list는 유사배열이지만, call을 사용해 array 메소드를 구현할 수 있다.

function maxLength(str){
  return str.length > 4
}
let arr = ['banana', 'is', 'good'];

Array.prototype.filter.call(arr, maxLength);
> ["banana"]

③ .bind()

• fn.bind(null 또는 this값, value1, value2,...);

• 새로운 bound function(원본 함수에 감싸진 exotic function object)을 실행시킨다.

• bound function은 래핑 함수의 실행을 결과로 내놓는다. (바인딩된 값)

• 실제활용 예
  CASE 1 : 이벤트 핸들러

let btn = document.querySelector('#btn')
// 추후 이벤트에 의해 불리게 될 함수에서, this는 {hello: 'world'}가 됩니다.
btn.onclick = handleClick.bind({ hello: 'world'})

function handleClick() {
  console.log(this)
}

---

---

• bind를 사용하지않고 익명 함수로 문제 해결 가능

let target = document.querySelector('#target')
let users = ['김코딩', '박해커', '최초보']

users.forEach(function(user) {
  let btn = document.createElement('button')
  btn.textContent = user
  btn.onclick = handleClick.bind(null, user) 
  // 굳이 this를 이용하지 않더라도 인자로 넘길 수도 있습니다.
  target.appendChild(btn)
});
  
  
function handleClick(user) {
  console.log(user)
}