자바스크립트 기초 - 함수 Function

📌 함수 Function

✅ 콜백 Callback

콜백(Callback) 함수는 함수의 인수로 사용되는 함수이다.
이해를 돕기 위해 아래 코드 setTimeout 메서드를 활용한 예제를 보자.

 

// setTimeout(함수, 시간)

function timeout(callback) {
  setTimeout(() => {
    console.log('SON7AE');
    callback();
  }, 3000);
}
// timeout 함수 내부의 함수를 callback 함수, callback이라고 한다.
timeout(() => {
  console.log('Done');
});
// console.log('Done');

 

위 코드를 보면, function timeout(callback) 이 부분에 인수로 callback을 받았다.

따라서 아래 timeout( () => {console.log('Done')} ) 이 부분이 callback이 되는 것이고, 그렇기 때문에 callback()가 선언된 지점에서 발동한다. 따라서 콘솔에는 'SON7 AE'가 먼저 찍히고 이후에 'Done'이 찍힌다.

 

✅ 생성자 함수 prototype

const sonjae = {
  firstName: 'SUNGJAE',
  lastName: 'Park',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`; // 보간법
  },
};
console.log(sonjae);

const amy = {
  firstName: 'Amy',
  lastName: 'Clarke',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`; // 보간법
  },
};
console.log(amy);

const neo = {
  firstName: 'Neo',
  lastName: 'Smith',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`; // 보간법
  },
};
console.log(neo);

 

 

✅ 리터럴 방식

function User(first, last) {
  this.firstName = first;
  this.lastName = last;
}

User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`; // 보간법
};

// new 키워드를 사용한 생성자 함수
// sonjae, amy, neo는 인스턴스라고 한다.
const sonjae = new User('SON7AE', 'Park');
const amy = new User('Amy', 'Clarke');
const neo = new User('Neo', 'Smith');

console.log(sonjae.getFullName());
console.log(amy.getFullName());
console.log(neo.getFullName());

 

prototype이라는 속성에 getFullName()을 만들어준다.

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불리기 때문에 모든 객체들이 메서드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미이다.

 

프로토타입 객체도 또다시 상위 프로토타입 객체로부터 메서드와 속성을 상속받을 수도 있고, 그 상위 프로토타입 객체도 마찬가지이다. 이를 프로토타입 체인(prototype chain)이라 부르며, 다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이다.

 

정확히 말하자면 상속되는 속성과 메서드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있다.

JavaScript에서는 객체 인스턴스와 프로토타입 간에 연결(많은 브라우저들이 생성자의 prototype 속성에서 파생된 proto 속성으로 객체 인스턴스에 구현하고 있다.) 이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메서드를 탐색한다.

 

https://www.youtube.com/watch?v=IQ7EuH3mRck