필수 JS + TS 핵심 문법 정리

1
2
3
4
5
const name = 'Kim'
let count = 0

count = 1 // let은 재할당 가능
// name = 'Lee' // 에러, const는 재할당 불가

1
2
3
4
5
6
7
8
let message = '바깥'

if (true) {
  let message = '안쪽' // 블록 안에서만 유효한 별개의 변수
  console.log(message) // '안쪽'
}

console.log(message) // '바깥'

1
2
3
4
5
for (var i = 0; i < 3; i++) {}
console.log(i) // 3, 블록 밖에서도 접근됨

for (let j = 0; j < 3; j++) {}
// console.log(j) // 에러, j는 반복문 블록 안에서만 유효

1
2
3
4
5
6
1 === 1 // true
'abc' === 'abc' // true, 원시 타입은 값으로 비교

const obj1 = { a: 1 }
const obj2 = { a: 1 }
obj1 === obj2 // false, 내용이 같아도 다른 객체

1
2
3
4
5
const a = [1, 2]
const b = a // 같은 배열을 가리킴, 복사가 아님

b.push(3)
console.log(a) // [1, 2, 3], a도 함께 바뀜

1
2
3
4
5
6
7
function addItem(cart, item) {
  cart.push(item) // 전달받은 배열을 직접 변경
}

const cart = ['사과']
addItem(cart, '바나나')
console.log(cart) // ['사과', '바나나'], 원본이 바뀜

1
2
3
4
5
6
7
8
const name = 'Kim'
const age = 20
const id = 7
const page = 2

const greeting = `안녕하세요, ${name}님` // 변수 보간
const info = `${name}님은 ${age}세, 내년에는 ${age + 1}세입니다` // 표현식도 보간 가능
const url = `/api/users/${id}?page=${page}` // '/api/users/7?page=2', 주소 조합에 자주 사용

1
2
3
4
5
6
const isActive = true
const html = `
  <li class="${isActive ? 'active' : ''}">
    ${name}
  </li>
` // isActive가 true면 class="active"

1
2
3
4
'1' == 1 // true, 자동 변환되어 혼란을 줌
'1' === 1 // false, 타입까지 비교
null == undefined // true
null === undefined // false

1
2
3
if (list.length) {} // 길이가 0이면 실행되지 않음
if (user) {} // user가 null이나 undefined면 실행되지 않음
if ([]) {} // 빈 배열도 Truthy라 실행됨

1
const label = count > 0 ? `${count}개` : '없음'

1
2
const title = user.nickname || '익명' // nickname이 없으면 '익명'
isOpen && close() // isOpen이 참일 때만 close 호출

1
2
const page = options.page || 1 // page가 0이면 1로 바뀜
const page2 = options.page ?? 1 // page가 0이면 0 유지, null이나 undefined일 때만 1

1
config.timeout ??= 3000 // timeout이 없을 때만 3000 대입

1
2
3
4
5
6
7
const user = { profile: { name: 'Kim' } }

user.profile.name // 'Kim'
// user.account.name // 에러, account가 undefined라 그 다음 접근에서 멈춤
user.account?.name // undefined, 에러 없이 넘어감

user.profile?.address?.city // 단계마다 안전하게 접근

1
2
user.getName?.() // getName이 있을 때만 호출
list?.[0] // list가 있을 때만 첫 요소 접근

1
const city = user.profile?.address?.city ?? '주소 없음'

1
2
3
4
5
6
7
8
9
function add(a, b) { // 함수 선언식
  return a + b
}

const subtract = function (a, b) { // 함수 표현식
  return a - b
}

const multiply = (a, b) => a * b // 화살표 함수

1
2
3
4
5
6
const double = n => n * 2 // 매개변수 1개는 괄호 생략 가능
const makeUser = name => ({ name }) // 객체 반환은 소괄호로 감쌈
const area = (w, h) => { // 본문이 여러 줄이면 중괄호와 return 사용
  const result = w * h
  return result
}

1
2
3
4
const greet = (name = '손님') => `안녕하세요, ${name}`

greet('Kim') // '안녕하세요, Kim'
greet() // '안녕하세요, 손님'

1
2
3
4
5
6
function request({ url, method = 'GET', retry = 0 }) { // 객체를 받아 바로 분해
  console.log(method, url, retry)
}

request({ url: '/api/users' }) // 'GET', '/api/users', 0
request({ url: '/api/users', method: 'POST' }) // 'POST', '/api/users', 0

1
2
3
4
5
6
7
8
9
10
11
12
const button = document.querySelector('button')

button.addEventListener('click', () => {
  console.log('클릭됨') // 클릭될 때마다 실행
})

setTimeout(() => {
  console.log('1초 뒤 실행')
}, 1000)

const nums = [1, 2, 3]
nums.forEach(n => console.log(n)) // 요소마다 실행

1
2
3
4
5
6
function handleClick() {
  console.log('클릭됨')
}

button.addEventListener('click', handleClick) // 함수 자체를 전달
button.addEventListener('click', handleClick()) // 즉시 실행한 결과(undefined)를 전달, 실수

1
button.addEventListener('click', () => handleClick('저장')) // 클릭 시점에 handleClick('저장') 실행

1
2
3
4
5
const user = { id: 1, name: 'Kim', age: 20 }

const { name, age } = user // 필요한 값만 추출
const { name: userName } = user // userName이라는 다른 이름으로
const { role = 'guest' } = user // 값이 없으면 기본값 'guest'

1
2
3
const data = { user: { name: 'Kim', address: { city: '서울' } } }

const { user: { address: { city } } } = data // city는 '서울'

1
2
3
4
5
function printUser({ name, age }) {
  console.log(`${name} (${age})`)
}

printUser(user) // 'Kim (20)'

1
2
const [first, second] = [10, 20] // first는 10, second는 20
const [, , third] = [1, 2, 3] // 앞 두 개는 건너뛰고 third는 3

1
2
3
4
5
6
7
8
9
10
function getSize(el) {
  return [el.offsetWidth, el.offsetHeight] // 순서로 구분
}
const [width, height] = getSize(box)

function parseNumber(text) {
  const value = Number(text)
  return { value, ok: !Number.isNaN(value) } // 이름으로 구분
}
const { value, ok } = parseNumber('42') // value는 42, ok는 true

1
2
3
4
5
6
7
8
const a = [1, 2]
const b = [3, 4]

const merged = [...a, ...b] // [1, 2, 3, 4]
const copy = [...a] // 원본과 별개인 복사본

const base = { name: 'Kim', age: 20 }
const updated = { ...base, age: 21 } // age만 덮어쓴 새 객체

1
2
const nums = [5, 2, 8]
Math.max(...nums) // Math.max(5, 2, 8)과 동일, 8

1
2
3
const defaults = { theme: 'light', lang: 'ko' }
const custom = { lang: 'en' }
const settings = { ...defaults, ...custom } // { theme: 'light', lang: 'en' }

1
2
3
4
5
6
7
8
9
10
11
const [head, ...tail] = [1, 2, 3, 4] // head는 1, tail은 [2, 3, 4]

const { id, ...rest } = { id: 1, name: 'Kim', age: 20 }
// id는 1, rest는 { name: 'Kim', age: 20 }

function sum(...numbers) { // 인자들을 배열로 모음, numbers는 [1, 2, 3]
  let total = 0
  for (const n of numbers) total += n
  return total
}
sum(1, 2, 3) // 6

1
const { password, ...safeUser } = user // password를 뺀 나머지만 safeUser에

1
2
3
4
5
6
7
8
9
10
11
12
const users = [
  { name: 'Kim', age: 20, active: true },
  { name: 'Lee', age: 17, active: false },
  { name: 'Park', age: 25, active: true }
]

const names = users.map(u => u.name) // ['Kim', 'Lee', 'Park']
const adults = users.filter(u => u.age >= 20) // Kim, Park
const lee = users.find(u => u.name === 'Lee') // { name: 'Lee', ... }
const hasActive = users.some(u => u.active) // true
const allAdults = users.every(u => u.age >= 20) // false
const totalAge = users.reduce((sum, u) => sum + u.age, 0) // 62

1
2
3
4
const byName = users.reduce((acc, u) => {
  acc[u.name] = u // 이름을 키로 하는 객체로 변환
  return acc
}, {}) // { Kim: {...}, Lee: {...}, Park: {...} }

1
2
3
const activeNames = users
  .filter(u => u.active)
  .map(u => u.name) // ['Kim', 'Park']

1
2
3
4
5
const nums = [10, 9, 1]

nums.toSorted() // [1, 10, 9], 문자열 기준 정렬
nums.toSorted((a, b) => a - b) // [1, 9, 10], 오름차순
users.toSorted((a, b) => b.age - a.age) // 나이 내림차순

1
2
3
4
5
6
7
8
for (const user of users) {
  if (!user.active) continue
  console.log(user.name)
}

for (const [index, user] of users.entries()) {
  console.log(index, user.name) // 인덱스가 필요할 때
}

1
2
3
const user = { name: 'Kim' }
user.name = 'Lee' // 가능, 내부 값 변경
// user = {} // 에러, 재할당

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

nums.sort() // 원본이 바뀜, nums는 [1, 2, 3]
const sorted = [...nums].sort() // 복사본만 정렬
const sorted2 = nums.toSorted() // 새 배열 반환, 원본 유지

1
2
3
4
5
6
7
const user = { name: 'Kim', age: 20 }
const updated = { ...user, age: 21 } // 복사 후 일부만 변경

const list = [1, 2, 3]
const added = [...list, 4] // 추가, [1, 2, 3, 4]
const removed = list.filter(n => n !== 2) // 삭제, [1, 3]
const doubled = list.map(n => n * 2) // 변경, [2, 4, 6]

1
2
3
4
5
const origin = { info: { age: 20 } }
const copy = { ...origin }

copy.info.age = 30
console.log(origin.info.age) // 30, 안쪽 객체는 공유됨

1
2
3
4
const deep = structuredClone(origin) // 안쪽 객체까지 별도로 복사

deep.info.age = 40
console.log(origin.info.age) // 30, 원본은 그대로

1
2
3
4
const next = {
  ...origin,
  info: { ...origin.info, age: 40 } // 안쪽 객체도 새로 만듦
}

1
2
3
4
5
6
7
8
9
10
const name = 'Kim'
const age = 20

const user = {
  name, // name: name
  age,
  greet() { // greet: function () { ... }
    return `안녕하세요, ${this.name}입니다`
  }
}

1
2
3
4
5
6
7
const key = 'score'
const obj = { [key]: 100 } // { score: 100 }

const form = { email: '', password: '' }
function update(field, value) {
  return { ...form, [field]: value } // 어떤 필드든 같은 함수로 갱신
}

1
2
3
4
5
6
7
8
9
10
11
12
13
const scores = { kim: 90, lee: 85 }

Object.keys(scores) // ['kim', 'lee']
Object.values(scores) // [90, 85]
Object.entries(scores) // [['kim', 90], ['lee', 85]]

for (const [name, score] of Object.entries(scores)) {
  console.log(`${name}: ${score}`) // 'kim: 90', 'lee: 85'
}

const passed = Object.fromEntries(
  Object.entries(scores).filter(([, score]) => score >= 90)
) // { kim: 90 }

1
2
3
4
5
const json = JSON.stringify({ name: 'Kim', age: 20 }) // '{"name":"Kim","age":20}'
const user = JSON.parse(json) // { name: 'Kim', age: 20 }

localStorage.setItem('user', JSON.stringify(user)) // 저장할 때 문자열로
const saved = JSON.parse(localStorage.getItem('user')) // 꺼낼 때 다시 객체로

1
2
3
4
5
6
7
8
9
10
11
12
const tags = ['js', 'ts', 'js']
const unique = [...new Set(tags)] // ['js', 'ts']

const set = new Set([1, 2])
set.add(3)
set.has(2) // true
set.size // 3

const map = new Map()
map.set('kim', { age: 20 })
map.set(button, 'clicked') // 객체도 키로 사용 가능
map.get('kim') // { age: 20 }

1
2
3
4
console.log(1)
setTimeout(() => console.log(2), 0) // 0초 뒤라도 나중에 실행
console.log(3)
// 출력 순서: 1, 3, 2

1
2
3
4
fetchUser()
  .then(user => console.log(user.name)) // 이행되면 실행
  .catch(error => console.log(error.message)) // 거부되면 실행
  .finally(() => console.log('요청 종료')) // 항상 실행

1
2
3
4
fetchUser()
  .then(user => fetchPosts(user.id)) // 앞 결과로 다음 작업 수행
  .then(posts => console.log(posts))
  .catch(error => console.log(error)) // 어느 단계에서 실패해도 여기로

1
2
3
4
5
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

delay(1000).then(() => console.log('1초 후 실행'))

1
2
3
4
5
6
7
async function load() {
  const user = await fetchUser()
  const posts = await fetchPosts(user.id) // user를 받은 뒤 실행
  return posts // Promise로 감싸져 반환
}

load().then(posts => console.log(posts))

1
2
3
4
5
6
7
8
9
10
11
async function load() {
  try {
    const user = await fetchUser()
    return user
  } catch (error) {
    console.log('불러오기 실패:', error.message)
    return null
  } finally {
    setLoading(false) // 성공하든 실패하든 실행
  }
}

1
2
3
4
5
6
7
async function getUser(id) {
  const response = await fetch(`/api/users/${id}`)
  if (!response.ok) { // 404, 500 같은 HTTP 에러는 거부되지 않으므로 직접 확인
    throw new Error(`요청 실패: ${response.status}`)
  }
  return await response.json() // 본문을 객체로 변환
}

1
2
3
4
5
const response = await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Kim', age: 20 })
})

1
2
const user = await fetchUser() // 1초
const config = await fetchConfig() // 1초, 앞 작업이 끝난 뒤 시작

1
const [user, config] = await Promise.all([fetchUser(), fetchConfig()])

1
2
3
4
5
6
const results = await Promise.allSettled([fetchUser(), fetchConfig()])

for (const result of results) {
  if (result.status === 'fulfilled') console.log(result.value) // 성공한 결과
  else console.log(result.reason) // 실패한 이유
}

1
2
3
4
5
for (const id of ids) {
  await deleteUser(id) // 하나씩 순서대로
}

await Promise.all(ids.map(id => deleteUser(id))) // 모두 동시에

1
2
import { format } from 'date-fns' // 설치한 패키지
import { add } from './math.js' // 직접 작성한 파일

1
2
3
4
button.addEventListener('click', async () => {
  const { default: Chart } = await import('./chart.js') // 클릭 시점에 불러옴
  new Chart()
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Counter {
  count = 0 // 필드

  constructor(start) {
    this.count = start
  }

  increase() { // 메소드
    this.count += 1
    return this.count
  }
}

const counter = new Counter(10)
counter.increase() // 11
counter instanceof Counter // true, Counter로 만든 인스턴스인지 확인

1
2
3
4
5
6
7
8
9
10
11
12
class HttpError extends Error {
  constructor(status, message) {
    super(message) // 부모 클래스의 constructor 호출
    this.status = status
  }
}

try {
  throw new HttpError(404, '찾을 수 없음')
} catch (error) {
  if (error instanceof HttpError) console.log(error.status) // 404
}

1
2
let count: number = 0
count = '3' // 편집기에서 바로 에러로 표시됨

1
2
let count = 0
count = '3' // 타입이 사라지고 코드만 남음

1
2
3
let title: string = 'Hello'
let age: number = 20
let isOpen: boolean = false

1
2
3
4
5
const ids: number[] = [1, 2, 3]
const names: string[] = ['Kim', 'Lee']

const user: { id: number; name: string } = { id: 1, name: 'Kim' }
const users: { id: number; name: string }[] = [] // 객체의 배열

1
2
3
4
5
6
7
function add(a: number, b: number): number {
  return a + b
}

const greet = (name: string): void => {
  console.log(`${name}님`)
}

1
2
3
4
5
6
7
let count = 0 // number로 추론
let text = 'hi' // string으로 추론
const user = { id: 1, name: 'Kim' } // { id: number; name: string }으로 추론

function double(x: number) {
  return x * 2 // 반환 타입이 number로 추론
}

1
2
const items: string[] = [] // 빈 배열은 요소 타입을 알 수 없으므로 작성
items.push('a') // string만 추가 가능

1
2
3
4
5
6
7
8
9
let value: string | number // 문자열 또는 숫자
value = 'hello'
value = 42

let status: 'idle' | 'loading' | 'done' // 이 세 값만 허용
status = 'loading'
// status = 'stop' // 에러

let user: User | null = null // 비어 있을 수 있는 값, User는 다음 절에서 정의하는 객체 타입

1
2
3
4
5
6
type Status = 'idle' | 'loading' | 'done'
type Size = 'sm' | 'md' | 'lg'

function setSize(size: Size) {}
setSize('md')
// setSize('xl') // 에러

1
2
3
4
const SIZES = ['sm', 'md', 'lg'] as const // readonly ['sm', 'md', 'lg']
type Size = (typeof SIZES)[number] // 'sm' | 'md' | 'lg'

SIZES.map(size => `<option>${size}</option>`) // 값으로도 사용

1
2
3
4
5
6
7
8
9
10
interface User {
  id: number
  name: string
}

interface Admin extends User { // User의 속성을 물려받아 확장
  role: string
}

const admin: Admin = { id: 1, name: 'Kim', role: 'owner' }

1
2
3
type ID = number | string // 유니언에 이름 붙이기
type Handler = (event: MouseEvent) => void // 함수 타입
type Admin = User & { role: string } // 두 객체 타입 합치기

1
2
3
4
5
6
7
8
9
interface Props {
  title: string
  subtitle?: string // 없어도 됨, string | undefined
  readonly id: number // 읽기 전용
}

const props: Props = { title: '제목', id: 1 }
props.subtitle?.toUpperCase() // 없을 수 있으므로 ?.로 접근
// props.id = 2 // 에러, readonly

1
2
3
4
5
6
7
8
interface ButtonProps {
  label: string
  onClick: (event: MouseEvent) => void // 함수 타입
  onChange?: (value: string) => void // 선택적 속성
}

type Calculator = (a: number, b: number) => number
const sum: Calculator = (a, b) => a + b // 매개변수 타입은 Calculator에서 추론

1
2
import type { User } from './types' // 타입만 가져옴
import { fetchUser, type Role } from './api' // 값과 타입을 함께 가져올 때는 항목 앞에 type

1
2
3
4
5
6
function format(value: string | number) {
  if (typeof value === 'string') {
    return value.toUpperCase() // 이 블록 안에서는 string
  }
  return value.toFixed(2) // 여기서는 number
}

1
2
3
4
function getName(user: User | null) {
  if (!user) return '이름 없음' // null이면 먼저 반환
  return user.name // 이 아래에서는 User로 확정
}

1
2
3
4
5
6
7
8
9
10
11
type Result =
  | { ok: true; data: User }
  | { ok: false; error: string }

function handle(result: Result) {
  if (result.ok) {
    console.log(result.data.name) // ok가 true인 형태로 좁혀져 data 사용 가능
  } else {
    console.log(result.error) // 여기서는 error만 존재
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
let a: any = JSON.parse(text)
a.foo.bar // 검사하지 않음, 실행 중에 에러 가능

let u: unknown = JSON.parse(text)
// u.name // 에러, 확인 전에는 사용 불가
if (typeof u === 'object' && u !== null && 'name' in u) {
  console.log(u.name) // 좁힌 뒤에 사용
}

function fail(message: string): never {
  throw new Error(message) // 정상적으로 값을 반환하지 않음
}

1
2
3
4
5
6
try {
  await fetchUser()
} catch (error) { // tsconfig의 strict 옵션이 켜져 있으면 error는 unknown
  const message = error instanceof Error ? error.message : String(error)
  console.log(message)
}

1
2
3
4
5
// getElementById의 반환 타입은 HTMLElement | null이라 value 속성이 없음
const input = document.getElementById('email') as HTMLInputElement
input.value = 'test@mail.com' // HTMLInputElement로 단언했으니 value 사용 가능

const data = JSON.parse(text) as User // 파싱 결과를 User로 간주, 실제 값은 확인하지 않음

1
2
const el = document.querySelector('input') // 타입: HTMLInputElement | null
el!.focus() // null이 아니라고 단언, 확신할 때만 사용

1
2
const el = document.querySelector('input')
if (el) el.focus() // 확인 뒤 사용, 없을 때도 안전

1
2
3
4
5
6
function first<T>(arr: T[]): T {
  return arr[0]
}

const n = first<number>([1, 2, 3]) // T가 number, 반환도 number
const s = first(['a', 'b']) // 인자에서 T를 string으로 추론

1
2
3
4
async function getUser(id: number): Promise<User> { // User를 담은 Promise
  const response = await fetch(`/api/users/${id}`)
  return response.json()
}

1
const [user, setUser] = useState<User | null>(null) // 상태에 담을 타입 전달

1
const user = ref<User | null>(null)

1
2
3
4
5
6
7
interface ApiResponse<T> {
  data: T
  status: number
}

const userResponse: ApiResponse<User> = { data: { id: 1, name: 'Kim' }, status: 200 }
const listResponse: ApiResponse<User[]> = { data: [], status: 200 }

1
2
3
4
5
6
function getId<T extends { id: number }>(item: T) {
  return item.id // id가 있다고 보장되므로 사용 가능
}

getId({ id: 1, name: 'Kim' })
// getId({ name: 'Kim' }) // 에러, id가 없음

1
2
3
4
5
6
7
8
9
10
11
12
13
interface User {
  id: number
  name: string
  email: string
}

type UserUpdate = Partial<User> // { id?: number; name?: string; email?: string }
type UserPreview = Pick<User, 'id' | 'name'> // { id: number; name: string }
type UserForm = Omit<User, 'id'> // id를 뺀 나머지, 생성 폼에 사용
type UsersById = Record<number, User> // 숫자 키에 User를 담는 객체

function update(id: number, changes: UserUpdate) {}
update(1, { name: 'Lee' }) // 바꿀 속성만 전달

1
2
const user = (await response.json()) as User // 서버가 다른 형태를 보내도 검사되지 않음
user.name.toUpperCase() // name이 없으면 실행 중 에러

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function isUser(value: unknown): value is User { // 참이면 value를 User로 좁힘
  return (
    typeof value === 'object' &&
    value !== null &&
    'id' in value &&
    typeof value.id === 'number' &&
    'name' in value &&
    typeof value.name === 'string'
  )
}

const data: unknown = await response.json()
if (isUser(data)) {
  console.log(data.name) // 확인된 뒤에는 User로 사용
}