🌟 모던자바스크립트 : ECMAScript 6(ES6, 또는 ES2015)은 2015년 발표된 자바스크립트 표준의 주요 업데이트

ES6 (ES2015)

• 새로운 변수 선언 방식: 기존의 var 대신 블록 범위(block scope)를 가지는 let과 상수 선언을 위한 const가 추가되어 변수 관리의 안정성이 높아졌습니다.
• 템플릿 리터럴 (Template Literals): 백틱(`)을 사용하여 문자열 내부에 변수를 쉽게 삽입하거나 줄바꿈을 표현할 수 있게 되었습니다.
• 구조 분해 할당 (Destructuring): 객체나 배열에서 필요한 값만 간결하게 추출하여 변수에 할당할 수 있습니다.
• 화살표 함수 (Arrow Functions): => 문법을 사용하여 함수를 더 간결하게 선언할 수 있으며, this 바인딩이 정적으로 결정됩니다.
• 클래스 (Classes): 객체 지향 프로그래밍을 더 직관적으로 구현할 수 있는 클래스 문법이 도입되었습니다.
• Promise: 콜백 지옥을 해결하기 위한 Promise 객체가 표준으로 포함되었습니다.
• 전개 연산자 (...): 기존 배열이나 객체를 건드리지 않고(불변성 유지) 새로운 복사본을 만들거나 합칠 때 사용합니다.
• 모듈 (import / export): 코드를 여러 파일로 나누고 조립하는 현대 자바스크립트 생태계의 표준입니다. 모듈화 (Modules): import와 export 구문을 통해 코드를 독립적인 모듈로 나누고 관리하는 네이티브 기능이 생겼습니다.
• Map 객체
• Set 객체

ES7 (ES2016)

• Array.includes() (배열 내 특정 요소 존재 여부 확인)

ES8 (ES2017)

• async / await (비동기 처리의 표준)
• Object.values() / Object.entries(): 객체 안에 있는 값들만 뽑아서 배열로 만들거나, Key와 Value를 동시에 뽑아 반복문을 돌릴 때 매우 자주 쓰입니다.

ES11 (ES2020)

지긋지긋한 에러 방지 이 두 가지는 실무에서 TypeError로 화면이 뻗는 것을 막아주는 구원자입니다.

• 옵셔널 체이닝 (?.): 객체 안의 객체를 찾을 때, 중간에 값이 null이거나 undefined여도 에러를 내지 않고 안전하게 undefined를 반환합니다. (예: user?.profile?.address)
• 널 병합 연산자 (??): 값이 null이거나 undefined일 때만 우측의 기본값을 보여줍니다. 기존 || 연산자의 버그(숫자 0을 거짓으로 판단하는 문제)를 완벽히 해결했습니다.
• Promise.allSettled() (여러 프로미스의 결과를 모두 배열로 반환)

ES12 (ES2021)

• String.replaceAll() (문자열 내 모든 패턴 교체)
• 과거에는 정규표현식(/단어/g)을 써야만 텍스트 안의 모든 특정 단어를 바꿀 수 있었지만, 이제는 이 메서드 하나로 직관적이고 깔끔하게 전체 교체가 가능해졌습니다.

var, let, const의 차이는 크게 재할당, 중복 선언, 그리고 스코프(유효 범위)로 나눔. 현대 자바스크립트에서는 var를 거의 쓰지 않음.

[주요 차이점 요약]
구분        var                       let                       const
재할당      가능                      가능                      불가능(상수)
중복선언    가능(위험)                불가능                    불가능
스코프      함수단위(Function)        블록 단위 ({ })           블록 단위 ({ }) 
호이스팅    선언전사용가능(undefined) 선언 전 사용 불가 (에러)  선언 전 사용 불가 (에러)

var user = "철수";
var user = "영희"; 
console.log(user); // "영희" 

// [let / const] - 중복 선언 불가  
let score = 100;
// let score = 200; // 에러 발생: SyntaxError (이미 선언된 변수임)

const ID = "admin";
// const ID = "guest"; // 에러 발생: SyntaxError (이미 선언된 변수임)

const ID_OBJ = {id1: 1, id2: 2};
ID_OBJ.id1 = 3;
console.log(ID_OBJ); // Object {id1: 3, id2: 2} // const로 선언해도 객체이거나 배열일 경우 프로퍼티, 프로퍼티 값을 수정 가능

if (true) {
  var varName = "I am var";
}
console.log(varName); // "I am var" (블록 밖에서도 접근 가능)

// [let / const] - 블록 스코프
if (true) {
  let letName = "I am let";
  const constName = "I am const";

  console.log(letName); // "I am let" (안에서는 당연히 가능)
}

• 유일성: Symbol()로 생성한 값은 외형(설명)이 같아도 서로 다른 값으로 취급됩니다.
• 불변성: 한 번 생성되면 변경할 수 없습니다.
• 은닉성: 일반적인 루프(for...in)나 Object.keys()로는 조회되지 않아, 객체의 비밀스러운 프로퍼티를 만들 때 유용합니다.

var sym = Symbol();

// 1. 심벌 생성 (괄호 안의 문자열은 단순 '설명'일 뿐입니다)
const sym1 = Symbol('id');
const sym2 = Symbol('id');

console.log(sym1 === sym2); // false (설명이 같아도 값은 다름)

// 2. 객체의 키로 사용
const user = {
  name: "John",
  [sym1]: 123 // 심벌을 키로 할당
};

console.log(user[sym1]); // 123

// 3. 은닉성 확인 (일반적인 방법으로는 키가 보이지 않음)
for (let key in user) {
  console.log(key); // "name"만 출력되고 sym1은 건너뜀
}

console.log(Object.keys(user)); // ["name"]

• 객체를 만들 때 키(key) 위치에 대괄호 []를 사용하면, 그 안의 내용을 코드로 실행한 결과값을 키로 쓰겠다는 뜻입니다.(이것도 모던자바스크립트)

1.3.2.1 기존의 따옴표(' ', " ") 대신 백틱(backtick, `)을 사용.
1.3.2.2 플레이스 홀더 : ${...} 문법을 사용하여 문자열 중간에 변수나 연산식을 직접 넣음

const name = "Jquery";
const version = "1.0";

// 1. 기존 방식 (ES5) - 따옴표와 + 연산자 사용
const oldWay = "현재 라이브러리는 " + name + "이며 버전은 " + version + "입니다.";

// 2. 템플릿 리터럴 방식 (ES6) - 백틱과 ${} 사용
const newWay = `현재 라이브러리는 ${name}이며 버전은 ${version}입니다.`;

// 3. 줄바꿈 예시
const multiLine = `
  이것은 
  여러 줄을 
  그대로 출력하는 예제입니다.
`;

console.log(newWay);
console.log(multiLine);

1.3.2.3 사용예

// 1. 기존 방식 
var html = "<div class='user'>" + 
           "\n  <h1>이름: " + this.name + "</h1>" + 
           "\n  <p>나이: " + this.age + "</p>" + 
           "\n</div>";              

// 2. 템플릿 리터럴       
const htmlTemplate = `
  <div class="user">
    <h1>이름: ${this.name}</h1>
    <p>나이: ${this.age}</p>
  </div>
`;

📝 2.1.1 : 객체리터럴로 객체생성

var me = {name : "keysub", age: 11};

🔍 2.1.2. 객체안의 값을 읽거나 쓸때는

me.name 혹은 me["age"]

➕ 2.1.3. 없는 프로퍼티 이름에 값을 대입하면 새로운 프로퍼티가 추가됨 :

me.hobby = "수영"; 

❓ 2.1.4. in 연산자로 프로퍼티가 있는지 확인 :

console.log("hobby" in me); // true

변수 이름과 객체의 키(key) 이름이 같다면 한 번만 써도 됨.

const name = "영희";
const age = 30;

// ES5
const user5 = { name: name, age: age };

// ES6 (축약)
const user6 = { name, age }; 
console.log(user6); // { name: "영희", age: 30 }

함수를 정의할 때 function 키워드 생략가능.

const dog = {
  name: "멍멍이",
  // ES5: bark: function() { ... }
  bark() { 
    console.log("월월!");
  }
};

객체의 키 이름을 동적으로(변수나 연산식을 이용해) 정할 수 있음.

const prefix = "user";
const i = 1;

const member = {
  [`${prefix}_${i}`]: "홍길동" // 'user_1' 이라는 키가 생성됨
};
console.log(member.user_1); // "홍길동"

Set을 만드는 방법은 아주 간단합니다. new 키워드를 사용해서 만듭니다.

① 빈 주머니 만들기

const mySet = new Set();

② 처음부터 데이터를 넣어서 만들기 (가장 많이 씀!) 배열 같은 '순회할 수 있는(iterable)' 데이터를 생성자 안에 넣어주면, 중복을 싹 제거하고 Set을 만들어 줍니다.

// 숫자 2와 3이 중복해서 들어있는 배열을 넣어봅니다.
const numbers = new Set([1, 2, 2, 3, 3, 3, 4]);

console.log(numbers); 
// 출력: Set(4) { 1, 2, 3, 4 }  <- 중복된 2와 3이 깔끔하게 하나씩만 남았습니다!

Set은 데이터를 다루기 위해 아주 직관적인 메서드들을 제공합니다.

① 데이터 추가하기 (add)

mySet.add("사과");
mySet.add("바나나");
mySet.add("사과"); // 이미 "사과"가 있으므로 무시됨!

console.log(mySet); // 출력: Set(2) { '사과', '바나나' }

💡 팁: mySet.add(1).add(2); 처럼 체이닝(기차놀이)으로 계속 이어 붙일 수도 있습니다.

② 데이터 확인하기 (has) 주머니 안에 특정 값이 있는지 검사합니다. (배열의 includes와 같은 역할인데, 속도가 훨씬 빠릅니다!)

console.log(mySet.has("사과"));   // 출력: true
console.log(mySet.has("수박"));   // 출력: false

③ 데이터 삭제하기 (delete / clear)

mySet.delete("바나나"); // "바나나"만 쏙 빼서 버림
mySet.clear();        // 주머니 안을 전부 비워버림! (초기화)

④ 크기 확인하기 (size 속성) 배열에서는 길이를 알기 위해 .length를 쓰지만, Set에서는 무조건 .size를 사용해야 합니다.

const animalSet = new Set(["강아지", "고양이", "토끼"]);
console.log(animalSet.size); // 출력: 3

실무에서 Set은 언제 가장 많이 쓸까요? 바로 "배열의 중복을 제거할 때"입니다. 이전에는 배열의 중복을 제거하려면 복잡하게 filter나 반복문을 돌려야 했지만, Set과 전개 구문(...)을 합치면 단 한 줄로 끝납니다.

const dirtyArray = ["홍길동", "이순신", "홍길동", "유관순", "이순신"];

// 1. 배열을 Set으로 만들어서 중복을 날려버리고,
// 2. 다시 대괄호 []와 ... 을 써서 배열로 포장합니다.
const cleanArray = [...new Set(dirtyArray)];

console.log(cleanArray); 
// 출력: [ '홍길동', '이순신', '유관순' ]

사실 자바스크립트에서는 일반 객체({})도 키와 값을 저장하는 사물함 역할을 하지만, Map은 객체의 단점들을 완벽하게 보완해서 나온 업그레이드 버전의 사물함입니다.

2.4.2.1 Map 생성하기

① 빈 사물함 만들기

const myMap = new Map();

② 처음부터 데이터를 넣어서 만들기 Map은 키와 값이 '한 쌍'이어야 하므로, 배열 안에 [키, 값] 형태의 미니 배열을 넣어서 초기화합니다.

const userMap = new Map([
  ["name", "홍길동"],
  ["age", 25],
  ["role", "admin"]
]);

2.4.2.2 Map을 다루는 핵심 메서드

데이터 넣기/수정하기 (set) 사물함(Key)에 물건(Value)을 넣습니다. 이미 같은 이름의 키가 있다면 새로운 값으로 덮어씁니다(수정).

myMap.set("color", "red");
myMap.set("size", 100);
myMap.set("color", "blue"); // "color" 키의 값이 "red"에서 "blue"로 바뀜!

// Set처럼 체이닝도 가능합니다.
myMap.set("a", 1).set("b", 2);

데이터 꺼내기 (get) 키를 주면 해당 값을 반환합니다. 없는 키를 찾으면 undefined가 나옵니다.

console.log(myMap.get("color")); // 출력: "blue"

데이터 확인하기 (has) 해당 키가 존재하는지 확인합니다. (값은 상관없이 키만 찾습니다)

console.log(myMap.has("size"));  // 출력: true

데이터 삭제 및 크기 확인 (delete, clear, size)

myMap.delete("size"); // "size" 키와 그 값을 삭제
console.log(myMap.size); // 현재 들어있는 데이터 쌍의 개수 확인
myMap.clear();        // 사물함 전체 비우기

💡 2.4.2.3. 왜 굳이 객체({}) 대신 Map을 쓸까요?

① 키(Key)로 아무거나 쓸 수 있습니다! (가장 강력한 차이) 일반 객체는 무조건 키를 '문자열(String)'로만 만들어야 합니다. 숫자를 넣어도 내부적으로 문자로 바꿔버리죠. 하지만 Map은 숫자, 불리언(true/false), 심지어 함수나 다른 객체까지도 키(Key)로 사용할 수 있습니다.

const map = new Map();

// 1. 숫자를 키로 사용
map.set(1, "숫자 1입니다"); 

// 2. 다른 객체를 키로 사용 (일반 객체 {} 에서는 절대 불가능한 마법!)
const kim = { id: 101, name: "김철수" };
map.set(kim, "이 유저는 VIP 회원입니다.");

console.log(map.get(kim)); // 출력: "이 유저는 VIP 회원입니다."

② 데이터의 크기를 바로 알 수 있습니다. 일반 객체는 안에 데이터가 몇 개인지 알려면 Object.keys(obj).length처럼 복잡하게 계산해야 하지만, Map은 map.size 하나면 끝납니다.

③ 넣은 순서를 완벽하게 기억합니다. 일반 객체는 데이터를 넣고 나중에 반복문(for)을 돌려보면 우리가 넣은 순서대로 나온다는 보장이 없습니다. 하지만 Map은 무조건 넣은 순서대로만 나옵니다.

const user = {
  name: "손흥민",
  age: 32,
  team: "토트넘"
};

const keys = Object.keys(user);

console.log(keys); 
// 출력: ["name", "age", "team"]

// 응용: 키 배열을 이용해 반복문 돌리기
keys.forEach(key => {
  console.log(`${key}: ${user[key]}`);
});

const scores = {
  korean: 90,
  english: 85,
  math: 100
};

const values = Object.values(scores);

console.log(values); 
// 출력: [90, 85, 100]

// 응용: 점수의 합계 구하기
const totalScore = values.reduce((acc, curr) => acc + curr, 0);
console.log(`총점: ${totalScore}`); // 총점: 275

const user = {
  id: 1,
  role: "admin",
  status: "active"
};

const entries = Object.entries(user);

console.log(entries);
/* 출력:
[
  ["id", 1],
  ["role", "admin"],
  ["status", "active"]
]
*/

// 응용: for...of 문과 구조 분해 할당 조합 (실무 추천🌟)
for (const [key, value] of Object.entries(user)) {
  console.log(`${key} 필드의 값은 ${value}입니다.`);
}

const arr = [
  ['name', '이강인'],
  ['age', 23]
];

const obj = Object.fromEntries(arr);

console.log(obj);
// 출력: { name: "이강인", age: 23 }

const fruits = ['apple', 'banana', 'mango'];

// [과거 ES5 방식]
// indexOf는 값을 찾으면 인덱스 번호(0, 1, 2...)를, 못 찾으면 -1을 반환했습니다.
// 그래서 항상 -1이 아닌지 비교하는 거추장스러운 코드가 필요했습니다.
if (fruits.indexOf('banana') !== -1) {
  console.log("바나나가 있습니다!");
}

// [최신 ES7 방식] 🌟
// 그냥 "이거 포함하고 있어?" 라고 물어보면 깔끔하게 true/false로 대답해 줍니다.
if (fruits.includes('banana')) {
  console.log("바나나가 있습니다!");
}

// 💡 (중요 차이점) NaN(Not a Number) 찾기
// indexOf는 NaN을 찾지 못하지만, includes는 정확하게 찾아냅니다.
const arr = [1, 2, NaN];
console.log(arr.indexOf(NaN));   // -1 (못 찾음)
console.log(arr.includes(NaN));  // true (찾음)

const sentence = "안녕하세요, 자바스크립트 공부 중입니다.";

console.log(sentence.includes("자바스크립트")); // true
console.log(sentence.includes("파이썬"));       // false

// 💡 팁: 두 번째 인자로 '검사를 시작할 위치'를 지정할 수 있습니다.
// 인덱스 10번 이후부터 "안녕"이 있는지 찾습니다.
console.log(sentence.includes("안녕", 10));     // false

const myFruit = 'apple';

// 🚨 [나쁜 예] 조건이 늘어날수록 코드가 무한정 길어짐
if (myFruit === 'apple' || myFruit === 'banana' || myFruit === 'mango') {
  console.log("과일바구니에 있는 과일입니다.");
}

// ✅ [includes 활용] 검사할 항목을 배열로 묶어버림 (실무 권장🌟)
const bucket = ['apple', 'banana', 'mango', 'grape', 'orange'];

if (bucket.includes(myFruit)) {
  console.log("과일바구니에 있는 과일입니다.");
}

const user = {
  name: "손흥민",
  age: 32,
  team: "토트넘"
};

// [ES5 방식] 하나씩 변수를 만들어 대입함
var name = user.name;
var age = user.age;

// [ES6 방식] 한 번에 변수를 생성하고 할당함
const { name, age, team } = user;

console.log(name); // "손흥민"
console.log(team); // "토트넘"

// 만약 변수 이름을 바꾸고 싶다면? (이름: 새이름)
const { name: userName, age: userAge } = user;

console.log(userName); // "손흥민"

const colors = ["Red", "Green", "Blue"];

// [ES5 방식] 하나씩 변수를 만들어 대입함
var first  = colors[0];
var second = colors[1];
var third  = colors[2];

// [ES6 방식] 대괄호 []를 사용함
const [first, second, third] = colors;
console.log(first);  // "Red"
console.log(second); // "Green"

// 특정 순서를 건너뛰고 싶을 때 (쉼표 활용)
const [first_color , , third_color] = colors;
console.log(third_color); // "Blue"

객체 전체를 받아서 dot(.)으로 접근할 필요 없이, 필요한 데이터만 바로 명시할 수 있습니다.

function printUser({ name, age }) {
  console.log(`이름은 ${name}, 나이는 ${age}입니다.`);
}

const person = { name: "이강인", age: 23, city: "파리" };

printUser(person); // "이름은 이강인, 나이는 23입니다."

만약 객체에 해당 데이터가 없을 때 사용할 기본값을 정해줄 수 있습니다.

const { name, hobby = "축구" } = { name: "김민재" };

console.log(hobby); // 객체에 hobby가 없으므로 기본값 "축구" 출력

sayHello(); // 실행 가능! (호이스팅)

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

// sayHi(); // 에러 발생!

const sayHi = function() {
  console.log("반갑습니다!");
};

sayHi(); // 선언 이후에만 호출 가능

4.3.1.1 🦕 기존 방식 (함수 표현식)

const add = function(a, b) {
  return a + b;
};

4.3.1.2 🚀 화살표 함수

const add = (a, b) => {
  return a + b;
};

// 인수가 하나면 () 생략 가능
const add1 = a => { return a + 1; };

// 인수가 없을 땐 () 생략 불가
const add2 = () => { return 1 + 2; };       

// 함수 안의 문장이 return 뿐일 때는 중괄호와 return 생략 가능
const add3 = a => a + 1;                    

// 함수 안의 문장이 return 뿐일 때도 반환값이 객체 리터럴이면 괄호()로 묶어야 함
const f = (a, b) => ({ x: a, y: b });       

4.3.2.1 🦕 기존 함수의 this: "누가 나를 불렀어?" (동적 바인딩) 기존 함수에서 this는 함수가 '실행될 때' 누가 자신을 호출했는지에 따라 시시각각 변합니다.

const user = {
  name: "홍길동",
  sayHi: function() {
    console.log(this.name); // 정상 출력: 홍길동

    // 🚨 문제 발생: 1초 뒤에 인사하는 함수를 내부에 만듦
    setTimeout(function() {
      // 이 내부 함수는 브라우저(window)가 부른 것으로 쳐서 this를 잃어버립니다.
      console.log(`1초 뒤: 안녕, 난 ${this.name}이야`); 
    }, 1000);
  }
};

user.sayHi(); 
// 출력: 홍길동
// 1초 뒤 출력: 안녕, 난 undefined이야  <-- 💥 에러 발생! this를 잃어버림!

4.3.2.2 🚀 화살표 함수의 this: "내가 태어난 고향이 어디야?" (어휘적 바인딩) 화살표 함수는 자신이 만들어진 바깥 환경(고향)의 this를 그대로 가져다 씁니다.

const user = {
  name: "홍길동",
  sayHi: function() {
    console.log(this.name); // 정상 출력: 홍길동

    // ✅ 해결: 화살표 함수 사용
    setTimeout(() => {
      // 화살표 함수는 바깥쪽인 sayHi의 this(user)를 그대로 물려받습니다.
      console.log(`1초 뒤: 안녕, 난 ${this.name}이야`); 
    }, 1000);
  }
};

user.sayHi(); 
// 출력: 홍길동
// 1초 뒤 출력: 안녕, 난 홍길동이야  <-- 🎉 완벽하게 작동!

📦 상황 설정: 서버에서 받아온 고객 데이터 (Raw Data)

const users = [
  { id: 1, name: "홍길동", age: 25, isVip: true },
  { id: 2, name: "이순신", age: 40, isVip: false },
  { id: 3, name: "유관순", age: 18, isVip: true },
  { id: 4, name: "강감찬", age: 35, isVip: false }
];

1. map: "데이터 가공 공장" (형태 바꾸기)

// users 배열을 돌면서, 각 유저(u)의 이름(u.name)만 뽑아 새로운 배열로 만듭니다.
const names = users.map(u => u.name);

console.log(names); 
// 출력: ["홍길동", "이순신", "유관순", "강감찬"]

2. filter: "데이터 거름망" (조건에 맞는 것만 추려내기)

// users 배열을 돌면서, isVip가 true인 유저만 통과시킵니다.
const vipUsers = users.filter(u => u.isVip === true); 

console.log(vipUsers);
/* 출력: 
[
  { id: 1, name: '홍길동', age: 25, isVip: true },
  { id: 3, name: '유관순', age: 18, isVip: true }
]
*/

👑 3. 실무 끝판왕: 체이닝

const vipNames = users
  .filter(u => u.isVip) // 1단계: VIP만 먼저 걸러냄
  .map(u => u.name);    // 2단계: 남은 데이터에서 이름만 뽑아냄

console.log(vipNames); 
// 출력: ["홍길동", "유관순"]

4.4.1. 기본 예제: 함수의 인수를 배열로 받기

function sumAll(...numbers) {
  // numbers는 [1, 2, 3, 4, 5] 라는 배열이 됩니다.
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sumAll(1, 2));           // 3
console.log(sumAll(1, 2, 3, 4, 5));  // 15 

4.4.2. 일반 매개변수와 함께 쓰기 (항상 마지막에 위치해야 함)

function showGrade(name, ...scores) {
  console.log(`${name}님의 점수 개수: ${scores.length}개`);
  console.log(scores); // [90, 85, 100]
}

showGrade("철수", 90, 85, 100);

4.4.3. 구조 분해 할당에서의 Rest

// ① 배열에서의 활용
const [first, ...others] = [1, 2, 3, 4, 5];
console.log(first);  // 1
console.log(others); // [2, 3, 4, 5]

// ② 객체에서의 활용
const user = { id: 1, name: "영희", age: 20, city: "서울" };
const { id, ...userInfo } = user;

console.log(id);       // 1
console.log(userInfo); // { name: "영희", age: 20, city: "서울" }

4.5.1. 배열에서의 전개 구문

const parts = ["어깨", "무릎"];
const body = ["머리", ...parts, "발"]; 

console.log(body); // ["머리", "어깨", "무릎", "발"]

// 배열 복사 (완전히 새로운 배열 생성) 
const original = [1, 2, 3];
const copy = [...original];

4.5.2. 객체에서의 전개 구문

const user = { name: "철수", age: 20 };
const updatedUser = { ...user, city: "서울" };

console.log(updatedUser); // { name: "철수", age: 20, city: "서울" }

4.5.3. Rest(모으기) vs Spread(펼치기) 구분하기 모양은 ...으로 똑같지만, 쓰임새는 정반대임. * Rest: 여러 개의 인자를 받아서 하나의 배열로 만듭니다. (함수 파라미터 영역) * Spread: 하나의 배열/객체를 여러 개의 값으로 쪼개서 넣습니다. (함수 호출이나 선언 밖)

객체의 최상위 레벨만 복사하고, 내부의 중첩된 객체들은 참조값(주소)만 복사.

const original = {
  name: "철수",
  skills: ["JS", "HTML"] // 중첩된 배열(객체)
};

const copy = { ...original }; // 얕은 복사

copy.name = "영희";         // 1단계 값 변경
copy.skills.push("CSS");   // 2단계(중첩 객체) 값 변경

console.log(original.name);   // "철수" (1단계는 영향 없음)
console.log(original.skills); // ["JS", "HTML", "CSS"] (원본도 같이 바뀜!)

객체의 모든 레벨을 완전히 새로운 메모리 공간에 복사. (원본과 복사본 완벽 분리)

const original = {
  name: "철수",
  skills: ["JS", "HTML"]
};

// 최신 브라우저 표준 방식 (추천) structuredClone 사용
const deepCopy = structuredClone(original); 

deepCopy.skills.push("React");

console.log(original.skills); // ["JS", "HTML"] (원본 보존!)
console.log(deepCopy.skills); // ["JS", "HTML", "React"] (복사본만 변경)  

4.7.1. 클로저가 없는 평범한 세계

function sayHello() {
  let name = "홍길동"; // 함수 안에서 변수 생성
  console.log(name);
}

sayHello(); // "홍길동" 출력
// 이 시점에서 함수 실행이 끝났으므로, name이라는 변수는 완전히 파괴됩니다.

4.7.2. 🎒 함수 안에 또 다른 함수(내부 함수)를 만들어서 밖으로 내보내면 변수 유지

function makeCounter() {
  let count = 0; // 1. 고향(외부 함수)의 변수

  // 2. 내부 함수를 만들어서 밖으로 반환(return)합니다.
  return function() { 
    count = count + 1; // 3. 고향의 변수인 count를 사용합니다.
    return count;
  };
}

const myCounter = makeCounter();

// makeCounter()의 실행은 끝났고 count 변수는 파괴되어야 하지만, 계속 작동합니다!
console.log(myCounter()); // 출력: 1
console.log(myCounter()); // 출력: 2
console.log(myCounter()); // 출력: 3

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

// 메서드는 prototype에 명시적으로 추가
Person.prototype.sayHello = function() {
  console.log("안녕하세요, 제 이름은 " + this.name + "입니다.");
};

// new를 사용해 인스턴스 생성
var user1 = new Person("김철수", 25);
user1.sayHello(); // 출력: 안녕하세요, 제 이름은 김철수입니다.

class Person {
  // [요소 2: 속성] 외부에 절대 공개하면 안 되는 데이터 (프라이빗 필드)
  #name;  

  // [요소 1: 생성자] 속성 초기화
  constructor(name) {
    // 이건 this.#name 변수에 직접 값을 할당하는게 아니라 setter 를 호출해주는 것임
    this.name = name; 
  }

  // [요소 4: Getter]
  get name() {
    return this.#name;
  }

  // [요소 4: Setter] 외부에서 이름을 바꾸게 하고 싶다면 setter를 추가
  set name(value) {
    this.#name = value;
  }

  // [요소 3: 메서드] 메서드는 prototype에 자동으로 추가됨.
  sayHello() {
    // 여기서 this.name을 쓰면 자동으로 Getter를 호출해서 값을 가져옴
    console.log(`안녕하세요, 제 이름은 ${this.name}입니다.`);
  }
}

// 인스턴스 생성 방식은 동일
const user = new Person("이영희");
user.sayHello(); // 출력: 안녕하세요, 제 이름은 이영희입니다.

// setter 호출
user.name = "철수"; 

// getter 호출 
console.log(user.name);      // 출력 : 철수

// 프라이빗 필드 직접 접근 시도 (클래스 밖에서는 불가)
// console.log(user.#name);  // 💥 에러 발생!

[math.js] - 부품(모듈)을 만드는 파일

// 선언부 앞에 export를 붙여서 외부로 내보냅니다.
export const PI = 3.141592;

export function add(a, b) {
  return a + b;
}

export const multiply = (a, b) => a * b;

// 💡 (참고) 파일 맨 아래에서 한 번에 묶어서 내보낼 수도 있습니다.
// export { PI, add, multiply };

[app.js] - 부품을 가져와서 사용하는 파일

// 구조 분해 할당처럼 필요한 것만 중괄호 {} 로 묶어서 가져옵니다.
import { PI, add } from './math.js';

console.log(PI);          // 3.141592
console.log(add(10, 20)); // 30

// 💡 만약 가져올 때 이름을 바꾸고 싶다면 'as' 키워드를 사용합니다.
import { multiply as multi } from './math.js';
console.log(multi(2, 5)); // 10

[User.js] - 부품을 만드는 파일

class User {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`안녕하세요, ${this.name}입니다.`);
  }
}

// 이 파일의 대표(default) 모듈로 User 클래스를 지정합니다.
export default User; 

[main.js] - 부품을 가져와서 사용하는 파일

// default로 내보낸 모듈은 괄호 없이 자유로운 이름으로 가져올 수 있습니다.
import Customer from './User.js'; // User를 Customer라는 이름으로 받음

const user1 = new Customer("홍길동");
user1.greet(); // 안녕하세요, 홍길동입니다.

[app.js]

// math.js의 모든 export를 가져와서 'MathUtils'라는 하나의 객체 안에 담습니다.
import * as MathUtils from './math.js';

// 객체의 프로퍼티(점 표기법)를 통해 접근합니다.
console.log(MathUtils.PI);
console.log(MathUtils.add(5, 5));

[index.html]

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>모듈 테스트</title>
</head>
<body>

  <script type="module" src="app.js"></script>

</body>
</html>

• Pending (대기): 비동기 처리가 아직 끝나지 않은 상태 (약속을 했지만 아직 결과가 안 나옴)
• Fulfilled (이행/성공): 비동기 처리가 성공적으로 완료되어 약속한 결과값을 반환한 상태
• Rejected (거부/실패): 비동기 처리가 실패하거나 오류가 발생한 상태

// 서버에서 데이터를 가져오는 상황을 가정해봅니다.
const fetchData = new Promise((resolve, reject) => {
  console.log("데이터를 가져오는 중...");

  setTimeout(() => {
    const success = true; // 통신 성공 여부 (테스트용)

    if (success) {
      // 1. 성공했을 때: resolve() 안에 결과 데이터를 담아서 보냅니다. (상태: Fulfilled)
      resolve({ id: 1, name: "홍길동" }); 
    } else {
      // 2. 실패했을 때: reject() 안에 에러 객체를 담아서 보냅니다. (상태: Rejected)
      reject(new Error("네트워크 오류가 발생했습니다."));
    }
  }, 2000); // 2초 걸리는 작업이라고 가정
});

// 위에서 만든 fetchData(Promise 객체)를 사용해봅시다.

fetchData
  .then((data) => {
    // 1. resolve()가 호출되면 여기가 실행됩니다.
    console.log("✅ 성공:", data); // 출력: ✅ 성공: { id: 1, name: '홍길동' }
  })
  .catch((error) => {
    // 2. reject()가 호출되면 여기가 실행됩니다. (에러 처리)
    console.log("❌ 실패:", error.message);
  })
  .finally(() => {
    // 3. 성공하든 실패하든 마지막에 무조건 한 번 실행됩니다. (로딩 스피너 끌 때 주로 사용)
    console.log("🏁 모든 작업이 끝났습니다.");
  });

// 서버에서 번호를 가져오고 -> 그 번호로 사용자를 찾고 -> 그 사용자의 게시글을 찾는 연속된 작업

const fetchNumber = new Promise((resolve) => {
  setTimeout(() => resolve(1), 1000);
});

fetchNumber
  .then(num => {
    console.log(`첫 번째 결과: ${num}`); // 1
    return num * 10; // return 하면 이 값이 다음 .then()으로 넘어갑니다. (자동으로 새로운 Promise가 됨)
  })
  .then(num => {
    console.log(`두 번째 결과: ${num}`); // 10
    return num * 10;
  })
  .then(num => {
    console.log(`세 번째 결과: ${num}`); // 100
  })
  .catch(error => {
    // 중간에 어디서든 에러가 터지면, 가장 가까운 catch 하나가 모두 잡아냅니다.
    console.log("에러 발생!", error);
  });

const p1 = new Promise(resolve => setTimeout(() => resolve("1번 데이터"), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve("2번 데이터"), 2000));

// 1. Promise.all()
// 모든 약속이 '성공'할 때까지 기다렸다가, 한 번에 배열로 결과를 받습니다. 
// (단, 하나라도 실패하면 전체가 즉시 catch로 빠져버림)
Promise.all([p1, p2])
  .then(results => console.log("모두 완료:", results)); 
  // 2초 뒤 출력: 모두 완료: ["1번 데이터", "2번 데이터"]

// 2. Promise.race()
// 달리기 경주처럼 여러 작업 중 '가장 먼저 끝난 것' 하나의 결과만 가져옵니다.
Promise.race([p1, p2])
  .then(result => console.log("1등:", result)); 
  // 1초 뒤 출력: 1등: 1번 데이터

const p1 = new Promise(resolve => setTimeout(() => resolve("성공 데이터"), 1000));
const p2 = new Promise((_, reject) => setTimeout(() => reject("실패 에러"), 2000));

Promise.allSettled([p1, p2])
  .then(results => console.log(results));

/*
출력 결과 (2초 뒤 배열 반환):
[
  { status: "fulfilled", value: "성공 데이터" },
  { status: "rejected", reason: "실패 에러" }
]
*/

• async: 함수 앞에 붙이면, 그 함수는 무조건 Promise 객체를 반환하는 함수로 변신합니다.
• await: 반드시 async 함수 안에서만 쓸 수 있습니다. Promise 작업이 끝날 때까지 코드 실행을 '잠깐 멈추고 기다려주는(await)' 역할을 합니다. (즉, .then()을 대체합니다)

[기존 방식] Promise 체이닝 (.then 사용)

function getUser() {
  // fetch()는 서버에서 데이터를 가져오는 내장 Promise 함수입니다.
  fetch('[https://jsonplaceholder.typicode.com/users/1](https://jsonplaceholder.typicode.com/users/1)')
    .then(response => response.json())
    .then(user => {
      console.log("사용자 이름:", user.name);
    })
    .catch(error => {
      console.log("에러 발생:", error);
    });
}

[최신 방식] async / await 사용 🌟 (실무 표준)

// 함수 앞에 async를 붙여줍니다.
async function getUserAsync() {
  // await를 쓰면 데이터가 올 때까지 기다렸다가, 오면 왼쪽 변수에 쏙 넣어줍니다.
  const response = await fetch('[https://jsonplaceholder.typicode.com/users/1](https://jsonplaceholder.typicode.com/users/1)');
  const user = await response.json();

  // 콜백 함수(화살표) 없이 위에서 아래로 물 흐르듯 읽힙니다!
  console.log("사용자 이름:", user.name);
}

getUserAsync();

async function getUserSafe() {
  try {
    // 1. 실행할 코드를 try 안에 넣습니다.
    const response = await fetch('https://잘못된_[주소.com/users/1](https://주소.com/users/1)');
    const user = await response.json();
    console.log(user);

  } catch (error) {
    // 2. try 안에서 에러가 터지면 코드가 멈추지 않고 즉시 catch로 넘어옵니다.
    console.log("❌ 통신 중 문제가 발생했습니다!", error.message);

  } finally {
    // 3. (선택사항) 성공하든 실패하든 마지막에 실행됩니다.
    console.log("로딩 화면 종료");
  }
}

🚨 느린 방식 (순차 처리)

async function getDashboardData() {
  // 날씨를 가져오는데 2초 대기
  const weather = await fetch('/api/weather'); 
  // 그 다음 뉴스를 가져오는데 2초 대기 (총 4초 소요)
  const news = await fetch('/api/news');       
}

🚀 빠른 방식 (병렬 처리 - Promise.all 활용) 동시에 가져와도 되는 데이터라면 Promise.all과 묶어서 사용합니다.

async function getDashboardDataFast() {
  // 두 요청을 동시에 쏘고, 둘 다 끝날 때까지(await) 한 번만 기다립니다. (총 2초 소요)
  const [weather, news] = await Promise.all([
    fetch('/api/weather'),
    fetch('/api/news')
  ]);

  console.log("데이터 로딩 완료!");
}

const user = {
  name: "홍길동",
  // profile 정보가 아예 없는 유저라고 가정해봅니다.
};

// 🚨 [위험] 에러 발생! undefined.address를 읽으려고 시도했기 때문입니다.
// console.log(user.profile.address); 

// 🦖 [과거 ES5 방식] 에러를 막기 위해 && 연산자를 기차처럼 연결해야 했습니다.
if (user && user.profile && user.profile.address) {
  console.log(user.profile.address);
} else {
  console.log("주소 정보가 없습니다.");
}

const user = { name: "홍길동" };

// ✅ [최신 ES11 방식] 
// "user 안에 profile이 혹시 있니? (?. ) 있으면 address도 찾아줘!"
const address = user?.profile?.address;

console.log(address); 
// 에러가 나지 않고 조용히 'undefined'를 출력합니다.

// 1. 배열 요소에 안전하게 접근하기
const users = null;
// users가 배열이 아니거나 null이어도 에러 없이 undefined 반환
console.log(users?.[0]?.name); 

// 2. 함수(메서드) 안전하게 호출하기
const admin = {
  adminPlay() {
    console.log("관리자 모드 실행!");
  }
};
const guest = {};

// adminPlay라는 함수가 존재할 때만 실행해라!
admin.adminPlay?.(); // "관리자 모드 실행!"
guest.adminPlay?.(); // 에러 없이 조용히 넘어감

// 쇼핑몰 상품 장바구니 수량을 0개로 설정했다고 가정해봅시다.
const count = 0;

// 개발자의 의도: "count 값이 아예 없으면 기본값 10을 넣어줘!"
const result = count || 10; 

console.log(result); 
// 출력: 10 (버그 발생💥)
// 자바스크립트는 숫자 0을 '거짓(false)'으로 취급하기 때문에 사용자가 입력한 0을 무시해버립니다.

const count = 0;
const text = "";

// ✅ [최신 ES11 방식]
const safeCount = count ?? 10;
const safeText = text ?? "기본 텍스트";

console.log(safeCount); // 출력: 0 (정상 작동! 0을 값으로 인정함)
console.log(safeText);  // 출력: "" (정상 작동! 빈 문자열도 값으로 인정함)

// 오직 null 이나 undefined 일 때만 기본값을 반환합니다.
const notExist = null ?? "기본값 작동";
console.log(notExist);  // 출력: "기본값 작동"

const user = {
  name: "이순신",
  // profile 정보가 없음
};

// "유저의 거주 도시(city)를 찾되, 중간에 터지지 않게(?. ) 하고,
// 만약 최종적으로 값이 없다면(?? ) '알 수 없음' 이라고 띄워줘!"

const userCity = user?.profile?.city ?? "알 수 없음";

console.log(`거주지: ${userCity}`); 
// 출력: 거주지: 알 수 없음

const text = "사과, 바나나, 사과, 포도, 사과";

// 1. 기존 replace() 사용 (첫 번째 '사과'만 '수박'으로 바뀜)
const result1 = text.replace("사과", "수박");
console.log(result1); 
// 출력: "수박, 바나나, 사과, 포도, 사과"

// 2. [과거 ES11 이전] 전체를 바꾸려면 복잡한 '정규표현식(Regex)'과 글로벌 플래그(g)를 꼭 써야 했습니다.
const result2 = text.replace(/사과/g, "수박");
console.log(result2); 
// 출력: "수박, 바나나, 수박, 포도, 수박"

const text = "사과, 바나나, 사과, 포도, 사과";

// ✅ [최신 ES12 방식] 그냥 바꾸고 싶은 단어를 문자열로 넣으면 끝!
const finalResult = text.replaceAll("사과", "수박");

console.log(finalResult); 
// 출력: "수박, 바나나, 수박, 포도, 수박"

// 사용자가 입력한 지저분한 전화번호 데이터
const dirtyPhone = "010-1234-5678 (본인)";

// '-' 기호를 모두 없애고, '(본인)' 이라는 글자도 없애고 싶을 때 (체이닝 사용)
const cleanPhone = dirtyPhone
  .replaceAll("-", "")       // 모든 하이픈 제거
  .replaceAll(" (본인)", ""); // " (본인)" 텍스트 제거

console.log(cleanPhone); 
// 출력: "01012345678"