자바스크립트에는 오버라이딩이 없다.
자바와는 다르게 자바스크립트에서는 오버라이딩을 지원하지 않는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fn() {
console.log('point');
}
function fn(num1) {
console.log(num1);
}
function fn(num1, num2) {
console.log(num1, num2);
}
console.log('--------------------------');
fn();
fn(100);
fn(100, 200);
</script>
</body>
</html>다음과 같은 예시의 결과는?
위 코드에서 fn() 함수는 3번 정의되었다.
이는 자바스크립트에서 함수의 이름이 같을 경우, 나중에 정의된 함수가 이전에 정의된 함수를 덮어쓰게 되는 결과가 나타난다.
따라서 마지막에 정의된 fn(num1, num2) 함수가 유일하게 존재하게 된다.
즉, 마지막 fn(num1, num2) 함수만이 세번 실행되었다는 의미이다.
콜백 함수 : 등록만 해 놓는다.
콜백(callback) 함수는 다른 함수의 인자로 전달되는 함수이다.
이 함수를 통해 다른 함수 내부에서 비동기적으로 처리되는 작업의 결과를 반환하거나, 작업이 완료된 후에 추가적인 동작을 수행할 수 있다.
또한 콜백 함수는 특정 함수가 실행될 때 실행되도록 전달되는 함수이다.
이 함수는 해당 함수의 실행이 완료된 후에, 다른 함수에서 필요한 시점에 호출된다.
이처럼 콜백 함수는 비동기적인 작업을 처리할 때 매우 유용하다.
자바스크립트에서는 이를 활용하여 비동기적인 작업을 처리하는 방법을 제공하는 것이다.
예를 들어, setTimeout 함수를 사용하여 일정 시간이 지난 후에 콜백 함수를 실행하도록 설정할 수 있다.
setTimeout(function() {
console.log('Hello, world!');
}, 1000);위 예제에서는 setTimeout 함수를 사용하여 1초 후에 console.log 함수를 실행시키도록 하였다.
이때 첫 번째 인자로 전달된 함수(function())이 콜백 함수이며, 이 함수는 setTimeout 함수 내부에서 비동기적으로 처리된다.
콜백 함수는 비동기적인 작업 외에도, 다른 함수에서 실행되는 동작을 추가할 때도 사용된다.
const arr = [1, 2, 3, 4, 5];
arr.forEach(function(num) {
console.log(num * 2);
});
예를 들어, forEach 함수는 배열의 각 요소마다 콜백 함수를 실행시킨다.
이때 전달된 콜백 함수는 배열의 각 요소를 인자로 받으며, 이를 통해 배열 요소에 대한 추가적인 동작을 수행할 수 있다.
<TIP>
비동기 처리에 대한 개념 :
https://velog.io/@csg1353/Javascript%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC
화살표 함수 : JAVA의 람다와 유사한 방식.
// 기존 함수 선언 방식
function add(x, y) {
return x + y;
}
// 화살표 함수
const add = (x, y) => {
return x + y;
}
--------------------------------
// 단일 표현식을 반환하는 함수
const double = x => x * 2;
// 중괄호와 return 문을 생략한 함수
const multiply = (x, y) => x * y;
--------------------------------
const person = {
name: 'John',
sayHi: function() {
// 일반 함수에서 this는 호출한 객체를 참조한다.
console.log(`Hi, my name is ${this.name}.`);
},
sayHiArrow: () => {
// 화살표 함수에서 this는 정의된 객체를 참조한다.
console.log(`Hi, my name is ${this.name}.`);
}
};
person.sayHi(); // "Hi, my name is John."
person.sayHiArrow(); // "Hi, my name is undefined."
