함수

wangjh789·2022년 8월 28일
0

javascript

목록 보기
8/12
const person = {
	name : 'Max',
  	greet : function myGreet(){
    	console.log('Hi, there');
    }
}

위 코드에서 name을 property, greet를 method라 칭한다.

btn.addEventListener('click',person.greet)
addEventListner처럼 객체에 저장되는 함수는 메서드라는 이름을 갖는다.

함수표현식
함수는 객체이다. 따라서 변수나 상수에 함수를 할당할 수 있다. 왜 함수 표현식이 필요할까?

const multiply = function(a,b){return a*b};

기존의 함수선언 으로 함수를 정의하면 js가 자동으로 함수를 맨위로 호이스트하고 완전히 초기화한다.그렇기 때문에 함수를 선언하기 전에 호출이 가능했다.
함수표현식으로 함수를 정의해도 마찬가지로 함수는 호이스트되지만 상수는 정의되지 않아 함수를 호출하기 전, 정의하고 또 초기화 된 상태여야 한다. (함수를 호출하기 전에 반드시 정의해야 한다.)

화살표 함수의 주의점
const sum = (a,b) => a+b;
만약 객체를 반환하는 함수라면?

const test1 = name => {
	return {name:name};
}
const test2 = (name)=> ({name:name});

혼동을 피하기 위해 소괄호로 한번 싸야한다

인수의 기본값

function sum(a,b){ return a+b;}
sum(1);

위 코드를 수행하면 NaN이 출력된다.
자바스크립트는 관대해서 인수의 잘못된 호출은 undefined의 값으로 처리된다.
만약 인수의 기본값을 정하고 싶다면 function sum(a=0,b=0) 으로 설정하면 된다.
기본값으로 대체되는 경우는 넘어온 인수가 undefied인 경우이다. (null, 0, '' 인 경우는 대체되지 않고 유지됨)

rest 파라미터
function sum(...numbers) 로 다양한 수의 파라미터를 받을 수 있다.
그러나 2개 이상의 rest파라미터를 받는 것과 뒤에 파라미터를 받는 것은 불가능하다.
(rest파라미터는 어디가 끝인지 모르기 때문에 뒤의 파라미터에 도달하지 못한다.)

bind()

const calculate = (calHander, type, ...nums) => {
  let sum = 0;
  if (type === 'ADD') for (let num of nums) sum += num;
  else if (type === 'SUBTRACT') for (let num of nums) sum -= num;

  calHander(sum);
};

const showResult = (message, target) => {
  console.log(message + ' ' + target);
};

calculate(showResult.bind(this, 'Add result is '), 'ADD', 1, 2, 3, 4);
calculate(showResult.bind(this, 'Subtract result is '), 'SUBTRACT', 1, 2, 3, 4);

showResult() 함수는 객체이고 특별한 속성을 연결할 수 있다. bind() 메서드는 받은 인자로 구성된 나중에 실행될 준비한다. bind()를 통해 이 시점에서 알고 있는 매개변수를 넣을 수 있다.
bind()의 첫번째 인수에 this라는 키워드를 넣고 showResut의 message파라미터에 들어갈 인자를 설정해놓는다. 그리고 calculate에서 calHander(sum)이 수행될 때 sum은 showResult의 target파라미터에 들어가 수행된다.

profile
기록

0개의 댓글