변수 및 기본 문법

기존의 var 대체하는 변수 선언 키워드

let

• 변하는 값을 저장할 때 사용
• 변수의 scope가 선언된 블록({ })으로 한정되며, 동일한 이름의 변수를 재선언 불가능
• var 변수처럼 호이스팅이 발생하긴 하지만, 초기화 전까지 사용할 수 없음 (Temporal Dead Zone) - 접근 시 ReferenceError 발생

※ Hoisting (호이스팅) : 자바스크립트가 코드를 실행하기 전에 변수 선언을 위로 끌어올린 것처럼 처리하는 현상

const

• 한 번 선언하면 다시 대입할 수 없는 변수
• let의 속성 + 불변성
• 만약 객체를 const로 선언 시, 객체 안의 속성은 변경 가능

const config = {
  apiUrl: "/api/v1",
};

// 가능
config.apiUrl = "/api/v2";
// 불가능
config = { apiUrl: "/api/v3" };

---

template literal

• 기존 문자열 방식

const userName = "홍길동";
const greeting = "안녕하세요";

const message = greeting + ". 저는 " + userName + "입니다.";
console.log(message);

• ES6 Template Literal 방식 (백틱 사용)

const userName = "홍길동";
const greeting = "안녕하세요";

const message = `${greeting}. 저는 ${userName}입니다.`;

console.log(message);

---

Null coalescing operator

• 널 병합 연산자
• 값이 누락된 상황에 대해 세분화된 처리 가능
  • || : 왼쪽 값이 falsy한 상황에서 무조건 오른쪽 값 반환
  • ?? : 왼쪽 값이 null / undefined인 경우에만 오른쪽 값 반환

※ 자바스크립트에서 대표적인 falsy 값
false
0
""
null
undefined
NaN

// ?? 연산자 (|| 연산자는 무조건 "값누락")
NaN ?? "값누락"       // "값누락"
undefined ?? "값누락"  // "값누락"
false ?? "값누락"  	// false
0 ?? "값누락"      	// 0
"" ?? "값누락"     	// ""

---

Optional Chaining

• 값이 있을 경우에만 chaining을 수행
• 기존 방식 : 삼항 연산자 사용

users.forEach((user) => {
  console.log(
    user.name,
    user.email ? user.email.id : undefined,
    user.email ? user.email.domain : "undefined"
  );
});

• ES6 이후 방식 : Optional Chaining
  - ?. 사용
  - user.email이 있으면 .id에 접근하고,
  없으면 에러 내지 말고 undefined를 반환하라는 뜻

users.forEach((user) => {
  console.log(user.name, user.email?.id, user.email?.domain);
});

---

함수와 클래스

arrow function

• 간결한 함수 문법 선언 방법

// 기존 함수 표현식
const add = function(a, b) {
  	return a + b;
};

// 화살표 함수
const addArrow = (a, b) => a + b;

lexical한 this binding

• lexical? : "코드가 작성된(선언된) 물리적 위치에 기반한다"
• 일반 함수는 호출 방식에 따라 this가 달라진다.
• 반면 화살표 함수는 자기만의 this를 만들지 않고, 바깥 스코프의 this를 그대로 사용한다.

const person = {
  name: "Alice",

// person.normalFunc()의 this        → person
// setTimeout 안 일반 함수의 this     → window
// setTimeout 안 화살표 함수의 this   → 바깥 this(person)
  normalFunc: function () {
    setTimeout(function () {
      console.log(this.name);
    }, 100);
  },

  arrowFunc: function () {
    setTimeout(() => {
      console.log(this.name);
    }, 100);
  },
};

// setTimeout 안의 일반 함수는 person이 호출한 게 아니라 
// 브라우저가 나중에 호출하기 때문에 this가 window를 보게 된다
person.normalFunc(); // undefined 또는 빈 값
person.arrowFunc();  // Alice

---

기본 매개변수

• 함수 매개변수의 기본 값 설정
  • 값이 전달되지 않았을 때 사용할 기본값을 함수 선언 시 미리 지정하는 문법

// age = 20, role = 'user' 기본값 설정
function createUser(name, age = 20, role = 'user') {
  return {
    name,
    age,
    role,
    createdAt: new Date()
  };
}

---

class

class Person {
  // #을 붙이면 private field
  // 클래스 내부에서만 접근 가능
  #ssn;

  // constructor는 객체 생성 시 자동 실행됨
  constructor(name, age, ssn) {
    this.name = name;
    this.age = age;
    this.#ssn = ssn;
  }

  // getter
  // person.ssn처럼 값을 조회할 때 자동 실행됨
  get ssn() {
    return `${this.#ssn.slice(0, 6)}-*******`;
  }

  // setter
  // person.ssn = 값 처럼 값을 넣을 때 자동 실행됨
  set ssn(value) {
    if (value.length !== 13) {
      throw new Error("주민등록번호는 13자리여야 합니다.");
    }

    this.#ssn = value;
  }

  // 일반 메서드
  sayHello() {
    return `안녕하세요, 저는 ${this.name}이고 ${this.age}살입니다.`;
  }

  // static 메서드
  // 객체가 아니라 클래스 이름으로 직접 호출함
  static create(name, age, ssn) {
    return new Person(name, age, ssn);
  }
}

// static 메서드 호출
// 내부적으로 new Person(...)을 실행해서 객체를 만들어줌
const person = Person.create("jun", 25, "0101011234567");

// 일반 메서드 호출
console.log(person.sayHello());
// 안녕하세요, 저는 jun이고 25살입니다.

// setter 호출
person.ssn = "0202027654321";

// getter 호출
console.log("주민번호(마스킹):", person.ssn);
// 주민번호(마스킹): 020202-*******

// private field는 외부에서 직접 접근 불가
// console.log(person.#ssn); // 에러

---

객체 및 배열 조작

강화된 객체 표현

Property Shorthand

• 객체의 속성 이름과 참조하려는 변수의 이름이 같을 경우, 하나만 사용
  • 만약 대상 변수가 없다면, ReferenceError 발생

// 기존 방식 (key: value 형태 모두 작성)
let language = "javascript";

let oldStyle = {
  language: language
};

// ES6 방식 (key이름과 변수 이름이 같다면 줄여버림)
let language = "javascript";	// 바깥에 얘가 없다면 ReferenceError 발생

let newStyle = {
  language				// language: language과 동일
};

Concise Method

• 객체에 함수 정의 시, 속성 이름을 함수 이름으로 사용 (function 키워드 생략)

// 기존 객체 메서드 작성 방식
let oldStyle = {
  language: language,

  sayLang: function () {
    console.log(`사용 언어는 ${this.language} 이다.`);
  }
};

// ES6 (function 키워드 생략)
let newStyle = {
  language,

  sayLang() {
    console.log(`사용 언어는 ${this.language} 이다.`);
  }
};

---

Computed Property name

• 동적으로 property 이름을 생성하는 방법
  • 속성 선언 시 []

---

Spread Operator

---

structuring vs de-structuring

---

모듈화

Module System

---

export

---

import

---

비동기 처리

Promise

---

async~await

---

Top level await

---

Proxy 활용