// let: 재할당 가능한 변수
let age = 20;
age = 21;                       // 값 변경 가능
console.log(age);               // 21 출력

// const: 재할당 불가능한 상수
const name = '철수';
// name = '영희';               // 오류 발생! const는 재할당 불가

// const 배열과 객체
const arr = [1, 2, 3];
arr.push(4);                    // 배열 내용 변경은 가능
console.log(arr);               // [1, 2, 3, 4]
// arr = [5, 6];                // 오류! 배열 자체를 재할당은 불가

const obj = { a: 1 };
obj.a = 2;                      // 객체 속성 변경은 가능
obj.b = 3;                      // 새 속성 추가도 가능
console.log(obj);               // { a: 2, b: 3 }

// 일반 함수
function add1(a, b) {
  return a + b;
}

// 화살표 함수 - 기본형
const add2 = (a, b) => {
  return a + b;
};

// 화살표 함수 - 간단한 형태 (return과 중괄호 생략)
const add3 = (a, b) => a + b;

// 매개변수가 하나일 때 (소괄호 생략 가능)
const double = x => x * 2;

// 매개변수가 없을 때 (소괄호 필수)
const greet = () => '안녕';

// 객체 반환 시 소괄호로 감싸기
const getUser = id => ({ id: id, name: '철수' });

console.log(add3(5, 3));        // 8
console.log(double(4));         // 8
console.log(getUser(1));        // { id: 1, name: '철수' }

// 일반 함수의 this
const user1 = {
  name: '철수',
  sayHi: function() {
    console.log('안녕 ' + this.name); // this는 user1 객체
  }
};
user1.sayHi();                  // '안녕 철수'

// 화살표 함수의 this
const user2 = {
  name: '영희',
  sayHi: () => {
    console.log('안녕 ' + this.name); // this는 상위 스코프의 this
  }
};
user2.sayHi();                  // '안녕 undefined'

// React 이벤트 핸들러에서 자주 사용
const button = {
  text: '클릭',
  handleClick: function() {
    // 일반 함수: bind 필요
    setTimeout(function() {
      console.log(this.text); // undefined
    }, 1000);
  },
  handleClickArrow: function() {
    // 화살표 함수: bind 불필요
    setTimeout(() => {
      console.log(this.text); // '클릭'
    }, 1000);
  }
};

const name = '철수';
const age = 20;

// 기존 방식
const msg1 = '이름: ' + name + ', 나이: ' + age;

// 템플릿 리터럴
const msg2 = `이름: ${name}, 나이: ${age}`;

// 표현식 사용
const msg3 = `내년 나이: ${age + 1}세`;

// 여러 줄 문자열
const html = `
  <div>
    <h1>${name}</h1>
    <p>${age}세</p>
  </div>
`;

console.log(msg2);              // 이름: 철수, 나이: 20

// ========== 객체 구조 분해 ==========
const user = {
  name: '철수',
  age: 20,
  job: '개발자'
};

// 기존 방식
const name1 = user.name;        // 하나씩 추출
const age1 = user.age;

// 구조 분해 할당
const { name, age, job } = user; // 한 번에 추출
console.log(name);              // '철수'
console.log(age);               // 20

// 변수명 변경
const { name: userName, age: userAge } = user;
console.log(userName);          // '철수'

// 기본값 설정
const { name: n, city = '서울' } = user;
console.log(city);              // '서울' (user에 city가 없음)


// ========== 배열 구조 분해 ==========
const arr = [1, 2, 3, 4, 5];

// 기존 방식
const first1 = arr[0];
const second1 = arr[1];

// 구조 분해 할당
const [first, second] = arr;    // 순서대로 추출
console.log(first);             // 1
console.log(second);            // 2

// 일부만 추출
const [a, , c] = arr;           // 중간 값 건너뛰기 (쉼표로)
console.log(a, c);              // 1 3

// 나머지 요소
const [x, ...rest] = arr;       // 첫 번째 제외하고 나머지
console.log(rest);              // [2, 3, 4, 5]


// ========== 함수 매개변수에서 구조 분해 (React Props에서 자주 사용) ==========
// 기존 방식
function greet1(user) {
  console.log(`안녕 ${user.name}`);
}

// 구조 분해 활용
function greet2({ name, age }) { // 필요한 속성만 추출
  console.log(`안녕 ${name}, ${age}세`);
}

const person = { name: '철수', age: 20 };
greet2(person);                 // 안녕 철수, 20세

// 기본값과 함께 사용
function greet3({ name, age = 18 }) {
  console.log(`${name}님은 ${age}세입니다`);
}
greet3({ name: '영희' });       // 영희님은 18세입니다

// ========== 배열 스프레드 ==========
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 배열 합치기
const arr3 = [...arr1, ...arr2];
console.log(arr3);              // [1, 2, 3, 4, 5, 6]

// 배열 복사 (새로운 배열 생성)
const copy = [...arr1];
copy.push(4);
console.log(arr1);              // [1, 2, 3] (원본 그대로)
console.log(copy);              // [1, 2, 3, 4]

// 요소 추가
const arr4 = [0, ...arr1, 4];
console.log(arr4);              // [0, 1, 2, 3, 4]


// ========== 객체 스프레드 ==========
const user = { name: '철수', age: 20 };

// 객체 복사
const userCopy = { ...user };

// 속성 추가
const user2 = { ...user, job: '개발자' };
console.log(user2);             // { name: '철수', age: 20, job: '개발자' }

// 속성 덮어쓰기
const user3 = { ...user, age: 21 };
console.log(user3);             // { name: '철수', age: 21 }

// 여러 객체 합치기
const a = { x: 1, y: 2 };
const b = { y: 3, z: 4 };
const c = { ...a, ...b };       // y는 b의 값으로 덮어써짐
console.log(c);                 // { x: 1, y: 3, z: 4 }


// ========== React에서 불변성 유지 예시 ==========
// 잘못된 방식 (원본 수정)
const state = { count: 0, user: { name: '철수' } };
state.count = 1;                // 원본 수정 (React에서 감지 못함)

// 올바른 방식 (새 객체 생성)
const newState = { ...state, count: 1 };

// 중첩 객체 업데이트
const newState2 = {
  ...state,
  user: { ...state.user, name: '영희' }
};

const nums = [1, 2, 3, 4, 5];

// 각 요소에 2를 곱한 새 배열
const doubled = nums.map(num => num * 2);
console.log(doubled);           // [2, 4, 6, 8, 10]

// 객체 배열 변환
const users = [
  { id: 1, name: '철수' },
  { id: 2, name: '영희' }
];
const names = users.map(user => user.name);
console.log(names);             // ['철수', '영희']

// HTML 문자열 생성 (React JSX와 유사)
const items = nums.map(num => `<li>${num}</li>`);
console.log(items);             // ['<li>1</li>', '<li>2</li>', ...]

// React에서 사용 예시
const userList = users.map(user => ({
  id: user.id,
  displayName: user.name.toUpperCase()
}));
console.log(userList);          // [{ id: 1, displayName: '철수' }, ...]

const nums = [1, 2, 3, 4, 5];

// forEach는 반환값이 없음 (undefined 반환)
const result1 = nums.forEach(num => {
  console.log(num);             // 1, 2, 3, 4, 5 출력
});
console.log(result1);           // undefined

// 외부 변수 수정 (부수 효과)
let sum = 0;
nums.forEach(num => {
  sum += num;
});
console.log(sum);               // 15

// map은 새 배열 반환
const result2 = nums.map(num => num * 2);
console.log(result2);           // [2, 4, 6, 8, 10]

const nums = [1, 2, 3];

// ========== map: 새 배열 생성 (React 렌더링에 사용) ==========
const doubled = nums.map(num => num * 2);
console.log(doubled);           // [2, 4, 6]


// ========== forEach: 반복만 수행 (로깅, 부수효과에 사용) ==========
nums.forEach(num => {
  console.log(num * 2);         // 2, 4, 6 출력 (반환값 없음)
});


// ========== 잘못된 사용 예시 ==========
const wrong = nums.forEach(num => num * 2);
console.log(wrong);             // undefined (의미 없음)


// ========== 올바른 사용 ==========
// map: 데이터 변환이 필요할 때
const newArr = nums.map(num => ({ value: num }));

// forEach: 단순 반복 작업
nums.forEach((num, idx) => {
  console.log(`${idx}: ${num}`);
});


// ========== React 실전 예시 ==========
const users = [
  { id: 1, name: '철수', active: true },
  { id: 2, name: '영희', active: false },
  { id: 3, name: '민수', active: true }
];

// React에서 사용: map으로 JSX 배열 생성
const userList = users.map(user => `<li key=${user.id}>${user.name}</li>`);

// 단순 출력: forEach 사용
console.log('=== 사용자 목록 ===');
users.forEach(user => {
  console.log(`${user.id}. ${user.name}`);
});

// 체이닝 가능 여부
const activeNames = users
  .filter(user => user.active)  // map은 체이닝 가능
  .map(user => user.name);      // filter 후 map
console.log(activeNames);       // ['철수', '민수']

// forEach는 체이닝 불가
// users.forEach(...).map(...); // 오류! forEach는 undefined 반환

const nums = [1, 2, 3, 4, 5, 6];

// 짝수만 추출
const evens = nums.filter(num => num % 2 === 0);
console.log(evens);             // [2, 4, 6]

// 객체 배열 필터링
const users = [
  { name: '철수', age: 20 },
  { name: '영희', age: 17 },
  { name: '민수', age: 25 }
];

const adults = users.filter(user => user.age >= 20);
console.log(adults);            // [{ name: '철수', age: 20 }, { name: '민수', age: 25 }]

const users = [
  { id: 1, name: '철수' },
  { id: 2, name: '영희' },
  { id: 3, name: '민수' }
];

// id가 2인 사용자 찾기
const user = users.find(user => user.id === 2);
console.log(user);              // { id: 2, name: '영희' }

// 없으면 undefined 반환
const notFound = users.find(user => user.id === 99);
console.log(notFound);          // undefined

const nums = [1, 2, 3, 4, 5];

// 합계 구하기
const sum = nums.reduce((acc, cur) => acc + cur, 0);
// acc: 누적값(처음엔 0), cur: 현재값
console.log(sum);               // 15

// 객체로 변환
const users = ['철수', '영희', '민수'];
const obj = users.reduce((acc, name, idx) => {
  acc[idx] = name;
  return acc;                   // 누적값 반환 필수
}, {});                         // 초기값은 빈 객체
console.log(obj);               // { 0: '철수', 1: '영희', 2: '민수' }

const nums = [1, 2, 3, 4, 5, 6];

// 짝수만 필터링 → 2배 → 합계
const result = nums
  .filter(num => num % 2 === 0)   // [2, 4, 6]
  .map(num => num * 2)            // [4, 8, 12]
  .reduce((acc, cur) => acc + cur, 0); // 24

console.log(result);            // 24

const age = 20;

// 기존 방식 (if-else)
let msg1;
if (age >= 20) {
  msg1 = '성인';
} else {
  msg1 = '미성년';
}

// 삼항 연산자
const msg2 = age >= 20 ? '성인' : '미성년';
console.log(msg2);              // '성인'

// 중첩 사용 (비추천 - 복잡함)
const score = 85;
const grade = score >= 90 ? 'A' :
              score >= 80 ? 'B' :
              score >= 70 ? 'C' : 'D';
console.log(grade);             // 'B'

// React에서 사용 예시
const isLogin = true;
const message = isLogin ? '환영합니다' : '로그인 해주세요';

const isLogin = true;
const user = { name: '철수' };

// && : 왼쪽이 true면 오른쪽 실행
const msg1 = isLogin && '로그인됨';
console.log(msg1);              // '로그인됨'

const msg2 = !isLogin && '로그인 필요';
console.log(msg2);              // false

// React에서 자주 사용
const display = isLogin && `환영합니다, ${user.name}님`;
console.log(display);           // '환영합니다, 철수님'

const name1 = '';               // 빈 문자열 (falsy)
const name2 = null;             // null (falsy)
const name3 = '철수';           // 문자열 (truthy)

// || : 왼쪽이 falsy면 오른쪽 사용
const display1 = name1 || '게스트';
const display2 = name2 || '게스트';
const display3 = name3 || '게스트';

console.log(display1);          // '게스트'
console.log(display2);          // '게스트'
console.log(display3);          // '철수'

const count1 = 0;               // 0은 falsy지만 유효한 값
const count2 = null;            // null

// || 사용 (문제 있음)
const result1 = count1 || 10;
console.log(result1);           // 10 (잘못된 결과 - 0을 무시함)

// ?? 사용 (올바름)
const result2 = count1 ?? 10;   // 0은 null/undefined가 아니므로 0 반환
const result3 = count2 ?? 10;   // null이므로 10 반환

console.log(result2);           // 0 (올바른 결과)
console.log(result3);           // 10

const user1 = {
  name: '철수',
  addr: { city: '서울' }
};
const user2 = { name: '영희' }; // addr 속성 없음

// 기존 방식 (에러 발생 가능)
// console.log(user2.addr.city); // 오류! Cannot read property 'city' of undefined

// 안전한 방식
console.log(user2.addr && user2.addr.city); // undefined

// Optional Chaining 사용
console.log(user1.addr?.city);  // '서울'
console.log(user2.addr?.city);  // undefined (에러 없음)

// 메서드 호출에도 사용
const obj = { getName: () => '철수' };
console.log(obj.getName?.());   // '철수'
console.log(obj.getAge?.());    // undefined (메서드 없어도 에러 없음)

// Promise 생성
const promise = new Promise((resolve, reject) => {
  const success = true;

  setTimeout(() => {            // 2초 후 실행
    if (success) {
      resolve('성공!');        // 성공 시
    } else {
      reject('실패!');         // 실패 시
    }
  }, 2000);
});

// Promise 사용
promise
  .then(result => {             // 성공 시 실행
    console.log(result);        // '성공!'
  })
  .catch(error => {             // 실패 시 실행
    console.log(error);
  });

// API 호출 함수 (예시)
function fetchUser(id) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id, name: '철수' });
    }, 1000);
  });
}

// 기존 방식 (then 사용)
fetchUser(1)
  .then(user => {
    console.log(user);
  });

// async/await 사용
async function getUser() {      // async 함수 선언
  const user = await fetchUser(1); // await로 Promise 기다림
  console.log(user);            // { id: 1, name: '철수' }
}

getUser();

async function loadData() {
  try {                         // 에러 처리 시작
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    console.log(data);
  } catch (error) {             // 에러 발생 시
    console.log('에러:', error);
  }
}

const name = '철수';
const age = 20;

// ========== 단축 속성 ==========
// 기존 방식
const user1 = {
  name: name,
  age: age
};

// 단축 속성 (변수명과 같으면 생략 가능)
const user2 = { name, age };
console.log(user2);             // { name: '철수', age: 20 }


// ========== 메서드 단축 ==========
// 기존 방식
const obj1 = {
  sayHi: function() {
    console.log('안녕');
  }
};

// 단축 (function 키워드 생략)
const obj2 = {
  sayHi() {
    console.log('안녕');
  }
};


// ========== 계산된 속성명 ==========
const key = 'name';
const user3 = {
  [key]: '철수',                // 변수를 속성명으로 사용
  [`${key}2`]: '영희'           // 표현식도 가능
};
console.log(user3);             // { name: '철수', name2: '영희' }

// 잘못된 생각
const obj = { a: 1 };
// obj = { b: 2 };              // 오류! const는 재할당 불가

// 올바른 방법
const obj = { a: 1 };
obj.a = 2;                      // 객체 속성 변경은 가능
obj.b = 3;                      // 새 속성 추가도 가능
console.log(obj);               // { a: 2, b: 3 }

// 잘못된 코드 (중괄호를 코드 블록으로 인식)
const getUser = id => { id: id, name: '철수' };
console.log(getUser(1));        // undefined

// 올바른 코드 (소괄호로 감싸기)
const getUser = id => ({ id: id, name: '철수' });
console.log(getUser(1));        // { id: 1, name: '철수' }

// 잘못된 코드 (중괄호 사용 시 return 필요)
const nums = [1, 2, 3];
const doubled = nums.map(num => { num * 2 });
console.log(doubled);           // [undefined, undefined, undefined]

// 올바른 코드 1 (중괄호 없으면 자동 return)
const doubled = nums.map(num => num * 2);

// 올바른 코드 2 (return 명시)
const doubled = nums.map(num => { return num * 2; });

// 잘못된 코드 (forEach는 undefined 반환)
const nums = [1, 2, 3];
const doubled = nums.forEach(num => num * 2);
console.log(doubled);           // undefined

// 올바른 코드 (map 사용)
const doubled = nums.map(num => num * 2);
console.log(doubled);           // [2, 4, 6]

const users = [
  { name: '철수', age: 17 },
  { name: '영희', age: 22 },
  { name: '민수', age: 19 },
  { name: '지영', age: 25 }
];

// 답:
const result = users
  .filter(user => user.age >= 20)
  .map(user => user.name);
// ['영희', '지영']

const user = { name: '철수', age: 20, job: '개발자' };

// 답:
const { name, ...rest } = user;
console.log(name);              // '철수'
console.log(rest);              // { age: 20, job: '개발자' }

// 기존 코드
function getData() {
  fetch('https://api.example.com/data')
    .then(res => res.json())
    .then(data => console.log(data));
}

// 답:
async function getData() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  console.log(data);
}

const nums = [1, 2, 3, 4, 5];

// A. 각 숫자에 10을 더한 새 배열이 필요함
const result1 = nums.map(num => num + 10);

// B. 각 숫자를 콘솔에 출력만 하고 싶음
nums.forEach(num => console.log(num));