유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 계속되는 포스팅에서 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록한다.
1. 함수 선언문과 함수 표현식
function functionName(parameters) {
}
let functionName = function(parameters) {
}함수 선언문은 코드가 실행되기 전에 자바스크립트 엔진에 의해 로드, 함수 표현식은 코드 실행 중에 평가된다. 따라서 함수 표현식으로 정의된 함수는 그 함수가 평가되기 전에는 호출할 수 없다. 이 차이점만 유의하도록 하자.
2. 화살표 함수가 선호되는 이유
- 화살표 함수는 function 키워드를 사용하는 전통적인 함수 표현식보다 간결하다. 이는 코드를 더욱 짧고 간결하게 만들어 준다.
- this 바인딩: 화살표 함수는 자신의 this 바인딩을 생성하지 않는다. 화살표 함수의 this는 함수가 정의된 범위에서 상속되고 이는 함수에서 this를 예상하는 방식을 단순화하는데 도움이 된다. 이러한 이유로 화살표 함수는 특히 이벤트 핸들러, 타이머, AJAX 콜백 등에서 유용하다.
- return 생략 : 단일 표현식을 반환하는 경우, 화살표 함수는 중괄호와 return 키워드 없이 값을 반환할 수 있다.
그러나 모든 상황에서 화살표 함수가 더 좋은 선택이라는 것은 아니다. 예를 들어, 메서드 정의나 생성자 함수, 객체 메서드에서의 this 바인딩 등에서는 화살표 함수보다 기존의 function 키워드를 사용하는 함수가 더 적절할 수 있다.
3. 매개변수에 기본값을 할당할 때, 기본값을 갖는 매개변수를 후순위에 두는 이유
- 호출의 단순성: 함수를 호출할 때 매개변수를 생략하면, 자바스크립트는 앞에서부터 차례대로 매개변수를 채운다. 따라서 기본값을 갖는 매개변수가 앞쪽에 있으면, 해당 매개변수를 생략하고 그 뒤의 매개변수를 지정하려면 명시적으로 undefined를 전달해야 하는 번거로움이 생긴다.
function greet(name = "World", greeting) {
console.log(`${greeting}, ${name}!`);
}
greet(undefined, "Hi");
function greet(greeting, name = "World") {
console.log(`${greeting}, ${name}!`);
}
greet("Hi")-
가독성과 이해도: 매개변수의 순서는 함수의 사용법을 이해하는 데 중요한 역할을 한다. 기본값을 갖는 매개변수가 뒤에 있으면, 함수를 읽는 사람은 더 중요한 매개변수(즉, 생략하면 안 되는 매개변수)가 앞에 있음을 알 수 있다.
-
기본값에 앞에 있는 매개 변수 활용 가능
function greet(name = 'World', greeting = `Hi ${name}`) {
console.log(greeting);
}
greet();4. bind() 사용하기
bind() 메서드는 주어진 this 값과 초기 인수를 사용하여 새로운 함수를 만드는 함수.
const combine = (resultHandler, operator, ...numbers) => {
const validateNum = (number) => (isNaN(number) ? 0 : number);
let sum = 0;
for (const num of numbers) {
if(operator === 'ADD'){
sum += validateNum(num);
} else {
sum -= validateNum(num);
}
}
resultHandler(sum);
};
// message : bind()에서 넘겨진 인자
// result : resultHandler할 때 넘겨준 인자 sum, 호출할 때 인자는 bind한 매개변수 뒤에 자동으로 첨부
const showResult = (message, result) => {
alert(message + result);
};
combine(showResult.bind(this, 'Adding result is:'), 'ADD', 1, 4, 'afnlf');
combine(showResult.bind(this, 'Subtracting result is:'), 'SUBTRACT', 1, 4);