자바스크립트(호이스팅, 화살표함수, 객체)

1. 호이스팅

호이스팅(Hoisting)은 자바스크립트에서 변수 및 함수 선언이 코드 실행의 초기 단계에서 메모리에 할당되는 동작을 말합니다. 이것은 코드에서 변수 또는 함수를 선언하기 전에 사용할 수 있다는 것을 의미합니다.

console.log(x); // 출력: undefined
var x = 5;

console.log(x); // ReferenceError: x is not defined
let x = 5;

위의 코드에서 변수 `x`는 선언되기 전에 사용되었지만, 호이스팅으로 인해 `undefined`가 출력됩니다.

호이스팅은 변수 또는 함수의 초기화나 할당을 끌어올리지 않으며, 단순히 선언만을 끌어올립니다.

sayHello(); // 출력: "안녕하세요!"
function sayHello() {
  console.log("안녕하세요!");
}

함수 `sayHello`는 선언 전에 호출되었지만 호이스팅으로 인해 정상적으로 동작합니다.
주의해야 할 점은 변수 선언 시 `var`, `let`, 또는 `const`의 차이와 함수 선언 방식에 따라 호이스팅 동작이 다를 수 있다는 것입니다. 

- var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화
- let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않음
- 선언형 함수(function func1() {})도 호이스팅으로 먼저 저장을 해두기때문에 선언보다 사용이 우선되어있어도 잘 작동함. (**표현형은 불가**) ✔️확실하고 정확한 코드를 위해서 표현형 사용 권장

 

2. 화살표 함수

- function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현
- 화살표 함수는 항상 익명(표현형의 형태)
- 따로 프린트를 하지 않으면 자동으로 return한다.

// 매개변수가 없을 경우
const 상수 = () => {
    함수가 호출되었을 때 실행될 문장;
}

// 실행 문장이 한줄 일 때는 {} 생략가능.
const 상수 = () => 함수가 호출되었을 때 실행될 문장;

// 매개변수가 있을 경우
const 상수 = (매개변수1, 매개변수2,...) => {
    함수가 호출되었을 때 실행될 문장;
}

// 한 줄일 때
const 상수 = (매개변수1, 매개변수2,...) => 함수가 호출되었을 때 실행될 문장;

// ✔ 매개변수가 1개인 경우 소괄호 생략 가능!!
const 상수 = 매개변수1 => 함수가 호출되었을 때 실행될 문장;

3. 객체(Object)

자바스크립트에서 객체(Object)는 데이터를 구조화하고 저장하는 데 사용되는 중요한 데이터 유형 중 하나입니다. 객체는 하나의 주제를 가지고 관련있는 프로퍼티(properties)를 가지고 있는 집합입니다. 프로퍼티는 이름-값 쌍의 속성으로 객체 내에서 데이터를 표현하거나 동작을 정의하는 데 사용됩니다. 객체에는 함수 형태로 정의된 속성, 즉 프로퍼티 메서드가 포함될 수 있습니다.

3-1. 객체를 생성하는 법

(1) 리터럴 표기법

    const 객체명 = {
        프로퍼티명1: 값1,
        프로퍼티명2: 값2,
        ...
        프로퍼티명n:function() {
            프로퍼티가 호출되면 실행할 문장;
            ...
        }
    }

(2) 생성자를 이용 (생성자: 객체를 만드는 함수)

    function 생성자명(매개변수1, 매개변수2 ...) {
        this.프로퍼티명1 = 값1;
        this.프로퍼티명2 = 값2;
        ...
        this.프로퍼티명n:function() {
            프로퍼티가 호출되면 실행할 문장;
            ...
        }
    }
    
    // 객체 생성
    const 객체명1 = new 생성자명(값1, 값2, ...);
    const 객체명2 = new 생성자명(값1, 값2, ...);

✔ 생성자를 이용하여 객체를 만들면 ...
    - new 연산자를 사용하여 객체를 생성하고 초기화할 수 있음
    - 객체를 생성할 때 사용하는 함수를 생성자라고 함
    - 새롭게 생성되는 객체를 초기화하는 역할
    - 같은 형태의 객체를 여러개 생성하고 재사용 때 유리

 

(3) 클래스를 이용

    const 클래스명 = class {
        constructor(매개변수1, 매개변수2, ...) {
            this.프로퍼티명1 = 값1
            this.프로퍼티명2 = 값2
            ...
        }
        메소드명(매개변수1, 매개변수2, ...){
            메소드가 호출되면 실행할 문장;
            ...
        }
    }
	
    // 객체 생성
    const 객체명1 = new 클래스명(값1, 값2, ...)
    const 객체명2 = new 클래스명(값1, 값2, ...)

- ECMA Script6에 추가된 객체 생성 방법
- 내부적으로 생성자를 이용한 객체 생성 방법과 동일하게 작동