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

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

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

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

1
// 일반 함수
2
function add1(a, b) {
3
  return a + b;
4
}
5

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

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

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

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

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

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

1
// 일반 함수의 this
2
const user1 = {
3
  name: '철수',
4
  sayHi: function() {
5
    console.log('안녕 ' + this.name); // this는 user1 객체
6
  }
7
};
8
user1.sayHi();                  // '안녕 철수'
9

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

19
// React 이벤트 핸들러에서 자주 사용
20
const button = {
21
  text: '클릭',
22
  handleClick: function() {
23
    // 일반 함수: bind 필요
24
    setTimeout(function() {
25
      console.log(this.text); // undefined
26
    }, 1000);
27
  },
28
  handleClickArrow: function() {
29
    // 화살표 함수: bind 불필요
30
    setTimeout(() => {
31
      console.log(this.text); // '클릭'
32
    }, 1000);
33
  }
34
};

1
const name = '철수';
2
const age = 20;
3

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

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

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

13
// 여러 줄 문자열
14
const html = `
15
  <div>
16
    <h1>${name}</h1>
17
    <p>${age}세</p>
18
  </div>
19
`;
20

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

1
// ========== 객체 구조 분해 ==========
2
const user = {
3
  name: '철수',
4
  age: 20,
5
  job: '개발자'
6
};
7

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

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

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

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

25

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

29
// 기존 방식
30
const first1 = arr[0];
31
const second1 = arr[1];
32

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

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

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

46

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

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

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

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

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

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

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

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

19

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

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

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

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

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

40

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7

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

13

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

18

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

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

28

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9
console.log(result);            // 24

1
const age = 20;
2

3
// 기존 방식 (if-else)
4
let msg1;
5
if (age >= 20) {
6
  msg1 = '성인';
7
} else {
8
  msg1 = '미성년';
9
}
10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5
  setTimeout(() => {            // 2초 후 실행
6
    if (success) {
7
      resolve('성공!');        // 성공 시
8
    } else {
9
      reject('실패!');         // 실패 시
10
    }
11
  }, 2000);
12
});
13

14
// Promise 사용
15
promise
16
  .then(result => {             // 성공 시 실행
17
    console.log(result);        // '성공!'
18
  })
19
  .catch(error => {             // 실패 시 실행
20
    console.log(error);
21
  });

1
// API 호출 함수 (예시)
2
function fetchUser(id) {
3
  return new Promise(resolve => {
4
    setTimeout(() => {
5
      resolve({ id, name: '철수' });
6
    }, 1000);
7
  });
8
}
9

10
// 기존 방식 (then 사용)
11
fetchUser(1)
12
  .then(user => {
13
    console.log(user);
14
  });
15

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

22
getUser();

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

1
const name = '철수';
2
const age = 20;
3

4
// ========== 단축 속성 ==========
5
// 기존 방식
6
const user1 = {
7
  name: name,
8
  age: age
9
};
10

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

15

16
// ========== 메서드 단축 ==========
17
// 기존 방식
18
const obj1 = {
19
  sayHi: function() {
20
    console.log('안녕');
21
  }
22
};
23

24
// 단축 (function 키워드 생략)
25
const obj2 = {
26
  sayHi() {
27
    console.log('안녕');
28
  }
29
};
30

31

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

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

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

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

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

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

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

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

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

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

1
const users = [
2
  { name: '철수', age: 17 },
3
  { name: '영희', age: 22 },
4
  { name: '민수', age: 19 },
5
  { name: '지영', age: 25 }
6
];
7

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

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

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

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

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

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

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

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