[06-01] JavaScript 기본 - 4 함수, 메서드, 바인딩

1. 함수 작성 방법

1.1 함수 선언 (Function Declaration)

function greet() {
    console.log("Hello, World!");
}

greet();  // Hello, World!

: function 키워드를 사용한 정의

: 호이스팅에 의해 코드 실행 전 미리 호출 가능(함수 선선언 O)

---

1.2 함수 표현식 (Function Expression)

const greet = function() {
    console.log("Hello, World!");
};

greet();  // Hello, World!

// 초기화 오류
hoisting() // 변수 호이스팅 = ReferenceError: Cannot access 'hoisting' before initialization

let hoisting = function () {
	console.log('variable is hoisted')
}

// 구분
let named = function name() {
	console.log('기명함수')
}

let unnamed = function () {
	console.log('익명함수')
}

: 함수를 변수에 할당하는 방식

: 함수에 대한 호이스팅이 아닌 변수의 호이스팅 발생(변수 선선언)

: 변수에 할당 후 호출 가능

: 주로 익명함수(Anonymous Function)로 사용

---

1.3 화살표 함수 (Arrow Function)

const greet = () => {
    console.log("Hello, World!");
};

greet();  // Hello, World!

: ES6에서 도입

: function 키워드 사용 X, => 구문 사용

: 함수 내 this X, 외부의 this를 참조(Scope chain을 통한 정적 바인딩)

: 이외에도 arguments , super , new.target 가 화살표 함수에는 X

: 일반 함수 표현식은 재선언 가능, but 화살표 함수는 변수 선언이 빌수로 필요-> 재선언 방지(let, const 권장)

---

1.4 생성자 함수 (Constructor Function)

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const john = new Person("John", 5);
console.log(john.name);  // John
console.log(john.age);   // 5

: 객체를 생성할 때, 사용하는 함수

: new 키워드를 사용하여 새로운 객체를 생성

: 해당을 통해 객체의 프로퍼티와 메서드 정의 가능

---

1.5 비교 표

작성 방법	설명	호이스팅	특징
함수 선언	function 키워드를 사용하여 함수 선언	함수 호이스팅, (함수 선언 전체가 메모리에)	함수 선언 시점에 메모리에 저장되므로 어디서든 호출 가능
함수 표현식	함수 표현식을 변수에 할당하는 방식 (const, let 등 사용)	변수 호이스팅 O 함수 호이스팅 X (함수 정의 이후 호출 가능)	함수가 변수에 할당되어 실행되므로, 변수 할당 전에는 호출할 수 없음
화살표 함수	=> 을 사용하여 함수를 정의 (ES6부터 추가)	호이스팅 X	this 바인딩이 상위 스코프에서 상속 arguments 객체를 사용X
생성자 함수	new 키워드를 사용하여 객체를 생성	호이스팅 O	새로운 객체를 생성하는 데 사용되며, this는 생성된 객체를 가리킴

---

2. 함수와 메서드

• 함수 : 함수 그자체
• 메서드 : 클래스 내의 함수로 필드로 접근
• 메서드가 가능한 function() {} 과는 달리 () => {}는 메서드가 될 수 없음
  => 필드의 접근이 불가

---

3. 바인딩 - this와의 연관 관계

3.1 정적 바인딩과 동적 바인딩의 차이

Lexical(Static) Scope	Dynamic Scope
정적 스코프	동적 스코프
변수를 호출하는 함수가 어떤 함수에서 선언되었나	this 를 호출되는 함수가 어떤 객체에서 호출되었나
(함수) 정적 바인딩 = 해당 함수가 선언된 함수	(객체) 동적 바인딩 = 해당 함수가 호출된 객체

- js는 기본적으로 정적 스코프(정적 바인딩)

- this에 대해서는 일부 동적 바인딩

---

3.2 this

1. 일반 함수 표현식 내

function exampleFunction() {
    console.log(this);  // global 객체 (브라우저에서는 window, Node.js에서는 global)
}

exampleFunction();

1-1) 함수: 동적 바인딩, 대체적으로 global

const person = {
    name: 'Alice',
    greet: function() {
        console.log(this.name);  // person 객체의 name 속성
    }
};

person.greet();  // Alice

1-2) 메서드: 객체화  or 초기화 여부로 판단 후 해당 객체 내에 스코프 

2.화살표 함수 표현식 내

2-1) 정적 바인딩(정적 스코프)

---

4. 명시적 바인딩(Explicit Binding)

• 암시적 바인딩(Implicit Binding) : 일반 함수 표현식이 객체 내 메서드로 정의되었을때 this = 객체
• 명시적 바인딩(Explicit Binding) : 해당 함수가 어떤 객체에서 호출되었는지 기준을 직접 설정해주는것

출처: ASAC7기 수업자료

- Explicit Binding 명시적 바인딩이 this 를 사용하는 함수에 명시적으로 객체를 할당해주면 메서드가 된다.

 

 

---

참고

ASAC 수업자료