잼코딩

JavaScript 심화 ③ 배열 메서드, Date 객체, 비동기 처리

잼coding — Tue, 6 Oct 2026 16:37:36 +0900

이번에는 배열을 더욱 편리하게 다룰 수 있는 순회 및 탐색 메서드, 배열을 새로운 형태로 가공하는 변형 메서드, 날짜와 시간을 다루는 Date 객체, 그리고 JavaScript에서 중요한 동기와 비동기 처리에 대해 정리한다.

특히 forEach, map, filter, find와 같은 배열 메서드는 실제 웹 개발과 React에서도 매우 자주 사용하기 때문에 동작 방식의 차이를 정확하게 이해해두는 것이 중요하다.

1. 배열의 순회 및 탐색 메서드

배열의 요소를 하나씩 확인하거나 원하는 값을 찾을 때 사용할 수 있는 대표적인 메서드는 다음과 같다.

forEach()
includes()
indexOf()
findIndex()
find()

각각 비슷해 보이지만 반환하는 값과 목적이 다르다.

2. forEach()

forEach()는 배열의 모든 요소를 하나씩 순회하면서 원하는 동작을 수행하는 메서드이다.

let arr1 = [1, 2, 3];

arr1.forEach(function (item, index, arr) {

    console.log(index, item);
});

콜백 함수에는 기본적으로 다음과 같은 값이 전달된다.

item  → 현재 요소
index → 현재 요소의 인덱스
arr   → 현재 순회 중인 원본 배열

예를 들어

let arr = ["A", "B", "C"];

arr.forEach((item, index) => {

    console.log(index, item);
});

결과는 다음과 같다.

0 A
1 B
2 C

일반적인 for문보다 배열의 요소를 간단하게 순회할 수 있다.

3. forEach 활용

각 요소를 두 배로 만들어 새로운 배열에 저장해보자.

let arr1 = [1, 2, 3];

let doubledArr = [];

arr1.forEach((item) => {

    doubledArr.push(item * 2);
});

console.log(doubledArr);

결과

[2, 4, 6]

forEach() 자체가 새로운 배열을 만들어주는 것은 아니다.

현재 예제에서는 doubledArr라는 배열을 따로 만들고 push()를 사용했다.

이처럼 값을 변환해서 새로운 배열을 만들 목적이라면 이후에 나올 map()이 더 적합하다.

4. includes()

includes()는 배열에 특정 값이 존재하는지 확인한다.

let arr2 = [1, 2, 3];

let isInclude = arr2.includes(3);

console.log(isInclude);

결과

true

값이 존재하면 true, 존재하지 않으면 false를 반환한다.

console.log(arr2.includes(10));

결과

false

따라서 단순하게

이 배열 안에 이 값이 존재하는가?

를 확인할 때 사용하기 좋다.

5. indexOf()

indexOf()는 배열에서 특정 값을 찾아 해당 값의 인덱스를 반환한다.

let arr3 = [1, 2, 3];

let index = arr3.indexOf(2);

console.log(index);

결과

배열의 인덱스는 0부터 시작하기 때문에 숫자 2의 위치는 1이다.

찾으려는 값이 없다면 -1을 반환한다.

console.log(arr3.indexOf(10));

결과

-1

6. 객체 배열에서 indexOf 사용 시 주의점

객체 배열에서는 indexOf() 사용 시 주의해야 한다.

let objectArr = [

    { name: "정재민" },

    { name: "홍길동" }
];

console.log(
    objectArr.indexOf({ name: "정재민" })
);

겉으로 보기에는 배열 안에 동일한 객체가 존재하기 때문에 0이 나올 것 같지만 결과는

-1

이다.

왜냐하면 객체는 내부 값이 아니라 참조값을 기준으로 비교하기 때문이다.

{ name: "정재민" } === { name: "정재민" }

결과는

false

이다.

서로 따로 생성된 객체이기 때문이다.

객체 내부의 특정 값을 기준으로 찾고 싶다면 findIndex()를 사용할 수 있다.

7. findIndex()

findIndex()는 배열의 모든 요소를 순회하면서 콜백 함수의 조건을 만족하는 첫 번째 요소의 인덱스를 반환한다.

let arr4 = [1, 2, 3];

const findedIndex = arr4.findIndex(
    (item) => item % 2 !== 0
);

console.log(findedIndex);

첫 번째 홀수는 1이고 인덱스가 0이므로 결과는

이다.

객체 배열에서 활용

let objectArr = [

    { name: "정재민" },

    { name: "홍길동" }
];

const index = objectArr.findIndex(
    (item) => item.name === "정재민"
);

console.log(index);

결과

indexOf()와 달리 객체 자체를 비교하는 것이 아니라

item.name === "정재민"

이라는 조건을 직접 작성할 수 있다.

따라서 객체 배열에서는 findIndex()가 매우 유용하다.

8. find()

find()는 findIndex()와 비슷하지만 인덱스가 아니라 조건을 만족하는 요소 자체를 반환한다.

let arr5 = [

    { name: "정재민" },

    { name: "문지수" }
];

const finded = arr5.find(
    (item) => item.name === "정재민"
);

console.log(finded);

결과

{
    name: "정재민"
}

정리하면

findIndex() → 위치 반환

find() → 요소 자체 반환

이다.

9. includes, indexOf, findIndex, find 비교

네 가지 메서드는 무엇을 찾느냐에 따라 구분하면 이해하기 쉽다.

메서드목적반환값

includes()	값 존재 여부	true / false
indexOf()	값의 위치 검색	index
findIndex()	조건을 만족하는 요소 위치	index
find()	조건을 만족하는 요소 검색	요소

10. 배열 변형 메서드

이번에는 기존 배열을 이용해 새로운 결과를 만드는 메서드를 정리한다.

대표적으로 다음 메서드를 살펴본다.

filter()
map()
sort()
toSorted()
join()

11. filter()

filter()는 배열의 요소 중에서 조건을 만족하는 요소들만 모아 새로운 배열로 반환한다.

let arr1 = [

    {
        name: "정재민",
        hobby: "테니스"
    },

    {
        name: "김효빈",
        hobby: "테니스"
    },

    {
        name: "홍길동",
        hobby: "독서"
    }
];

const tennisPeople = arr1.filter(
    (item) => item.hobby === "테니스"
);

console.log(tennisPeople);

결과

[
    {
        name: "정재민",
        hobby: "테니스"
    },

    {
        name: "김효빈",
        hobby: "테니스"
    }
]

콜백 함수가 true를 반환하는 요소만 새로운 배열에 포함된다.

쉽게 말하면

조건에 맞는 데이터만 골라낸다.

라고 이해하면 된다.

12. map()

map()은 배열의 모든 요소를 순회하면서 각각의 요소를 변환한 뒤 변환 결과를 모아 새로운 배열을 반환한다.

let arr2 = [1, 2, 3];

const mapResult = arr2.map((item) => {

    return item * 2;
});

console.log(mapResult);

결과

[2, 4, 6]

화살표 함수를 사용하면 더 간결하게 작성할 수 있다.

const mapResult = arr2.map(
    (item) => item * 2
);

13. 객체 배열에서 map 사용

객체 배열에서 특정 프로퍼티만 뽑아낼 수도 있다.

let people = [

    {
        name: "정재민",
        hobby: "테니스"
    },

    {
        name: "김효빈",
        hobby: "테니스"
    },

    {
        name: "홍길동",
        hobby: "독서"
    }
];

let names = people.map(
    (item) => item.name
);

console.log(names);

결과

["정재민", "김효빈", "홍길동"]

실제 API 데이터를 가공할 때 매우 자주 사용하는 패턴이다.

14. forEach와 map의 차이

두 메서드 모두 배열 전체를 순회하기 때문에 처음에는 비슷해 보인다.

하지만 목적이 다르다.

forEach

arr.forEach((item) => {

    console.log(item);
});

주로 각 요소에 대해 어떤 동작을 실행하는 목적으로 사용한다.

map

const newArr = arr.map(
    (item) => item * 2
);

각 요소를 변환하여 새로운 배열을 만드는 목적으로 사용한다.

정리하면

forEach → 하나씩 뭔가 실행

map → 하나씩 변환해서 새로운 배열 생성

이라고 생각하면 편하다.

15. filter와 map을 같이 사용하기

실제 개발에서는 여러 배열 메서드를 연결해서 사용하는 경우도 많다.

const people = [

    {
        name: "정재민",
        hobby: "테니스"
    },

    {
        name: "김효빈",
        hobby: "테니스"
    },

    {
        name: "홍길동",
        hobby: "독서"
    }
];

const tennisNames = people
    .filter((person) => person.hobby === "테니스")
    .map((person) => person.name);

console.log(tennisNames);

결과

["정재민", "김효빈"]

먼저

filter()

로 테니스를 좋아하는 사람만 추리고,

그 결과에서

map()

을 사용해 이름만 가져온 것이다.

이러한 방식을 **메서드 체이닝(Method Chaining)**이라고 한다.

16. sort()

sort()는 배열을 정렬하는 메서드이다.

문자열 배열을 정렬해보자.

let arr = ["b", "a", "c"];

arr.sort();

console.log(arr);

결과

["a", "b", "c"]

17. 숫자 배열에서 sort 사용 시 주의점

숫자 배열에서는 그냥 sort()를 사용하면 주의해야 한다.

sort()의 기본 정렬은 숫자의 크기를 그대로 비교하는 것이 아니라 문자열처럼 비교하는 방식을 사용한다.

따라서 숫자는 비교 함수를 전달해주는 것이 좋다.

let arr3 = [10, 3, 5];

arr3.sort((a, b) => {

    if (a > b) {

        return 1;

    } else if (b > a) {

        return -1;

    } else {

        return 0;
    }
});

console.log(arr3);

결과

[3, 5, 10]

18. sort 비교 함수 이해하기

sort()의 비교 함수에서는 반환값에 따라 순서가 결정된다.

음수 → a를 b보다 앞에 배치

양수 → b를 a보다 앞에 배치

0 → 순서를 유지

숫자를 오름차순으로 정렬할 때는 훨씬 간단하게 작성할 수 있다.

arr3.sort((a, b) => a - b);

내림차순은 반대로 작성한다.

arr3.sort((a, b) => b - a);

19. sort는 원본 배열을 수정한다

sort()에서 특히 중요한 특징이다.

const numbers = [3, 1, 2];

numbers.sort();

console.log(numbers);

기존 numbers 배열 자체가 정렬된다.

즉, sort()는 원본 배열을 변경하는 메서드이다.

20. toSorted()

toSorted()는 sort()와 비슷하게 배열을 정렬하지만 중요한 차이가 있다.

원본 배열을 변경하지 않고 정렬된 새로운 배열을 반환한다.

let arr5 = ["c", "a", "b"];

const sorted = arr5.toSorted();

console.log(arr5);

console.log(sorted);

결과

["c", "a", "b"]

["a", "b", "c"]

기존 배열은 그대로 유지된다.

정리하면

sort()
→ 원본 배열 수정

toSorted()
→ 원본 유지 + 새로운 배열 반환

이다.

불변성을 중요하게 생각하는 코드에서는 toSorted()가 유용할 수 있다.

21. join()

join()은 배열의 모든 요소를 하나의 문자열로 합친다.

let arr6 = [
    "hi",
    "im",
    "jaemin"
];

const joined = arr6.join();

console.log(joined);

결과

hi,im,jaemin

기본 구분자는 쉼표 ,이다.

22. join의 구분자 변경

원하는 문자열을 구분자로 지정할 수도 있다.

const joined = arr6.join(" ");

console.log(joined);

결과

hi im jaemin

다음처럼 사용할 수도 있다.

arr6.join("-");

결과

hi-im-jaemin

배열의 값을 화면에 문자열 형태로 보여줘야 할 때 유용하다.

배열 메서드 한 번에 정리

메서드역할결과

forEach()	모든 요소 순회	별도 반환 배열 없음
includes()	특정 값 존재 확인	Boolean
indexOf()	값의 위치 검색	index
findIndex()	조건 만족 요소의 위치 검색	index
find()	조건 만족 요소 검색	요소
filter()	조건 만족 요소만 추출	새 배열
map()	모든 요소 변환	새 배열
sort()	배열 정렬	원본 변경
toSorted()	배열 정렬	새 배열
join()	배열을 문자열로 결합	String

23. Date 객체

JavaScript에서는 날짜와 시간을 다루기 위해 Date 객체를 사용한다.

현재 날짜와 시간을 만들려면 new Date()를 사용할 수 있다.

let date1 = new Date();

console.log(date1);

실행하는 시점의 날짜와 시간이 저장된다.

24. 특정 날짜의 Date 객체 생성

특정 날짜를 전달해서 Date 객체를 만들 수도 있다.

let date2 = new Date("1997-01-07T10:10:10");

console.log(date2);

날짜와 시간을 문자열로 전달할 때는 가능한 한 표준적인 형태를 사용하는 것이 좋다.

YYYY-MM-DDTHH:mm:ss

예를 들면

new Date("1997-01-07T10:10:10");

처럼 사용할 수 있다.

또는 숫자를 따로 전달할 수도 있다.

let date3 = new Date(
    1997,
    0,
    7,
    10,
    10,
    10
);

여기서 주의할 점은 월(month)은 0부터 시작한다는 것이다.

0  → 1월
1  → 2월
2  → 3월
...
11 → 12월

25. 타임스탬프

타임스탬프(Timestamp)는 특정 기준 시점부터 얼마나 시간이 지났는지를 숫자로 나타낸 값이다.

JavaScript의 Date에서는 기본적으로

1970년 1월 1일 00:00:00 UTC

를 기준으로 몇 밀리초가 지났는지를 나타낸다.

현재 날짜의 타임스탬프를 가져오려면 getTime()을 사용한다.

let date1 = new Date();

let timestamp = date1.getTime();

console.log(timestamp);

결과는 다음과 같이 큰 숫자로 나온다.

1750000000000

실제 값은 실행 시점에 따라 달라진다.

26. 타임스탬프로 Date 생성

타임스탬프를 이용해 다시 날짜 객체를 만들 수도 있다.

let date1 = new Date();

let ts1 = date1.getTime();

let date2 = new Date(ts1);

console.log(date1);
console.log(date2);

두 Date 객체는 같은 시점을 나타낸다.

타임스탬프는 날짜끼리 비교하거나 시간을 계산할 때 유용하다.

27. Date에서 시간 요소 가져오기

Date 객체에서는 연도, 월, 일, 시간 등을 각각 추출할 수 있다.

let date = new Date();

let year = date.getFullYear();

let month = date.getMonth() + 1;

let day = date.getDate();

let hour = date.getHours();

let minute = date.getMinutes();

let seconds = date.getSeconds();

console.log(
    year,
    month,
    day,
    hour,
    minute,
    seconds
);

28. getMonth()에 +1 하는 이유

JavaScript의 월은 0부터 시작한다.

date.getMonth();

에서

0  → 1월
1  → 2월
2  → 3월
...

이기 때문에 우리가 일반적으로 사용하는 월로 표현하려면

date.getMonth() + 1

처럼 1을 더해야 한다.

29. 날짜 수정하기

Date 객체에 저장된 날짜와 시간을 수정할 수도 있다.

let date = new Date();

date.setFullYear(2023);

date.setMonth(2);

date.setDate(30);

date.setHours(23);

date.setMinutes(59);

date.setSeconds(59);

각각 다음 값을 변경한다.

setFullYear() → 연도

setMonth() → 월

setDate() → 일

setHours() → 시

setMinutes() → 분

setSeconds() → 초

setMonth(2)는 3월을 의미한다.

30. Date 출력 형식 변경

Date 객체에는 날짜와 시간을 다양한 형태의 문자열로 출력하는 메서드가 있다.

toDateString()

console.log(
    date.toDateString()
);

날짜 중심의 문자열로 표현한다.

toLocaleString()

console.log(
    date.toLocaleString()
);

사용자의 로케일 환경에 맞는 날짜와 시간 형식으로 변환한다.

한국 환경이라면 일반적으로 한국에서 익숙한 날짜·시간 형식으로 표시된다.

특정 로케일을 직접 지정할 수도 있다.

console.log(
    date.toLocaleString("ko-KR")
);

31. JavaScript의 동기 처리

JavaScript 코드는 기본적으로 **동기적(Synchronous)**으로 실행된다.

동기적이라는 것은 작성된 코드가 기본적으로 위에서 아래로 순서대로 실행된다는 의미이다.

console.log(1);

console.log(2);

console.log(3);

결과

1
2
3

앞의 코드가 끝나야 다음 코드가 실행된다.

32. 비동기 처리

하지만 웹 개발에서는 시간이 오래 걸리는 작업이 많다.

예를 들면

서버에서 데이터 받아오기

파일 처리

타이머

사용자 이벤트 기다리기

등이 있다.

이런 작업이 끝날 때까지 JavaScript의 전체 실행이 멈춰버리면 웹 페이지가 제대로 동작하기 어렵다.

이를 해결하기 위해 비동기(Asynchronous) 처리를 활용한다.

33. setTimeout()

JavaScript에서 가장 간단하게 비동기 동작을 확인할 수 있는 방법 중 하나가 setTimeout()이다.

console.log(1);

setTimeout(() => {

    console.log(2);

}, 3000);

console.log(3);

코드를 위에서부터 보면 1 → 2 → 3 순서로 출력될 것 같지만 실제 결과는

1
3
2

이다.

2는 약 3초 후에 출력된다.

34. 왜 1 → 3 → 2 순서일까?

먼저

console.log(1);

이 실행된다.

결과

그다음

setTimeout(...)

을 만난다.

하지만 JavaScript는 3초 동안 이 위치에서 멈춰있는 것이 아니다.

타이머 처리를 실행 환경에 맡기고 다음 코드를 계속 실행한다.

따라서

console.log(3);

이 먼저 실행된다.

결과

1
3

그리고 타이머 조건이 만족된 후 콜백 함수가 실행되면서

가 출력된다.

최종 결과는

1
3
2

가 된다.

35. JavaScript는 싱글 스레드인가?

JavaScript의 코드 실행을 담당하는 핵심 실행 흐름은 기본적으로 하나의 Call Stack을 사용한다.

쉽게 표현하면 JavaScript는 한 순간에 하나의 JavaScript 작업을 처리하는 구조라고 이해할 수 있다.

그렇다면

setTimeout()

같은 비동기 작업은 어떻게 처리할 수 있을까?

브라우저 환경에서는 JavaScript 엔진 외부에 있는 Web APIs가 이러한 기능을 지원한다.

대표적으로

setTimeout
DOM Event
fetch

등이 있다.

36. Web APIs

Web APIs는 JavaScript 언어 자체의 기능이라기보다 웹 브라우저가 제공하는 기능이다.

예를 들어 다음 코드를 실행한다고 해보자.

setTimeout(() => {

    console.log("3초 후 실행");

}, 3000);

개념적인 흐름은 다음과 같다.

JavaScript 실행

↓

setTimeout 발견

↓

브라우저의 Web APIs에서 타이머 처리

↓

JavaScript는 다음 코드 계속 실행

↓

타이머 완료

↓

콜백 함수가 실행 가능한 상태가 됨

↓

JavaScript에서 콜백 실행

이 덕분에 JavaScript는 시간이 걸리는 작업을 기다리는 동안 다른 코드를 계속 처리할 수 있다.

37. Web API와 JavaScript 엔진

전체적인 구조를 간단하게 보면 다음과 같다.

┌─────────────────────┐
│  JavaScript Engine  │
│                     │
│     Call Stack      │
└─────────┬───────────┘
          │
          │ 비동기 작업 요청
          ▼
┌─────────────────────┐
│      Web APIs       │
│                     │
│ setTimeout          │
│ fetch               │
│ DOM Event           │
└─────────────────────┘

브라우저의 도움을 받아 시간이 오래 걸리는 작업을 처리한 뒤, 완료된 작업의 콜백을 다시 JavaScript에서 실행한다.

이 과정에는 Callback Queue와 Event Loop라는 개념도 관여한다.

이 부분은 다음 비동기 JavaScript 파트에서 더 자세히 공부할 예정이다.

38. 브라우저와 Node.js의 차이

여기서 한 가지 알아둘 점이 있다.

비동기 작업은 모두 Web API가 처리한다.

라고 무조건 외우기보다는 브라우저 환경에서는 Web APIs가 처리한다고 이해하는 것이 더 정확하다.

JavaScript는 브라우저뿐만 아니라 Node.js에서도 실행할 수 있다.

브라우저에서는

Web APIs

가 비동기 기능을 제공하고,

Node.js에서는 Node.js의 런타임 환경이 타이머, 파일 입출력 등의 비동기 기능을 제공한다.

즉, 비동기 처리를 지원하는 주체는 JavaScript가 실행되는 런타임 환경에 따라 달라질 수 있다.

39. 이번 배열 메서드에서 중요한 차이

이번에 배운 메서드 중에서는 원본 배열을 변경하는지 여부도 중요하다.

원본 배열을 변경하는 메서드

sort()

원본 배열을 변경하지 않고 새로운 값을 반환

filter()
map()
toSorted()
join()
find()
findIndex()
includes()
indexOf()

특히 React에서는 기존 상태를 직접 수정하지 않는 것이 중요하기 때문에 map(), filter(), toSorted()와 같은 메서드를 자주 사용하게 된다.

실전 예제로 연결해보기

예를 들어 서버에서 다음과 같은 사용자 데이터를 받았다고 해보자.

const users = [

    {
        id: 1,
        name: "정재민",
        active: true
    },

    {
        id: 2,
        name: "홍길동",
        active: false
    },

    {
        id: 3,
        name: "문지수",
        active: true
    }
];

활성화된 사용자만 가져오려면 filter()를 사용할 수 있다.

const activeUsers = users.filter(
    (user) => user.active
);

이름만 가져오려면 map()을 사용한다.

const names = activeUsers.map(
    (user) => user.name
);

두 메서드를 합치면

const names = users
    .filter((user) => user.active)
    .map((user) => user.name);

console.log(names);

결과

["정재민", "문지수"]

이런 식의 코드는 실제 프론트엔드 개발에서도 매우 자주 사용하게 된다.

정리

이번에 배운 내용을 정리하면 다음과 같다.

개념설명

forEach()	배열 전체를 순회하며 작업 수행
includes()	특정 값의 존재 여부 확인
indexOf()	특정 값의 인덱스 검색
findIndex()	조건을 만족하는 요소의 인덱스 검색
find()	조건을 만족하는 요소 자체 반환
filter()	조건을 만족하는 요소만 새로운 배열로 반환
map()	각각의 요소를 변환하여 새로운 배열 생성
sort()	원본 배열을 정렬
toSorted()	정렬된 새로운 배열 반환
join()	배열을 하나의 문자열로 변환
Date	날짜와 시간을 다루는 객체
getTime()	타임스탬프 반환
getFullYear()	연도 추출
getMonth()	월 추출, 0부터 시작
toLocaleString()	로케일에 맞는 날짜·시간 문자열
동기 처리	코드를 순서대로 실행
비동기 처리	특정 작업을 기다리는 동안 다른 코드 실행 가능
setTimeout()	일정 시간 후 콜백 함수 실행
Web APIs	브라우저가 제공하는 여러 기능
Call Stack	JavaScript 코드의 실행 흐름을 관리

이번 파트에서 특히 중요하게 느껴지는 부분은 배열 메서드의 역할을 구분하는 것이다.

찾고 싶다
→ find()

조건에 맞는 것만 남기고 싶다
→ filter()

모든 요소를 다른 형태로 바꾸고 싶다
→ map()

그냥 모든 요소에 어떤 작업을 하고 싶다
→ forEach()

이 네 가지를 구분할 수 있으면 배열 데이터를 다루는 코드가 훨씬 읽기 쉬워진다.

그리고 비동기 처리에서는 우선

JavaScript 코드는 기본적으로 순서대로 실행된다.

하지만 오래 걸리는 작업을 효율적으로 처리하기 위해
비동기 방식을 사용할 수 있다.

정도까지 이해하고, 이후 Event Loop → Promise → async/await → fetch API 순서로 연결해 공부하면 될 것 같다.

JavaScript 심화 ② 원시·객체 타입, 객체 복사와 비교, 순회, 배열 메서드

잼coding — Tue, 6 Oct 2026 16:36:31 +0900

JavaScript 심화 문법 두 번째 정리.

이번에는 JavaScript에서 데이터를 이해할 때 매우 중요한 원시 타입과 객체 타입의 차이부터 시작해서 객체의 복사와 비교, 배열과 객체를 순회하는 방법, 그리고 배열의 요소를 추가하거나 삭제하는 다양한 메서드에 대해 정리한다.

특히 객체 타입은 원시 타입과 저장되는 방식이 다르기 때문에 앞으로 React의 상태 관리 등을 이해할 때도 중요한 개념이다.

1. 원시 타입과 객체 타입

JavaScript의 자료형은 크게 두 가지 관점으로 나누어 생각할 수 있다.

원시 타입(Primitive Type)
객체 타입(Object Type)

두 타입의 가장 큰 차이는 값을 저장하고 복사하는 방식이다.

2. 원시 타입

원시 타입은 값 자체가 변수에 저장되고 복사되는 타입이다.

대표적인 원시 타입은 다음과 같다.

Number
String
Boolean
Null
Undefined
BigInt
Symbol

예를 들어 다음과 같은 코드가 있다고 해보자.

let a = 10;

let b = a;

현재 a의 값을 b에 복사했다.

이후 b를 변경해보자.

b = 20;

console.log(a);
console.log(b);

결과

10
20

b의 값을 수정해도 a에는 영향을 주지 않는다.

왜냐하면 b에는 a가 가지고 있던 값 자체인 10이 복사되었기 때문이다.

개념적으로 보면 다음과 같다.

a → 10

b → 10

각각 독립적인 값을 가지고 있다고 이해할 수 있다.

3. 원시 타입은 불변 값이다

원시 타입의 값은 **불변(Immutable)**이다.

여기서 주의할 점은

변수의 값을 변경할 수 없다는 의미는 아니다.

예를 들어 다음 코드는 당연히 가능하다.

let num = 10;

num = 20;

하지만 기존 메모리의 10이라는 값을 20으로 직접 수정하는 것이 아니라 새로운 값 20을 변수에 다시 할당하는 방식이다.

즉,

원시 값 자체 → 변경 불가능

변수가 가리키는 값 → 다른 값으로 재할당 가능

이라고 이해하면 된다.

4. 객체 타입

객체 타입은 원시 타입과 다르게 동작한다.

객체를 변수에 저장하면 객체 자체가 직접 저장되는 것이 아니라 해당 객체를 참조할 수 있는 값을 통해 접근하게 된다.

예를 들어 다음 객체가 있다고 해보자.

let o1 = {
    name: "정재민"
};

그리고 다른 변수에 객체를 복사한다.

let o2 = o1;

이 경우 객체가 새로 만들어지는 것이 아니다.

o1과 o2가 같은 객체를 참조하게 된다.

개념적으로 표현하면 다음과 같다.

o1 ─┐
    ├──> { name: "정재민" }
o2 ─┘

따라서 o2를 통해 객체를 수정하면

o2.name = "홍길동";

o1에서도 변경된 값을 확인할 수 있다.

console.log(o1.name);

결과

홍길동

두 변수가 같은 객체를 참조하고 있기 때문이다.

5. 객체는 가변 값이다

객체는 일반적으로 **가변(Mutable)**한 값이다.

객체가 생성된 이후에도 내부 프로퍼티를 수정할 수 있다.

const person = {
    name: "정재민",
    age: 27
};

person.age = 28;

person.job = "Developer";

const로 선언했더라도 객체 내부의 프로퍼티는 수정할 수 있다.

다만 변수에 새로운 객체를 다시 할당하는 것은 불가능하다.

const person = {
    name: "정재민"
};

// 오류 발생
person = {
    name: "홍길동"
};

즉,

const 객체의 내부 수정 → 가능

const 변수 자체에 새로운 객체 재할당 → 불가능

이다.

6. 객체 복사

객체를 복사할 때는 특히 주의해야 한다.

다음 코드를 보자.

let o1 = {
    name: "정재민",
    age: 27
};

let o2 = o1;

이것은 새로운 객체를 만드는 것이 아니다.

단순히 같은 객체의 참조를 복사한다.

따라서

o2.age = 30;

을 실행하면

console.log(o1.age);

결과 역시

이 된다.

7. 참조 복사

다음처럼 객체 변수를 그대로 대입하는 방식은 객체 자체가 아니라 참조가 복사된다.

let o1 = {
    name: "정재민"
};

let o2 = o1;

따라서 두 변수는 같은 객체를 바라본다.

console.log(o1 === o2);

결과

true

이다.

8. 얕은 복사

원본과 다른 새로운 객체를 만들고 싶다면 Spread 문법 등을 사용할 수 있다.

let o1 = {
    name: "정재민",
    age: 27
};

let o2 = {
    ...o1
};

이제 o1과 o2는 서로 다른 객체이다.

console.log(o1 === o2);

결과

false

o2를 수정하더라도

o2.age = 30;

o1.age는 그대로 유지된다.

console.log(o1.age); // 27
console.log(o2.age); // 30

하지만 여기서 중요한 점이 있다.

이 방식은 **깊은 복사가 아니라 얕은 복사(Shallow Copy)**이다.

9. 얕은 복사의 한계

객체 내부에 또 다른 객체가 있는 경우를 생각해보자.

const person1 = {

    name: "정재민",

    job: {
        title: "Developer"
    }
};

Spread 문법으로 복사한다.

const person2 = {
    ...person1
};

겉의 객체는 서로 다른 객체이다.

console.log(person1 === person2);

결과

false

하지만 내부의 job 객체는 어떨까?

console.log(person1.job === person2.job);

결과

true

내부 객체는 여전히 같은 객체를 참조하고 있다.

따라서

person2.job.title = "Designer";

를 실행하면

console.log(person1.job.title);

결과 역시

Designer

로 변경된다.

즉, Spread 문법을 이용한 복사는 1단계 프로퍼티만 새롭게 복사하는 얕은 복사이다.

10. 깊은 복사

깊은 복사(Deep Copy)는 객체 내부에 또 다른 객체나 배열이 있어도 모두 새로운 객체로 복사하는 방식이다.

최근 JavaScript에서는 structuredClone()을 사용할 수 있다.

const person1 = {

    name: "정재민",

    job: {
        title: "Developer"
    }
};

const person2 = structuredClone(person1);

이 경우 내부의 job 객체도 별도로 복사된다.

console.log(person1 === person2);
console.log(person1.job === person2.job);

결과

false
false

따라서

person2.job.title = "Designer";

를 실행해도 person1에는 영향을 주지 않는다.

console.log(person1.job.title);

결과

Developer

정리하면

참조 복사
→ 같은 객체를 바라봄

얕은 복사
→ 가장 바깥 객체만 새로운 객체

깊은 복사
→ 내부 객체까지 모두 별도로 복사

라고 이해할 수 있다.

11. 객체 비교

객체끼리 === 연산자를 사용하여 비교하면 객체 내부의 값이 아니라 참조를 기준으로 비교한다.

let o1 = {
    a: 1
};

let o2 = {
    a: 1
};

console.log(o1 === o2);

두 객체의 내용은 완전히 동일해 보인다.

하지만 결과는

false

이다.

각각 별도로 생성된 서로 다른 객체이기 때문이다.

같은 객체를 참조하면?

let o1 = {
    a: 1
};

let o2 = o1;

console.log(o1 === o2);

결과

true

두 변수가 동일한 객체를 참조하고 있기 때문이다.

따라서 객체의 === 비교는

내부 값이 같은가?

가 아니라

같은 객체인가?

를 비교한다고 이해하면 된다.

12. JSON.stringify를 이용한 비교

간단한 객체라면 JSON.stringify()를 이용하여 객체를 문자열로 변환한 후 비교하는 방법도 있다.

let o1 = {
    name: "정재민",
    age: 27
};

let o2 = {
    name: "정재민",
    age: 27
};

console.log(
    JSON.stringify(o1) === JSON.stringify(o2)
);

결과

true

객체 자체를 비교한 것이 아니라

JSON.stringify(o1)

을 통해 문자열로 변환된 결과를 비교한 것이다.

JSON.stringify 비교의 주의점

하지만 이 방법을 모든 객체의 정확한 깊은 비교 방법이라고 생각하면 안 된다.

프로퍼티 순서 등의 영향을 받을 수 있고, undefined, 함수, Symbol 등이 포함된 경우 원하는 형태로 변환되지 않을 수도 있다.

따라서 복잡한 객체를 실제 서비스에서 비교해야 한다면 별도의 깊은 비교 로직이나 라이브러리를 사용하는 경우가 많다.

13. 배열과 함수도 객체인가?

JavaScript에서 배열과 함수 역시 객체 계열에 속한다.

예를 들어 배열도 프로퍼티와 메서드를 가지고 있다.

const arr = [1, 2, 3];

console.log(arr.length);

arr.push(4);

함수 역시 값으로 저장하고 객체처럼 다룰 수 있는 특징을 가지고 있다.

다만 typeof를 사용하면 조금 특이한 결과가 나타난다.

console.log(typeof []);
console.log(typeof {});
console.log(typeof function () {});

결과

object
object
function

배열의 typeof 결과는 "object"이고, 함수는 특별히 "function"이 반환된다.

14. 순회란?

순회(Iteration)란 배열이나 객체에 저장되어 있는 여러 값에 순서대로 하나씩 접근하는 것을 의미한다.

예를 들어 다음과 같은 데이터가 있다고 해보자.

let numbers = [1, 2, 3];

let person = {

    name: "정재민",

    age: 27,

    hobby: "공부"
};

배열과 객체는 구조가 다르기 때문에 순회하는 방법에도 차이가 있다.

15. 배열 순회 - 인덱스 이용

가장 기본적인 배열 순회 방법은 for문과 배열의 인덱스를 사용하는 것이다.

let arr = [1, 2, 3];

for (let i = 0; i < arr.length; i++) {

    console.log(arr[i]);
}

결과

1
2
3

여기서

arr.length

는 배열의 길이를 의미한다.

배열의 인덱스는 0부터 시작하기 때문에

i < arr.length

까지 반복한다.

다른 배열도 동일

let arr2 = [4, 5, 6, 7, 8];

for (let i = 0; i < arr2.length; i++) {

    console.log(arr2[i]);
}

배열의 길이가 달라지더라도 length를 사용하면 배열 전체를 순회할 수 있다.

주의: 배열 요소 접근은 arr(i)가 아니라 arr[i]로 작성해야 한다.

16. for...of 반복문

배열을 순회할 때는 for...of 문법을 사용할 수도 있다.

let arr = [1, 2, 3];

for (let item of arr) {

    console.log(item);
}

결과

1
2
3

기존의 for문처럼 인덱스를 직접 관리할 필요가 없다.

for (let item of arr)

에서 배열의 각 요소가 순서대로 item에 들어간다.

17. 일반 for문과 for...of

두 방식에는 약간의 차이가 있다.

일반 for문

for (let i = 0; i < arr.length; i++) {

    console.log(i, arr[i]);
}

인덱스를 직접 사용할 수 있다.

for...of

for (let item of arr) {

    console.log(item);
}

요소 자체가 필요한 경우 간단하게 사용할 수 있다.

따라서

인덱스가 필요함 → 일반 for문

값만 필요함 → for...of

라고 생각하면 이해하기 쉽다.

18. 객체 순회

객체는 배열과 달리 일반적인 숫자 인덱스로 데이터를 관리하지 않는다.

let person = {

    name: "정재민",

    age: 27,

    hobby: "랩"
};

따라서 객체의 key, value를 가져올 수 있는 여러 방법이 존재한다.

19. Object.keys()

Object.keys()는 객체의 key만 모아서 새로운 배열로 반환한다.

let keys = Object.keys(person);

console.log(keys);

결과

["name", "age", "hobby"]

반환되는 값이 배열이기 때문에 for...of를 이용할 수도 있다.

for (let key of keys) {

    const value = person[key];

    console.log(key, value);
}

결과

name 정재민
age 27
hobby 랩

20. Object.values()

Object.values()는 객체의 value만 모아서 새로운 배열로 반환한다.

let values = Object.values(person);

console.log(values);

결과

["정재민", 27, "랩"]

반환된 배열을 순회할 수도 있다.

for (let value of values) {

    console.log(value);
}

21. for...in

객체의 key를 바로 순회하고 싶다면 for...in을 사용할 수 있다.

for (let key in person) {

    console.log(key);
}

결과

name
age
hobby

key를 이용하면 value도 가져올 수 있다.

for (let key in person) {

    console.log(key, person[key]);
}

결과

name 정재민
age 27
hobby 랩

객체를 순회할 때 자주 볼 수 있는 형태이다.

22. 배열과 객체 순회 정리

대상방법특징

배열	일반 for	인덱스 사용 가능
배열	for...of	요소를 바로 가져옴
객체	Object.keys()	key 배열 반환
객체	Object.values()	value 배열 반환
객체	for...in	객체의 key 순회

추가로 이후에는 Object.entries()나 배열의 forEach(), map(), filter() 등을 이용한 순회도 배우게 된다.

23. 배열 요소 조작 메서드

JavaScript 배열에는 요소를 추가하거나 제거하고, 새로운 배열을 만들어내는 다양한 메서드가 존재한다.

이번에는 대표적인 6개를 정리한다.

push
pop
shift
unshift
slice
concat

24. push()

push()는 배열의 맨 뒤에 새로운 요소를 추가한다.

let arr1 = [1, 2, 3];

arr1.push(4);

console.log(arr1);

결과

[1, 2, 3, 4]

한 번에 여러 개를 추가할 수도 있다.

arr1.push(5, 6, 7);

push의 반환값

push()는 요소를 추가한 후 변경된 배열의 길이를 반환한다.

let arr1 = [1, 2, 3];

const newLength = arr1.push(4, 5, 6, 7);

console.log(arr1);
console.log(newLength);

결과

[1, 2, 3, 4, 5, 6, 7]

7

중요한 점은 push()가 원본 배열을 직접 변경한다는 것이다.

25. pop()

pop()은 배열의 맨 뒤 요소를 제거하고, 제거한 값을 반환한다.

let arr2 = [1, 2, 3];

const poppedItem = arr2.pop();

console.log(poppedItem);
console.log(arr2);

결과

3

[1, 2]

즉,

push → 뒤에 추가

pop → 뒤에서 제거

라고 생각하면 쉽다.

26. shift()

shift()는 배열의 맨 앞 요소를 제거하고 반환한다.

let arr3 = [1, 2, 3];

const shiftedItem = arr3.shift();

console.log(shiftedItem);
console.log(arr3);

결과

1

[2, 3]

pop()이 마지막 요소를 제거한다면 shift()는 첫 번째 요소를 제거한다.

27. unshift()

unshift()는 배열의 맨 앞에 새로운 요소를 추가한다.

let arr4 = [1, 2, 3];

const newLength = arr4.unshift(0);

console.log(arr4);
console.log(newLength);

결과

[0, 1, 2, 3]

4

push()와 마찬가지로 새로운 배열의 길이를 반환한다.

배열 앞/뒤 요소 조작 정리

네 가지 메서드는 함께 외우면 이해하기 쉽다.

메서드위치동작반환값

push()	뒤	추가	새로운 배열 길이
pop()	뒤	제거	제거한 요소
unshift()	앞	추가	새로운 배열 길이
shift()	앞	제거	제거한 요소

그리고 이 네 메서드는 모두 원본 배열을 직접 수정한다.

28. slice()

slice()는 배열의 특정 범위를 잘라 새로운 배열로 반환한다.

let arr5 = [1, 2, 3, 4, 5];

let sliced = arr5.slice(2, 5);

console.log(sliced);

결과

[3, 4, 5]

slice(start, end) 형태로 사용한다.

중요한 점은

start → 포함

end → 포함하지 않음

이라는 것이다.

따라서

arr5.slice(2, 5);

는 인덱스 2, 3, 4의 요소를 가져온다.

29. 끝 위치 생략하기

두 번째 인수를 생략하면 시작 위치부터 배열의 끝까지 가져온다.

let arr5 = [1, 2, 3, 4, 5];

let sliced = arr5.slice(2);

console.log(sliced);

결과

[3, 4, 5]

30. slice는 원본 배열을 수정하지 않는다

push, pop, shift, unshift와 달리 slice()는 원본 배열을 변경하지 않는다.

let arr = [1, 2, 3, 4, 5];

let newArr = arr.slice(1, 3);

console.log(arr);
console.log(newArr);

결과

[1, 2, 3, 4, 5]

[2, 3]

원본 배열 arr은 그대로 유지된다.

31. concat()

concat()은 두 개 이상의 배열을 이어 붙여 새로운 배열을 반환한다.

let arr6 = [1, 2];

let arr7 = [3, 4];

let concatenatedArr = arr6.concat(arr7);

console.log(concatenatedArr);

결과

[1, 2, 3, 4]

기존 배열은 그대로 유지된다.

console.log(arr6);
console.log(arr7);

결과

[1, 2]

[3, 4]

32. Spread를 이용해서 배열 합치기

이전에 배운 Spread 문법을 이용해 같은 기능을 구현할 수도 있다.

let arr6 = [1, 2];

let arr7 = [3, 4];

let newArr = [
    ...arr6,
    ...arr7
];

console.log(newArr);

결과

[1, 2, 3, 4]

최근 JavaScript 코드에서는 concat()뿐만 아니라 Spread 문법도 자주 사용한다.

33. 원본 배열을 변경하는 메서드와 그렇지 않은 메서드

배열 메서드를 사용할 때 굉장히 중요한 기준 중 하나이다.

원본 배열을 변경하는 메서드

push()
pop()
shift()
unshift()

원본 배열을 변경하지 않는 메서드

slice()
concat()

예를 들어

const arr = [1, 2, 3];

const newArr = arr.concat(4);

에서는 arr은 그대로 유지되고 새로운 배열이 만들어진다.

이러한 차이는 앞으로 React에서 상태를 관리할 때 특히 중요하게 사용된다.

34. 객체 타입과 배열 메서드가 중요한 이유

이번에 공부한 객체의 참조와 불변성을 유지하는 방식은 단순한 JavaScript 문법을 넘어서 실제 프론트엔드 개발에서 매우 중요하다.

예를 들어 다음처럼 배열에 직접 값을 추가할 수도 있다.

const numbers = [1, 2, 3];

numbers.push(4);

하지만 기존 배열을 수정하지 않고 새로운 배열을 만들 수도 있다.

const numbers = [1, 2, 3];

const newNumbers = [
    ...numbers,
    4
];

결과는 둘 다

[1, 2, 3, 4]

이지만 동작 방식은 다르다.

첫 번째 방식은

기존 배열 직접 수정

두 번째 방식은

기존 배열 유지
+
새로운 배열 생성

이다.

React에서는 상태를 변경할 때 기존 객체나 배열을 직접 수정하지 않고 새로운 객체나 배열을 만들어 사용하는 패턴이 중요하기 때문에, 지금 배우는 참조값과 얕은 복사 개념이 그대로 연결된다.

정리

이번 내용을 정리하면 다음과 같다.

개념설명

원시 타입	값 자체가 복사됨
객체 타입	객체의 참조를 통해 접근
원시 값	불변 값
객체	일반적으로 내부 값을 수정 가능
참조 복사	같은 객체를 바라봄
얕은 복사	바깥 객체만 새롭게 복사
깊은 복사	내부 객체까지 별도로 복사
=== 객체 비교	참조가 같은지 비교
Object.keys()	객체의 key 배열 반환
Object.values()	객체의 value 배열 반환
for...of	배열 등의 값을 순회
for...in	객체의 key를 순회
push()	배열 뒤에 요소 추가
pop()	배열 뒤 요소 제거
shift()	배열 앞 요소 제거
unshift()	배열 앞에 요소 추가
slice()	특정 범위를 새로운 배열로 반환
concat()	배열을 합친 새로운 배열 반환

이번 파트에서 가장 중요하게 이해해야 할 부분은 객체는 값을 그대로 복사하는 것이 아니라 참조를 다룬다는 점이다.

const obj1 = {
    value: 1
};

const obj2 = obj1;

이 코드는 객체 두 개가 생긴 것이 아니라 obj1과 obj2가 같은 객체를 바라보고 있다.

반면

const obj2 = {
    ...obj1
};

처럼 작성하면 새로운 객체를 만들 수 있다.

이 차이는 앞으로 배열 메서드뿐만 아니라 React의 State, Props, 리렌더링, 불변성을 이해하는 데도 그대로 연결되는 중요한 개념이다.

좋은 코드 리뷰, 나쁜 코드 리뷰 | 개발자는 코드만 잘 짜면 될까? 코드 리뷰와 커뮤니케이션을 배우는 책

잼coding — Tue, 22 Sep 2026 20:40:41 +0900

※ 이 글은 출판사로부터 도서를 제공받아 직접 읽고 작성한 리뷰입니다.

개발 공부를 하다 보면 자연스럽게 코드를 작성하는 방법이나 프레임워크, 언어 문법에 집중하게 된다.

그런데 실제로 여러 사람이 함께 개발하는 환경에서는 코드를 작성하는 것만큼이나 내가 작성한 코드를 설명하고, 다른 사람의 코드를 리뷰하고, 의견을 주고받는 과정도 중요하다.

이번에 읽어본 책은 바로 이런 부분을 다루고 있는
《좋은 코드 리뷰, 나쁜 코드 리뷰》다.

《좋은 코드 리뷰, 나쁜 코드 리뷰》. 19가지 사례와 33가지 팁을 통해 코드 리뷰 과정에서의 커뮤니케이션 방법을 다룬다.

표지에 적혀 있는

“좋은 개발팀은 어떻게 리뷰하고 소통하는가?”

라는 문장이 이 책의 내용을 가장 잘 설명해주는 것 같다.

단순히 코드의 오류를 찾아내거나 더 좋은 코드를 작성하는 방법을 알려주는 책이라기보다는, 코드 리뷰 과정에서 개발자끼리 어떻게 의견을 전달하고 받아들여야 하는지를 실제 사례를 중심으로 설명한다.

코드 리뷰에도 ‘방법’이 필요하다

처음에는 코드 리뷰에 관한 책이라고 해서 리팩터링이나 클린 코드처럼 코드 작성 방식에 관한 내용이 많을 거라고 생각했다.

하지만 실제로 읽어보니 이 책에서 중요하게 다루는 부분은 사람과 사람 사이의 커뮤니케이션이었다.

책은 ‘마음가짐 - 실전 사례 - 실무 팁’ 순서로 구성되어 있다.

목차를 보면 책의 성격을 더 쉽게 알 수 있다.

책은 크게

PART 1 마음가짐
PART 2 실전
PART 3 TIPS

로 구성되어 있다.

특히 PART 2에는 실제 코드 리뷰에서 충분히 발생할 수 있는 상황들이 사례별로 정리되어 있다.

예를 들어,

긴장감 넘치는 리뷰 코멘트
설명이 부족한 PR
진행이 더딘 PR
지나치게 자세한 리뷰 코멘트
리뷰되지 않은 PR
코멘트에 대한 정정 정보 부족
방치된 논의
놓친 질문 코멘트
찾아보지도 않고 하는 질문

등 제목만 봐도 개발 과정에서 한 번쯤 마주칠 법한 상황들이 많다.

그래서 이론적인 개발 서적보다는 실제 팀 개발 상황을 옆에서 구경하면서 배우는 느낌에 조금 더 가까웠다.

먼저 필요한 것은 코드가 아니라 ‘마음가짐’

1부에서는 본격적인 사례에 들어가기 전, 코드 리뷰를 어떤 관점에서 바라봐야 하는지 설명한다.

개인적으로 책의 구성이 괜찮다고 느꼈던 부분이다.

바로 사례부터 들어가는 것이 아니라 1부에서 먼저 코드 리뷰를 어떤 마음가짐으로 해야 하는지 설명한다.

코드 리뷰를 하다 보면 자연스럽게

“이 코드가 맞다 / 틀리다”

라는 관점으로 접근하기 쉬운데, 이 책에서는 리뷰의 목적을 단순히 상대방의 잘못을 찾아내는 것으로 보지 않는다.

결국 코드 리뷰의 목적은 더 나은 결과물을 만들기 위해 서로 정보를 주고받고 합의하는 것에 가깝다.

리뷰어는 리뷰이가 생각하지 못했던 부분을 알려줄 수 있고, 반대로 리뷰이 역시 자신이 그렇게 구현한 이유나 배경을 리뷰어에게 알려줄 수 있다.

즉, 리뷰 자체가 일방적인 평가라기보다는 서로의 정보를 보완하는 과정이라는 점이 인상적이었다.

가장 공감됐던 부분, ‘놓친 질문 코멘트’

Case 15 ‘놓친 질문 코멘트’. 질문을 남기는 것만큼 그 질문에 제대로 답변하는 것도 코드 리뷰의 중요한 과정이다.

책에는 여러 사례가 등장하는데 그중 재미있었던 것이 ‘놓친 질문 코멘트’ 사례였다.

PR에 리뷰어가 질문을 남겼는데, 리뷰이가 코드만 수정한 뒤 질문 자체에 대한 답변은 하지 않는 상황이다.

겉으로 보면 이미 코드가 수정되었으니 문제가 해결된 것처럼 보일 수도 있다.

하지만 리뷰어 입장에서는

“왜 이렇게 수정했지?”
“내 질문의 의도를 이해한 건가?”
“다른 이유가 있었던 건가?”

라는 의문이 남는다.

이 사례를 보면서 코드 리뷰에서는 코드를 고치는 것과 커뮤니케이션을 끝내는 것이 같은 의미는 아니라는 점이 꽤 와닿았다.

질문이 있었다면 그 질문에 답변하고, 수정했다면 어떤 방식으로 수정했는지 알려주는 과정까지 포함되어야 하나의 커뮤니케이션이 완성된다.

회사에서 업무를 할 때도 비슷한 것 같다.

요청받은 일을 처리하는 것만큼이나

“확인했습니다.”
“이런 이유로 이렇게 처리했습니다.”
“수정 완료했습니다.”

처럼 상대방에게 결과를 다시 전달하는 과정이 중요하기 때문이다.

개발에서도 결국 같은 원리가 적용된다.

코드만 보고 상대방까지 판단하지 않기

IMG_3569.jpg 삽입

코드 리뷰에서 문제가 되는 것은 코드에 대한 지적이 사람에 대한 지적으로 변하는 순간이다.

또 하나 기억에 남았던 부분은 코드에 대한 의견과 사람에 대한 평가를 구분해야 한다는 것이었다.

코드 리뷰를 하다 보면

“왜 이렇게 작성했어요?”

같은 질문 하나도 상황에 따라서는 상대방에게 공격적으로 느껴질 수 있다.

반대로 리뷰를 받는 사람 역시 단순히 코드에 대한 의견인데도 자신에 대한 평가처럼 받아들일 수 있다.

책에서는 이런 상황에서 코드 자체와 작성자를 분리해서 생각해야 한다는 점을 이야기한다.

예를 들어,

“이 코드는 이해하기 어렵습니다.”

라는 것과

“당신이 작성한 코드는 항상 이해하기 어렵습니다.”

는 전혀 다른 의미다.

첫 번째는 현재 코드에서 개선할 부분을 이야기하지만, 두 번째는 코드가 아니라 작성자 자체를 평가하는 표현이 되어버린다.

코드 리뷰에서 사람이 아니라 코드와 문제에 초점을 맞춰야 한다는 것.

당연한 이야기처럼 보이지만 실제 협업에서는 오히려 가장 놓치기 쉬운 부분이라는 생각이 들었다.

좋은 리뷰 코멘트는 ‘정답을 알려주는 것’과도 조금 다르다

책을 읽으면서 계속 등장하는 키워드 중 하나가 상대방의 상황을 고려하는 것이었다.

리뷰어가 자신의 방식이 무조건 정답이라고 생각하고

“이렇게 바꾸세요.”

라고 말하는 것과,

“이 부분은 이러한 문제가 발생할 수 있는데, 이런 방법을 사용하는 것은 어떨까요?”

라고 이야기하는 것은 같은 내용을 전달하더라도 받아들이는 느낌이 상당히 다르다.

또 리뷰 코멘트의 목적도 구분할 필요가 있다.

단순한 질문인지,
수정을 요청하는 것인지,
참고로 전달하는 것인지,
반드시 해결해야 하는 문제인지

명확하게 표현하면 리뷰를 받는 사람 역시 훨씬 쉽게 대응할 수 있다.

결국 좋은 코드 리뷰는 내가 하고 싶은 말을 쓰는 것이 아니라 상대방이 이해할 수 있도록 쓰는 것이라는 생각이 들었다.

19가지 사례 + 33가지 팁이라 읽기 편하다

이 책에서 마음에 들었던 부분은 내용이 지나치게 이론적으로 흘러가지 않는다는 점이다.

PART 2에서는 실제 사례를 통해 문제 상황과 개선 방법을 보여주고, PART 3에서는 조금 더 짧게 활용할 수 있는 팁들을 정리해준다.

예를 들어 목차에 있는 팁을 살펴보면,

커밋을 나누는 방법, 영향 범위 확인, 상대방의 의도를 단정하지 않는 법, Linter 활용, 리뷰 요청 방법, 질문하는 방법, 효과적으로 재촉하는 방법 등 실제 개발 업무에서 사용할 만한 주제가 많다.

그래서 처음부터 끝까지 순서대로 읽어도 되지만, 나중에는 코드 리뷰를 하다가 고민되는 상황이 생겼을 때 필요한 부분만 찾아보는 식으로 활용해도 괜찮을 것 같다.

기술보다 사람 이야기가 더 많은 개발 책

여러 저자의 실제 개발 및 팀 협업 경험을 바탕으로 작성된 책이다.

저자 소개를 보면 실제 개발자와 개발 조직에서의 경험을 바탕으로 책이 작성되었다는 점도 알 수 있다.

그래서인지 책을 읽으면서

“이론적으로는 이렇게 해야 합니다.”

라고 이야기하는 느낌보다는

“실제로 팀에서 이런 일이 발생하는데, 이런 방식으로 해결해보면 어떨까요?”

라고 이야기하는 느낌이 강했다.

특히 개발 경력이 많지 않거나 아직 코드 리뷰를 많이 경험해보지 않은 개발자라면, 실제 회사에서 어떤 방식으로 리뷰가 진행되는지 간접적으로 경험해보기에도 괜찮아 보였다.

이런 사람에게 추천하고 싶은 책

개인적으로는 코딩 테스트나 프로그래밍 문법을 공부하기 위한 책이라기보다 협업 개발을 준비하거나 실제 팀 개발을 시작한 사람에게 더 잘 맞는 책이라고 느꼈다.

특히 Git과 GitHub를 이용해서 PR을 만들어보기 시작했거나, 회사에서 다른 개발자의 코드를 리뷰해야 하는 사람, 반대로 리뷰를 받을 때 코멘트를 어떻게 받아들이고 대응해야 할지 고민되는 사람에게 도움이 될 만한 내용이 많다.

그리고 의외로 개발자가 아니더라도 공감할 부분이 있다.

책의 많은 내용이 결국

질문하는 법, 의견을 전달하는 법, 상대방의 의도를 단정하지 않는 법, 피드백을 주고받는 법

에 관한 이야기이기 때문이다.

읽고 나서

코드 리뷰의 핵심은 결국 ‘코드’와 ‘사람’ 사이에서 균형을 잡는 것이라는 생각이 들었다.

이 책을 읽기 전에는 코드 리뷰라고 하면 자연스럽게

“잘못된 코드를 찾아내고 수정하는 과정”

이라는 이미지가 가장 먼저 떠올랐다.

하지만 읽고 난 뒤에는 조금 다르게 느껴졌다.

코드 리뷰는 단순히 오류를 찾는 과정이 아니라 한 사람이 작성한 코드를 팀 전체가 이해하고, 더 나은 방향으로 발전시키기 위한 커뮤니케이션 과정에 더 가깝다.

좋은 리뷰어가 되기 위해서는 코드를 많이 아는 것도 중요하지만, 자신의 생각을 정확하게 설명하는 능력도 필요하다.

그리고 리뷰를 받는 입장에서도 단순히 지적을 받았다고 생각하는 것이 아니라 왜 이런 의견이 나왔는지 이해하고 필요한 정보를 다시 전달하는 능력이 필요하다.

결국 개발을 잘한다는 것은 단순히 코드를 잘 작성하는 것만을 의미하지 않는다는 점을 다시 생각해보게 된 책이었다.

코드 작성 방법은 공부하고 있었지만 ‘코드에 대해 어떻게 이야기해야 하는지’는 따로 생각해본 적이 없었다면 한 번 읽어볼 만한 책이다.

좋은 코드를 만드는 것만큼, 좋은 방식으로 코드에 대해 이야기하는 것도 중요하다.

한 줄 평

좋은 코드 리뷰는 상대방의 틀린 점을 찾는 것이 아니라, 함께 더 나은 답을 찾아가는 과정이다.

JavaScript 심화 ① Truthy·Falsy, 단락 평가, 구조 분해 할당, Spread와 Rest

잼coding — Thu, 17 Sep 2026 09:48:38 +0900

JavaScript 기본 문법을 어느 정도 공부하고 이제 조금 더 심화된 문법을 정리해본다.

이번에는 조건문을 더욱 간결하게 사용할 수 있게 해주는 Truthy와 Falsy, 논리 연산자의 특성을 활용하는 단락 평가, 배열과 객체에서 원하는 값을 편리하게 꺼낼 수 있는 구조 분해 할당, 그리고 데이터를 펼치거나 모으는 Spread와 Rest 문법에 대해 정리한다.

1. Truthy와 Falsy

JavaScript에서는 Boolean 타입인 true, false뿐만 아니라 다른 자료형의 값도 조건문 안에서 참 또는 거짓처럼 평가될 수 있다.

이때 참으로 평가되는 값을 Truthy, 거짓으로 평가되는 값을 Falsy라고 한다.

예를 들어 다음과 같은 코드를 작성할 수 있다.

if ("hello") {
    console.log("실행됩니다.");
}

"hello"는 Boolean 타입이 아니라 문자열이지만 JavaScript에서는 참으로 평가된다.

따라서 조건문 내부의 코드가 실행된다.

2. Falsy한 값

JavaScript에서 거짓으로 평가되는 대표적인 값은 다음과 같다.

let f1 = undefined;

let f2 = null;

let f3 = 0;

let f4 = -0;

let f5 = NaN;

let f6 = "";

let f7 = 0n;

이 값들을 조건문에서 사용하면 모두 false처럼 처리된다.

if (0) {
    console.log("실행");
}

0은 Falsy한 값이기 때문에 해당 코드는 실행되지 않는다.

대표적인 Falsy 값

값의미

undefined	값이 할당되지 않음
null	의도적으로 값이 없음
0	숫자 0
-0	음의 0
NaN	숫자가 아님
""	빈 문자열
0n	BigInt의 0

추가로 Boolean 값인 false 자체도 당연히 Falsy이다.

즉, 실질적으로는 다음과 같이 이해하면 된다.

false
undefined
null
0
-0
NaN
""
0n

이 값들은 조건식에서 모두 거짓으로 평가된다.

3. Truthy한 값

Falsy한 값을 제외한 대부분의 값은 Truthy한 값으로 평가된다.

let t1 = "hello";

let t2 = 123;

let t3 = [];

let t4 = {};

let t5 = () => {};

특히 처음 보면 헷갈릴 수 있는 부분이 배열과 객체이다.

[];

{};

빈 배열과 빈 객체라고 하더라도 JavaScript에서는 Truthy한 값이다.

if ([]) {
    console.log("실행됩니다.");
}

if ({}) {
    console.log("이것도 실행됩니다.");
}

둘 다 조건문 내부가 실행된다.

즉,

빈 문자열 "" → Falsy

빈 배열 [] → Truthy
빈 객체 {} → Truthy

라는 차이를 기억할 필요가 있다.

4. Truthy와 Falsy 활용

Truthy와 Falsy는 값이 존재하는지 검사할 때 유용하게 사용할 수 있다.

다음과 같은 함수가 있다고 해보자.

function printName(person) {

    if (person === undefined) {
        console.log("person의 값이 없음");
        return;
    }

    console.log(person.name);
}

사용해보면

let person = {
    name: "정재민"
};

printName(person);

다음과 같이 출력된다.

정재민

하지만 person에 값을 전달하지 않는다면

printName();

undefined가 전달되므로

person의 값이 없음

이 출력된다.

5. Truthy/Falsy를 활용한 코드 간소화

앞의 코드는 다음과 같이 조금 더 간단하게 작성할 수도 있다.

function printName(person) {

    if (!person) {
        console.log("person의 값이 없음");
        return;
    }

    console.log(person.name);
}

person이 undefined, null 등 Falsy한 값이라면

!person

은 true가 된다.

따라서 별도로

person === undefined

처럼 비교하지 않아도 값의 존재 여부를 검사할 수 있다.

다만 여기에는 주의할 점도 있다.

0
""
false

같은 값도 Falsy로 처리되기 때문이다.

따라서 정말 undefined만 검사해야 하는 상황이라면 명시적인 비교가 더 적절할 수 있다.

6. 단락 평가

단락 평가(Short-Circuit Evaluation)는 논리 연산자 &&, ||를 평가할 때 결과가 이미 결정되었다면 뒤쪽 표현식을 실행하지 않는 특성을 의미한다.

예를 들어 다음 코드를 보자.

true || false

OR 연산자는 둘 중 하나만 true여도 결과가 true이다.

첫 번째 값이 이미 true이므로 뒤의 값을 확인하지 않아도 최종 결과는 true라는 것을 알 수 있다.

따라서 JavaScript는 뒤의 표현식을 평가하지 않을 수 있다.

7. OR 연산자의 단락 평가

다음 함수를 만들어보자.

function returnFalse() {

    console.log("False 함수");

    return false;
}

function returnTrue() {

    console.log("True 함수");

    return true;
}

그리고 다음과 같이 실행한다.

console.log(returnTrue() || returnFalse());

먼저 returnTrue()가 실행된다.

True 함수

그리고 true를 반환한다.

OR 연산자는 이미 첫 번째 값이 Truthy이므로 결과가 결정된다.

따라서 뒤쪽의

returnFalse()

는 실행하지 않는다.

결과적으로

True 함수
true

만 출력된다.

8. AND 연산자의 단락 평가

&& 연산자도 비슷하게 동작한다.

false && true

AND 연산자는 두 값이 모두 참이어야 한다.

첫 번째 값이 이미 false라면 결과는 무조건 false이다.

따라서 두 번째 값은 확인하지 않아도 된다.

function returnFalse() {

    console.log("False 함수");

    return false;
}

function returnTrue() {

    console.log("True 함수");

    return true;
}

console.log(returnFalse() && returnTrue());

실행하면 returnFalse()에서 이미 결과가 결정되기 때문에 returnTrue()는 실행되지 않는다.

9. &&는 값을 선택하는 데도 사용할 수 있다

논리 연산자는 꼭 Boolean 값만 반환하는 것은 아니다.

let result = "hello" && "world";

console.log(result);

결과

world

"hello"는 Truthy한 값이다.

따라서 &&는 오른쪽 값까지 확인하고 "world"를 반환한다.

반대로

let result = null && "world";

에서는 첫 번째 값 null이 Falsy이므로 바로 null이 반환된다.

즉,

A && B

에서

A가 Falsy → A 반환
A가 Truthy → B 반환

이라고 이해할 수 있다.

10. || 역시 값을 선택할 수 있다

||도 비슷하게 동작한다.

let result = "hello" || "world";

console.log(result);

결과

hello

첫 번째 값 "hello"가 Truthy이므로 뒤쪽 값을 확인하지 않는다.

반대로

let result = undefined || "world";

에서는 첫 번째 값이 Falsy이므로 "world"가 반환된다.

따라서

A || B

는

A가 Truthy → A 반환
A가 Falsy → B 반환

이라고 볼 수 있다.

11. 단락 평가 활용

이 특징을 이용하면 코드를 상당히 간결하게 작성할 수 있다.

function printName(person) {

    const name = person && person.name;

    console.log(name || "person의 값이 없음");
}

먼저 다음 코드를 보자.

const name = person && person.name;

만약 person이 존재하지 않는다면

undefined && person.name

형태가 된다.

첫 번째 값이 Falsy이므로 뒤쪽의 person.name을 확인하지 않고 바로 undefined가 반환된다.

따라서 존재하지 않는 객체의 프로퍼티에 접근하면서 발생할 수 있는 오류를 피할 수 있다.

person이 없는 경우

printName();

person은 undefined이다.

따라서

const name = person && person.name;

의 결과는 undefined가 된다.

이후

name || "person의 값이 없음"

에서 name이 Falsy이므로 다음 문자열이 반환된다.

person의 값이 없음

person이 존재하는 경우

printName({
    name: "정재민"
});

person이 Truthy이므로

person.name

까지 평가한다.

따라서 name에는

정재민

이 저장된다.

그리고

name || "person의 값이 없음"

에서 name이 Truthy이므로 "정재민"이 출력된다.

12. 단락 평가와 Optional Chaining

최근 JavaScript에서는 객체의 값이 존재하는지 검사할 때 Optional Chaining도 많이 사용한다.

const name = person?.name;

person이 null 또는 undefined이면 오류를 발생시키지 않고 undefined를 반환한다.

따라서 앞의 코드는 다음처럼 더욱 간결하게 작성할 수도 있다.

function printName(person) {

    const name = person?.name;

    console.log(name || "person의 값이 없음");
}

Optional Chaining은 이후 객체 심화 문법에서 다시 자세히 정리하면 좋을 것 같다.

13. 구조 분해 할당

구조 분해 할당(Destructuring Assignment)은 배열이나 객체에 저장되어 있는 여러 값을 각각의 변수로 쉽게 꺼내는 문법이다.

JavaScript에서 배열이나 객체를 많이 다루다 보니 실제 개발에서도 자주 사용된다.

14. 배열 구조 분해 할당

다음과 같은 배열이 있다고 해보자.

let arr = [1, 2, 3];

기존 방식으로 값을 각각 변수에 저장한다면 다음처럼 작성할 수 있다.

let one = arr[0];
let two = arr[1];
let three = arr[2];

구조 분해 할당을 사용하면 한 줄로 작성할 수 있다.

let [one, two, three] = arr;

console.log(one, two, three);

결과

1 2 3

배열의 순서대로 각각의 변수에 값이 할당된다.

15. 배열 구조 분해 할당의 기본값

배열보다 더 많은 변수를 선언하면 존재하지 않는 값에는 undefined가 들어간다.

let arr = [1, 2, 3];

let [one, two, three, four] = arr;

console.log(four);

결과

undefined

이때 기본값을 지정할 수도 있다.

let [one, two, three, four = 4] = arr;

console.log(four);

결과

배열에 해당 값이 존재하지 않을 경우 기본값인 4가 사용된다.

16. 구조 분해 할당으로 변수 교환하기

구조 분해 할당을 이용하면 두 변수의 값을 쉽게 교환할 수도 있다.

let a = 10;

let b = 20;

[a, b] = [b, a];

console.log(a, b);

결과

20 10

별도의 임시 변수를 만들지 않아도 된다.

17. 객체 구조 분해 할당

객체에서도 구조 분해 할당을 사용할 수 있다.

let person = {

    name: "정재민",

    age: 27,

    hobby: "테니스"
};

기존 방식이라면

let name = person.name;

let age = person.age;

let hobby = person.hobby;

처럼 작성해야 한다.

구조 분해 할당을 사용하면 다음과 같이 작성할 수 있다.

let {
    name,
    age,
    hobby
} = person;

이후 각각의 변수를 바로 사용할 수 있다.

console.log(name, age, hobby);

결과

정재민 27 테니스

18. 배열과 객체 구조 분해의 차이

배열에서는 순서가 중요하다.

let arr = [1, 2, 3];

let [a, b, c] = arr;

반면 객체에서는 프로퍼티 이름을 기준으로 값을 찾는다.

let person = {
    name: "정재민",
    age: 27
};

let {
    age,
    name
} = person;

순서를 바꾸더라도 정상적으로 값을 가져올 수 있다.

즉,

배열 구조 분해 → 위치 기준

객체 구조 분해 → 프로퍼티 이름 기준

이다.

19. 객체 구조 분해하면서 변수 이름 변경하기

객체의 프로퍼티 이름과 다른 변수명을 사용하고 싶을 수도 있다.

다음과 같이 작성할 수 있다.

let person = {

    name: "정재민",

    age: 27,

    hobby: "테니스"
};

let {
    name,
    age: myAge,
    hobby
} = person;

여기에서

age: myAge

는 age라는 프로퍼티의 값을 myAge라는 변수에 저장한다는 의미이다.

console.log(myAge);

결과

이 경우 age라는 변수가 만들어지는 것이 아니라 myAge가 만들어진다.

20. 함수 매개변수에서 구조 분해 할당

객체 구조 분해 할당은 함수의 매개변수에서도 사용할 수 있다.

const func = ({ name, age, hobby }) => {

    console.log(name, age, hobby);
};

객체를 전달해보면

func(person);

함수 내부에서 바로 name, age, hobby를 사용할 수 있다.

기존 방식이라면

const func = (person) => {

    console.log(person.name);

    console.log(person.age);

    console.log(person.hobby);
};

처럼 반복해서 person.을 작성해야 했다.

구조 분해 할당을 사용하면 코드를 조금 더 간결하게 만들 수 있다.

React를 공부하다 보면 컴포넌트의 props를 받을 때 이러한 문법을 매우 자주 사용하게 된다.

21. Spread 연산자

Spread는 영어로 펼치다, 흩뿌리다라는 의미이다.

JavaScript의 Spread 문법은 배열이나 객체에 저장되어 있는 여러 값을 개별 값으로 펼쳐주는 역할을 한다.

문법은 점 세 개를 사용한다.

...

22. 배열에서 Spread 사용하기

다음 배열이 있다고 해보자.

let arr1 = [1, 2, 3];

arr1의 값을 다른 배열 중간에 넣고 싶다면 Spread를 사용할 수 있다.

let arr2 = [4, ...arr1, 5, 6];

console.log(arr2);

결과

[4, 1, 2, 3, 5, 6]

...arr1이 배열 내부의 값들을 각각 펼쳐준다.

즉,

[4, ...arr1, 5, 6]

은 사실상 다음과 비슷하다.

[4, 1, 2, 3, 5, 6]

23. 배열 복사에도 활용

Spread를 이용하면 기존 배열을 이용해 새로운 배열을 만들 수도 있다.

let arr1 = [1, 2, 3];

let arr2 = [...arr1];

console.log(arr2);

겉으로는 같은 값을 가지고 있지만 서로 다른 배열이다.

console.log(arr1 === arr2);

결과

false

객체와 배열은 참조형 데이터이기 때문에 이런 방식은 React에서 상태를 변경할 때도 중요하게 사용된다.

24. 객체에서 Spread 사용하기

객체에서도 Spread 문법을 사용할 수 있다.

let obj1 = {

    a: 1,

    b: 2
};

let obj2 = {

    ...obj1,

    c: 3
};

출력하면

console.log(obj2);

다음과 같은 객체가 만들어진다.

{
    a: 1,
    b: 2,
    c: 3
}

25. Spread와 같은 프로퍼티 이름

다음 코드를 보자.

let obj1 = {

    a: 1,

    b: 2
};

let obj2 = {

    ...obj1,

    c: 3,

    b: 4
};

결과는

{
    a: 1,
    b: 4,
    c: 3
}

이다.

...obj1을 통해 먼저

b: 2

가 들어갔지만 뒤에서

b: 4

를 다시 작성했기 때문에 나중에 작성한 값으로 덮어씌워진다.

즉, 객체에서는 뒤에 작성된 프로퍼티가 우선된다.

이 특징은 객체를 복사하면서 일부 값만 수정할 때 매우 유용하다.

const user = {

    name: "정재민",

    age: 27,

    job: "ERP Developer"
};

const updatedUser = {

    ...user,

    age: 28
};

기존 값은 유지하면서 age만 변경할 수 있다.

26. 함수 호출에서 Spread 사용하기

함수의 인수로도 Spread 문법을 사용할 수 있다.

function funcA(p1, p2, p3) {

    console.log(p1, p2, p3);
}

배열이 있다고 해보자.

let arr1 = [1, 2, 3];

기존에는 다음과 같이 전달할 수 있다.

funcA(arr1[0], arr1[1], arr1[2]);

Spread를 이용하면 훨씬 간단하다.

funcA(...arr1);

실제로는 다음과 같이 전달되는 것과 같다.

funcA(1, 2, 3);

결과

1 2 3

27. Rest 매개변수

Spread와 비슷하게 점 세 개 ...를 사용하는 문법으로 Rest Parameter가 있다.

Rest는 영어로 나머지라는 뜻이다.

함수에 전달된 여러 개의 인수 중 나머지 값들을 하나의 배열로 모으는 역할을 한다.

function funcB(one, two, ...rest) {

    console.log(rest);
}

다음과 같이 호출해보자.

funcB(1, 2, 3, 4, 5);

one에는

이 들어가고

two에는

가 들어간다.

나머지 값은 모두 rest 배열에 들어간다.

[3, 4, 5]

28. Spread와 Rest의 차이

두 문법 모두 ...을 사용해서 처음에는 상당히 헷갈릴 수 있다.

하지만 역할은 반대라고 생각하면 이해하기 쉽다.

Spread

하나로 묶여 있는 값을 펼친다.

let arr = [1, 2, 3];

funcA(...arr);

동작

[1, 2, 3]

↓ 펼치기

1, 2, 3

Rest

여러 값을 하나의 배열로 모은다.

function funcB(...rest) {

    console.log(rest);
}

funcB(1, 2, 3);

동작

1, 2, 3

↓ 모으기

[1, 2, 3]

즉,

Spread → 펼치기

Rest → 모으기

라고 기억하면 된다.

29. Rest 매개변수의 위치

Rest 매개변수는 항상 마지막에 위치해야 한다.

다음 코드는 정상적이다.

function func(one, two, ...rest) {

}

하지만 다음처럼 작성할 수는 없다.

// 오류

function func(...rest, one) {

}

Rest는 말 그대로 나머지 모든 인수를 가져오기 때문에 이후에 다른 매개변수가 존재할 수 없다.

한 번에 이해하기

이번 내용을 간단한 흐름으로 정리하면 다음과 같다.

const person = {

    name: "정재민",

    age: 27,

    hobby: "테니스"
};

객체에서 값을 꺼낼 때는 구조 분해 할당을 사용할 수 있다.

const {
    name,
    age
} = person;

객체를 복사하면서 값을 추가하려면 Spread를 사용할 수 있다.

const newPerson = {

    ...person,

    job: "ERP Developer"
};

함수에서 필요한 프로퍼티만 바로 받아올 수도 있다.

const introduce = ({ name, job }) => {

    console.log(`${name}의 직업은 ${job}입니다.`);
};

여러 인수를 함수에서 한꺼번에 받고 싶다면 Rest를 사용할 수 있다.

const printAll = (...values) => {

    console.log(values);
};

JavaScript에서는 이런 문법들을 조합해서 사용하는 경우가 많다.

정리

개념설명

Falsy	조건식에서 false로 평가되는 값
Truthy	조건식에서 true로 평가되는 값
단락 평가	결과가 정해지면 뒤의 연산을 실행하지 않는 특성
A && B	A가 Truthy이면 B까지 평가
A \|\| B	A가 Falsy이면 B를 평가
구조 분해 할당	배열이나 객체의 값을 각각 변수로 꺼내는 문법
Spread	배열이나 객체의 값을 펼치는 문법
Rest	여러 값을 하나의 배열로 모으는 문법

이번 내용은 단순 문법이라기보다 앞으로 실제 JavaScript와 React 코드를 읽기 위해 반드시 익숙해져야 하는 문법에 가깝다.

특히 다음과 같은 코드는 React를 공부하면 굉장히 자주 보게 될 것 같다.

const User = ({ name, age }) => {

    const user = {

        name,

        age
    };

    const newUser = {

        ...user,

        job: "Developer"
    };

    return newUser;
};

처음에는 기호가 많아서 복잡해 보이지만 결국

값을 확인하고 → 필요한 값만 꺼내고 → 데이터를 펼치거나 모으는 과정

이라고 생각하면 조금 더 쉽게 이해할 수 있다.

JavaScript 기초 정리 ③ 콜백 함수, 스코프, 객체, 배열

잼coding — Wed, 16 Sep 2026 09:39:19 +0900

JavaScript 기본 문법 세 번째 정리.

이번에는 함수를 조금 더 활용하는 방법인 콜백 함수부터 시작해서, 변수의 접근 범위를 결정하는 스코프, 여러 데이터를 하나로 묶어 관리하는 객체와 배열에 대해 정리한다.

1. 콜백 함수

콜백 함수(Callback Function)는 다른 함수의 인수로 전달되는 함수를 의미한다.

JavaScript에서는 함수도 하나의 값처럼 사용할 수 있기 때문에 다른 함수에 전달할 수 있다.

예를 들어 다음과 같은 함수가 있다고 해보자.

function main(value) {
    console.log(value);
}

function sub() {
    console.log("I am sub");
}

sub라는 함수를 main 함수에 전달할 수도 있다.

main(sub);

여기서 sub는 함수의 실행 결과가 아니라 함수 자체가 전달되는 것이다.

즉,

sub

와

sub()

는 의미가 다르다.

sub   → 함수 자체
sub() → 함수를 즉시 실행

2. 콜백 함수 활용

콜백 함수는 특정 작업을 수행한 뒤 어떤 동작을 실행할지 외부에서 전달하고 싶을 때 유용하다.

예를 들어 반복 작업을 수행하는 함수를 만들어보자.

function repeat(count, callback) {

    for (let idx = 1; idx <= count; idx++) {
        callback(idx);
    }
}

repeat() 함수는 두 개의 값을 전달받는다.

count    → 몇 번 반복할 것인지
callback → 반복할 때 실행할 함수

숫자를 그대로 출력하기

repeat(5, (idx) => {
    console.log(idx);
});

실행 결과

repeat() 함수 내부에서 다음 코드가 반복해서 실행된다.

callback(idx);

여기에 전달한 콜백 함수는

(idx) => {
    console.log(idx);
}

이므로 현재 idx 값이 그대로 출력된다.

숫자를 두 배로 출력하기

이번에는 다른 함수를 전달할 수도 있다.

repeat(5, function (idx) {
    console.log(idx * 2);
});

실행 결과

repeat() 함수 자체는 똑같지만 전달하는 콜백 함수가 달라졌기 때문에 다른 결과를 만들 수 있다.

즉, 콜백 함수의 핵심은

공통적인 동작은 그대로 두고, 세부적인 동작만 외부에서 함수로 전달할 수 있다는 것

이라고 이해할 수 있다.

앞으로 map, filter, forEach, 이벤트 처리, 비동기 작업 등을 공부할 때 콜백 함수가 계속 등장한다.

3. 스코프

스코프(Scope)는 변수나 함수에 접근할 수 있는 범위를 의미한다.

JavaScript에서는 크게 두 가지로 나눌 수 있다.

전역 스코프(Global Scope)
지역 스코프(Local Scope)

4. 전역 스코프

함수나 블록 바깥에서 선언된 변수는 일반적으로 전역 스코프를 가진다.

let a = 1;

function funcA() {
    console.log(a);
}

funcA();

console.log(a);

a는 함수 밖에서 선언되었기 때문에 함수 내부에서도 사용할 수 있고 바깥에서도 사용할 수 있다.

즉, 전역 변수는 여러 영역에서 접근할 수 있다.

5. 지역 스코프

함수 내부에서 선언된 변수는 해당 함수 내부에서만 사용할 수 있다.

function funcA() {

    let b = 2;

    console.log(b);
}

b는 funcA() 내부에서 선언되었기 때문에 함수 내부에서는 사용할 수 있다.

하지만 다음과 같이 함수 밖에서 사용하면 오류가 발생한다.

function funcA() {

    let b = 2;
}

console.log(b);

b는 함수 내부의 지역 변수이기 때문이다.

6. 블록 스코프

let과 const는 {}를 기준으로 하는 블록 스코프를 가진다.

예를 들어 if문 안에서 변수를 선언해보자.

if (true) {

    let c = 1;

    console.log(c);
}

블록 내부에서는 사용할 수 있지만

console.log(c);

처럼 블록 밖에서는 사용할 수 없다.

for문도 마찬가지

for (let i = 0; i < 10; i++) {

    let d = 1;
}

i와 d는 모두 해당 for문의 블록 안에서만 사용할 수 있다.

따라서 바깥에서

console.log(i);
console.log(d);

를 실행하면 오류가 발생한다.

정리하면

전역 변수 → 전체 영역에서 접근 가능

지역 변수 → 선언된 특정 영역에서만 접근 가능

라고 이해할 수 있다.

7. 객체

객체(Object)는 여러 개의 데이터를 하나로 묶어서 관리할 수 있는 자료형이다.

예를 들어 한 사람의 정보를 저장한다고 생각해보자.

이름, 나이, 취미, 직업을 각각 별도의 변수로 관리할 수도 있다.

let name = "정재민";
let age = 27;
let hobby = "노래듣기";
let job = "ERP Developer";

하지만 이 값들은 모두 한 사람에 대한 정보이므로 객체로 묶으면 더 편리하다.

8. 객체 생성

객체를 만드는 방법에는 대표적으로 두 가지가 있다.

객체 생성자

let obj1 = new Object();

객체 리터럴

let obj2 = {};

실제로 JavaScript에서는 간결한 객체 리터럴 방식을 훨씬 많이 사용한다.

9. 객체 프로퍼티

객체 내부에 저장된 각각의 값을 프로퍼티(Property)라고 한다.

let person = {

    name: "정재민",
    age: 27,
    hobby: "노래듣기",
    job: "ERP Developer",

    extra: {},

    10: 20,

    "like cat": true,
};

객체는 기본적으로 다음과 같은 구조를 가진다.

key : value

예를 들어

name: "정재민"

에서

name     → 프로퍼티의 key
정재민   → 프로퍼티의 value

이다.

객체에는 문자열이나 숫자뿐만 아니라 다른 객체, 배열, 함수 등 다양한 값을 저장할 수 있다.

10. 객체 프로퍼티 접근

객체 내부의 값에 접근하는 방법은 크게 두 가지이다.

점 표기법
괄호 표기법

점 표기법

가장 기본적인 방법이다.

let name = person.name;

console.log(name);

결과

정재민

객체 이름 뒤에 .을 붙이고 프로퍼티 이름을 작성한다.

person.name
person.age
person.hobby

11. 괄호 표기법

대괄호 []를 이용해서 접근할 수도 있다.

let age = person["age"];

console.log(age);

결과

괄호 표기법에서는 프로퍼티 이름을 문자열로 작성해야 한다.

person["age"]

다음처럼 작성하면 의미가 달라진다.

person[age]

JavaScript는 age라는 변수가 존재하는지 찾게 된다.

12. 변수를 이용한 프로퍼티 접근

괄호 표기법의 중요한 장점은 변수에 저장된 값을 이용해 프로퍼티에 접근할 수 있다는 것이다.

let property = "hobby";

let hobby = person[property];

console.log(hobby);

실행하면

노래듣기

가 출력된다.

property 안에 "hobby"라는 문자열이 들어 있기 때문에 사실상 다음과 동일하다.

person["hobby"]

프로퍼티 이름이 실행 중에 달라질 수 있는 경우 유용하다.

13. 점 표기법으로 접근할 수 없는 경우

다음과 같은 프로퍼티가 있다고 해보자.

"like cat": true

프로퍼티 이름에 공백이 있기 때문에 다음처럼 사용할 수 없다.

// person.like cat

이럴 때는 괄호 표기법을 사용한다.

console.log(person["like cat"]);

결과

true

14. 객체에 새로운 프로퍼티 추가

JavaScript 객체는 생성한 이후에도 새로운 프로퍼티를 추가할 수 있다.

person.job = "FE Developer";

person["favoriteFood"] = "떡볶이";

출력해보면 기존 객체에 값이 추가된 것을 확인할 수 있다.

console.log(person);

15. 프로퍼티 수정

이미 존재하는 프로퍼티에 새로운 값을 대입하면 수정할 수 있다.

person.job = "Educator";

person["favoriteFood"] = "초콜릿";

주의해야 할 점은 JavaScript는 대소문자를 구분한다는 것이다.

예를 들어

person["favoriteFood"] = "떡볶이";

person["favoritefood"] = "초콜릿";

이라고 작성하면 기존 favoriteFood가 수정되는 것이 아니다.

favoriteFood
favoritefood

를 서로 다른 프로퍼티로 판단한다.

따라서 프로퍼티 이름의 대소문자를 정확하게 작성해야 한다.

16. 프로퍼티 삭제

객체의 프로퍼티를 삭제할 때는 delete 연산자를 사용한다.

delete person.job;

delete person["favoriteFood"];

삭제 후 객체를 출력하면 해당 프로퍼티가 사라진 것을 확인할 수 있다.

17. 프로퍼티 존재 여부 확인

객체 안에 특정 프로퍼티가 존재하는지 확인할 때는 in 연산자를 사용할 수 있다.

let result1 = "name" in person;

let result2 = "cat" in person;

console.log(result1);
console.log(result2);

person 객체에는 name 프로퍼티가 있으므로

true

가 반환된다.

반면 cat이라는 프로퍼티는 존재하지 않으므로

false

가 반환된다.

in 연산자의 형태는 다음과 같다.

"프로퍼티 이름" in 객체

18. const로 선언한 객체

객체는 const로 선언하는 경우가 많다.

const animal = {

    type: "고양이",
    name: "나비",
    color: "black",
};

const는 값을 바꿀 수 없다고 배웠지만 객체에서는 조금 주의해서 이해해야 한다.

다음 코드는 정상적으로 동작한다.

animal.age = 2;

animal.name = "까망이";

delete animal.color;

console.log(animal);

객체 내부의 프로퍼티를 추가하거나 수정하거나 삭제하는 것은 가능하다.

19. const 객체는 왜 수정할 수 있을까?

const는 객체 내부를 절대 수정할 수 없다는 의미가 아니다.

변수 자체에 새로운 값을 다시 할당할 수 없다는 의미이다.

따라서 다음은 가능하다.

const animal = {
    name: "나비"
};

animal.name = "까망이";

하지만 객체 자체를 새로운 객체로 교체하는 것은 불가능하다.

const animal = {
    name: "나비"
};

// 오류 발생
animal = {
    name: "초코"
};

즉,

객체 내부 변경 → 가능

변수에 새로운 객체 재할당 → 불가능

이라고 이해하면 된다.

20. 메서드

객체의 프로퍼티 값으로 함수를 저장할 수도 있다.

이처럼 값이 함수인 프로퍼티를 메서드(Method)라고 한다.

const person = {

    name: "정재민",

    sayHi() {
        console.log("안녕!");
    },
};

여기서 sayHi가 메서드이다.

21. 메서드 호출

메서드도 일반적인 프로퍼티처럼 점 표기법과 괄호 표기법을 사용할 수 있다.

person.sayHi();

또는

person["sayHi"]();

결과

안녕!

객체가 단순히 데이터만 저장하는 것이 아니라 관련 기능까지 함께 묶을 수 있다는 것이 중요하다.

예를 들어 사람 객체라면 다음처럼 구성할 수 있다.

const person = {

    name: "정재민",
    age: 27,

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

this에 대한 내용은 이후 객체와 메서드를 더 공부할 때 따로 정리할 예정이다.

22. 배열

배열(Array)은 여러 개의 값을 순서대로 저장할 수 있는 자료구조이다.

객체가 key를 이용해서 값을 관리한다면 배열은 순서(Index)를 이용해서 값을 관리한다.

23. 배열 생성

배열을 만드는 방법도 객체와 마찬가지로 두 가지가 있다.

배열 생성자

let arrA = new Array();

배열 리터럴

let arrB = [];

대부분의 경우 배열 리터럴 방식을 사용한다.

24. 배열에 값 저장하기

배열에는 여러 개의 값을 저장할 수 있다.

let arr = [1, 2, 3];

JavaScript 배열에는 서로 다른 자료형도 함께 저장할 수 있다.

let arrC = [

    1,
    2,
    3,

    true,

    "hello",

    null,

    undefined,

    () => {},

    {},

    [],
];

숫자, 문자열, Boolean뿐만 아니라 함수, 객체, 다른 배열까지 저장할 수 있다.

25. 배열 요소와 인덱스

배열 안에 저장된 각각의 값을 요소(Element)라고 한다.

각 요소에는 순서를 나타내는 인덱스(Index)가 존재한다.

중요한 점은 배열의 인덱스는 0부터 시작한다는 것이다.

let arr = ["A", "B", "C"];

각 요소의 인덱스는 다음과 같다.

"A" → 0
"B" → 1
"C" → 2

26. 배열 요소 접근

인덱스를 이용해서 원하는 배열 요소에 접근할 수 있다.

let arrC = [1, 2, 3];

let item1 = arrC[0];

let item2 = arrC[1];

console.log(item1);
console.log(item2);

결과

1
2

27. 배열 요소 수정

배열의 특정 위치에 새로운 값을 대입하면 해당 요소를 수정할 수 있다.

let arrC = [1, 2, 3];

arrC[0] = "hello";

console.log(arrC);

결과

["hello", 2, 3]

기존 인덱스 0에 저장되어 있던 1이 "hello"로 변경된다.

객체와 배열의 차이

객체와 배열은 모두 여러 데이터를 하나로 묶을 수 있지만 데이터를 관리하는 방식이 다르다.

구분객체배열

기본 형태	{}	[]
데이터 구분	key	index
접근 방식	person.name	arr[0]
적합한 상황	속성이 있는 데이터	순서가 있는 데이터

예를 들어 사람 한 명의 정보를 관리한다면 객체가 적절하다.

const person = {

    name: "정재민",
    age: 27,
    job: "ERP Developer",
};

반면 여러 명의 이름을 순서대로 저장한다면 배열이 적절하다.

const users = [
    "정재민",
    "김철수",
    "이영희"
];

그리고 실제 개발에서는 객체와 배열을 함께 사용하는 경우가 많다.

예를 들어 여러 사용자의 정보를 저장한다면 다음처럼 작성할 수 있다.

const users = [

    {
        name: "정재민",
        age: 27
    },

    {
        name: "김철수",
        age: 30
    },

    {
        name: "이영희",
        age: 25
    }
];

배열 안에 여러 개의 객체가 들어 있는 형태이다.

이런 구조는 서버에서 데이터를 받아오거나 API 데이터를 처리할 때 자주 보게 된다.

정리

이번에는 JavaScript의 콜백 함수부터 객체와 배열까지 공부했다.

개념설명

콜백 함수	다른 함수에 인수로 전달되는 함수
스코프	변수나 함수에 접근할 수 있는 범위
전역 스코프	전체 영역에서 접근 가능
지역 스코프	특정 함수나 블록에서만 접근 가능
객체	여러 데이터를 key-value 형태로 관리
프로퍼티	객체 내부에 존재하는 각각의 속성
점 표기법	person.name
괄호 표기법	person["name"]
delete	객체 프로퍼티 삭제
in	객체에 특정 프로퍼티가 있는지 확인
메서드	객체의 값으로 저장된 함수
배열	여러 데이터를 순서대로 저장
인덱스	배열 요소의 위치를 나타내는 번호

이번 내용부터 JavaScript에서 데이터를 어떻게 구조화하고 함수와 데이터를 어떻게 함께 사용할 수 있는지가 조금씩 보이기 시작했다.

특히 콜백 함수는 앞으로 배열 메서드와 비동기 JavaScript를 공부할 때 계속 등장하는 핵심 개념이고, 객체와 배열은 실제 웹 개발에서 데이터를 다룰 때 거의 항상 사용하게 된다.

다음에는 배열을 더욱 편리하게 다룰 수 있는 배열 메서드와 객체 순회에 대해 정리해볼 예정이다.

JavaScript 기초 정리 ② 조건문, 반복문, 함수

잼coding — Tue, 15 Sep 2026 08:31:28 +0900

JavaScript 기본 문법 두 번째 정리.

이번에는 첫 번째 글에서 다룬 기본 연산자에 이어 null 병합 연산자, typeof, 삼항 연산자를 알아보고, 프로그램의 흐름을 제어하는 조건문과 반복문, 그리고 JavaScript에서 중요한 함수에 대해 정리한다.

1. Null 병합 연산자 ??

Null 병합 연산자는 여러 값 중에서 null 또는 undefined가 아닌 값을 선택할 때 사용하는 연산자이다.

let var1;

let var2 = 10;
let var3 = 20;

let var4 = var1 ?? var2;
let var5 = var1 ?? var3;

console.log(var4);
console.log(var5);

결과

10
20

var1은 값을 할당하지 않았기 때문에 undefined 상태이다.

따라서

var1 ?? var2

에서 var1이 undefined이므로 오른쪽 값인 var2가 선택된다.

실제 활용 예시

사용자의 이름이 존재하면 이름을 표시하고, 이름이 없다면 닉네임을 표시하는 상황을 생각해볼 수 있다.

let userName = "정재민";
let userNickName = "Winterlood";

let displayName = userName ?? userNickName;

console.log(displayName);

결과

정재민

userName에 값이 존재하기 때문에 왼쪽 값인 "정재민"이 선택된다.

반대로 다음과 같은 경우에는 닉네임이 출력된다.

let userName = null;
let userNickName = "Winterlood";

let displayName = userName ?? userNickName;

console.log(displayName);

결과

Winterlood

즉,

왼쪽 값 ?? 오른쪽 값

에서

왼쪽 값이 null 또는 undefined → 오른쪽 값 반환
왼쪽 값이 정상적인 값 → 왼쪽 값 반환

이라고 이해할 수 있다.

??와 ||의 차이

처음에는 ||와 비슷해 보이지만 차이가 있다.

??는 오직 null과 undefined만 없는 값으로 판단한다.

let value = 0;

console.log(value ?? 10);

결과

반면 ||는 0, "", false 등도 거짓으로 판단한다.

console.log(value || 10);

결과

따라서 0이나 false도 정상적인 값으로 사용해야 한다면 ??를 사용하는 것이 적절하다.

2. typeof 연산자

typeof는 값의 자료형을 문자열 형태로 반환하는 연산자이다.

let var7 = 1;

console.log(typeof var7);

결과

number

JavaScript 변수는 하나의 자료형에 고정되어 있지 않기 때문에 다른 타입의 값을 다시 저장할 수도 있다.

let var7 = 1;

var7 = "hello";
var7 = true;

let t1 = typeof var7;

console.log(t1);

결과

boolean

마지막으로 저장된 값이 true이므로 현재 var7의 타입은 boolean이다.

대표적인 결과는 다음과 같다.

console.log(typeof 10);          // number
console.log(typeof "hello");     // string
console.log(typeof true);        // boolean
console.log(typeof undefined);   // undefined
console.log(typeof function(){});// function

변수 안에 어떤 종류의 값이 들어있는지 확인하고 싶을 때 유용하다.

3. 삼항 연산자

삼항 연산자는 이름 그대로 3개의 항을 사용하는 연산자이다.

조건에 따라 서로 다른 값을 반환하고 싶을 때 사용할 수 있다.

기본 형태는 다음과 같다.

조건식 ? 참일 때 값 : 거짓일 때 값

예를 들어 어떤 숫자가 짝수인지 홀수인지 판단한다고 해보자.

let var8 = 10;

let res = var8 % 2 === 0 ? "짝수" : "홀수";

console.log(res);

결과

짝수

다음 조건을 검사하고 있다.

var8 % 2 === 0

숫자를 2로 나누었을 때 나머지가 0이면 짝수이므로 "짝수"를 반환하고, 그렇지 않으면 "홀수"를 반환한다.

이를 if문으로 작성하면 다음과 비슷하다.

let res;

if (var8 % 2 === 0) {
    res = "짝수";
} else {
    res = "홀수";
}

간단한 조건에 따라 하나의 값을 결정해야 할 때 삼항 연산자를 사용하면 코드를 짧게 작성할 수 있다.

다만 조건이 너무 복잡해진다면 삼항 연산자를 여러 번 중첩하기보다는 if문을 사용하는 것이 읽기 쉽다.

4. 조건문

조건문은 특정 조건에 따라 서로 다른 코드를 실행하도록 만드는 문법이다.

JavaScript에서는 대표적으로 if와 switch를 사용할 수 있다.

5. if문

가장 기본적인 조건문이다.

let num = 10;

if (num >= 10) {
    console.log("num은 10 이상입니다.");
}

() 안의 조건식이 true이면 {} 내부의 코드가 실행된다.

if - else

조건이 참일 때와 거짓일 때 각각 다른 코드를 실행할 수도 있다.

let num = 10;

if (num >= 10) {
    console.log("조건이 참입니다.");
} else {
    console.log("조건이 거짓입니다.");
}

else if

여러 조건을 차례대로 검사해야 할 때 else if를 사용할 수 있다.

let num = 10;

if (num >= 10) {
    console.log("num은 10 이상입니다.");
} else if (num >= 5) {
    console.log("num은 5 이상입니다.");
} else if (num >= 3) {
    console.log("num은 3 이상입니다.");
} else {
    console.log("num은 3 미만입니다.");
}

조건은 위에서부터 순서대로 검사한다.

현재 num은 10이기 때문에 첫 번째 조건인

num >= 10

이 true가 된다.

따라서

num은 10 이상입니다.

가 출력되고 이후의 else if 조건은 검사하지 않는다.

즉, 먼저 만족하는 조건 하나만 실행된다.

6. switch문

switch문 역시 조건에 따라 서로 다른 코드를 실행하기 위해 사용한다.

특정 변수의 값에 따라 여러 경우를 나누어 처리할 때 if문보다 직관적으로 표현할 수 있다.

let animal = "cat";

switch (animal) {
    case "cat":
        console.log("고양이");
        break;

    case "dog":
        console.log("강아지");
        break;

    case "bear":
        console.log("곰");
        break;

    case "snake":
        console.log("뱀");
        break;

    case "tiger":
        console.log("호랑이");
        break;

    default:
        console.log("그런 동물은 전 모릅니다.");
}

animal의 값이 "cat"이므로

고양이

가 출력된다.

case

case에는 비교하고 싶은 값을 작성한다.

case "cat":

switch에 전달된 값과 일치하면 해당 부분의 코드가 실행된다.

break

break는 현재 switch문을 종료한다.

case "cat":
    console.log("고양이");
    break;

break를 작성하지 않으면 일치하는 case를 찾은 이후 다음 case까지 계속 실행될 수 있다.

따라서 일반적인 switch문에서는 break를 함께 사용한다.

default

어떤 case에도 해당하지 않을 때 실행된다.

default:
    console.log("그런 동물은 전 모릅니다.");

if문의 마지막 else와 비슷한 역할을 한다.

7. 반복문

반복문은 같은 코드를 여러 번 실행해야 할 때 사용하는 문법이다.

JavaScript에서는 대표적으로 for문을 사용할 수 있다.

8. for문

기본적인 for문의 형태는 다음과 같다.

for (초기식; 조건식; 증감식) {
    실행할 코드
}

예를 들어 다음 코드는 0부터 10까지 반복한다.

for (let idx = 0; idx <= 10; idx++) {
    console.log(idx);
}

각 부분의 역할은 다음과 같다.

let idx = 0 → 반복문에서 사용할 변수 생성
idx <= 10   → 반복을 계속할 조건
idx++       → 한 번 반복한 뒤 idx를 1 증가

9. continue

continue는 현재 반복을 건너뛰고 다음 반복으로 이동한다.

for (let idx = 0; idx <= 10; idx++) {

    if (idx % 2 === 0) {
        continue;
    }

    console.log(idx);
}

현재 숫자가 짝수라면 continue가 실행된다.

따라서 짝수에서는 아래의 console.log()가 실행되지 않는다.

결과

즉, 이 코드는 홀수만 출력한다.

10. break

break는 반복문 자체를 종료한다.

continue와 함께 사용해보면 차이를 쉽게 이해할 수 있다.

for (let idx = 0; idx <= 10; idx++) {

    if (idx % 2 === 0) {
        continue;
    }

    console.log(idx);

    if (idx >= 5) {
        break;
    }
}

실행 과정을 보면 짝수는 continue로 건너뛴다.

따라서 출력되는 값은

1
3
5

이다.

idx가 5가 되었을 때

if (idx >= 5) {
    break;
}

조건을 만족하여 반복문 전체가 종료된다.

정리하면

continue → 현재 반복만 건너뛰기
break    → 반복문 자체 종료하기

라고 이해할 수 있다.

11. 함수

함수(Function)는 특정 기능을 수행하는 코드를 하나의 단위로 묶어놓은 것이다.

반복해서 사용하는 코드를 함수로 만들어두면 필요할 때마다 호출해서 사용할 수 있다.

예를 들어 사각형의 넓이를 계산하는 함수를 만들어보자.

function getArea(width, height) {

    let area = width * height;

    return area;
}

여기서

getArea       → 함수 이름
width, height → 매개변수
return area   → 함수가 반환하는 값

이다.

12. 함수 호출

만들어진 함수는 함수 이름 뒤에 ()를 붙여 실행할 수 있다.

getArea(10, 20);

10은 width, 20은 height로 전달된다.

함수가 반환하는 값을 변수에 저장할 수도 있다.

let area1 = getArea(10, 20);

console.log(area1);

결과

다른 값을 전달하면 같은 함수를 다시 사용할 수 있다.

let area2 = getArea(30, 20);

console.log(area2);

결과

즉, 함수의 장점은 같은 로직을 여러 번 작성하지 않고 필요한 값만 전달하여 재사용할 수 있다는 것이다.

13. 매개변수와 인수

함수를 공부할 때 비슷해서 헷갈리는 용어가 있다.

바로 매개변수(Parameter)와 인수(Argument)이다.

함수를 선언할 때 사용하는 변수는 매개변수이다.

function getArea(width, height) {
    return width * height;
}

여기서

width
height

가 매개변수이다.

반면 함수를 실제로 호출하면서 전달하는 값은 인수라고 한다.

getArea(10, 20);

여기서

10
20

이 인수이다.

14. return

return은 함수에서 계산된 값을 함수 밖으로 반환한다.

function getArea(width, height) {

    let area = width * height;

    return area;
}

함수에서 반환된 값은 다음과 같이 변수에 저장할 수 있다.

let result = getArea(10, 20);

console.log(result);

결과

return이 실행되면 함수는 그 지점에서 종료된다는 점도 중요하다.

15. 중첩 함수

함수 내부에 또 다른 함수를 선언할 수도 있다.

이를 중첩 함수라고 한다.

function getArea(width, height) {

    function another() {
        console.log("another");
    }

    another();

    let area = width * height;

    return area;
}

another() 함수는 getArea() 내부에서 선언되었기 때문에 기본적으로 getArea() 내부에서 사용할 수 있다.

함수 안에서만 필요한 기능을 별도의 함수로 분리하고 싶을 때 활용할 수 있다.

16. 함수 호이스팅

JavaScript의 함수 선언문에는 호이스팅(Hoisting)이라는 특징이 있다.

호이스팅은 단어 그대로 코드를 위쪽으로 끌어올린 것처럼 동작하는 현상이다.

예를 들어 함수를 선언하기 전에 호출해도 실행할 수 있다.

let area1 = getArea(10, 20);

console.log(area1);

function getArea(width, height) {
    return width * height;
}

코드상으로는 getArea() 함수가 아래에서 선언되어 있지만 정상적으로 실행된다.

이는 JavaScript가 함수 선언문을 실행 전에 처리하기 때문이다.

따라서 다음처럼 작성하는 것이 가능하다.

hello();

function hello() {
    console.log("Hello");
}

결과

Hello

단, 모든 함수 작성 방식이 동일하게 호이스팅되는 것은 아니다.

뒤에서 다룰 함수 표현식과는 차이가 있다.

17. 함수 표현식

JavaScript에서는 함수도 하나의 값처럼 변수에 저장할 수 있다.

function funcA() {
    console.log("funcA");
}

let varA = funcA;

varA();

funcA라는 함수 자체를 varA에 저장했기 때문에

varA();

를 이용해서도 함수를 실행할 수 있다.

18. 익명 함수

함수 이름 없이 함수를 생성할 수도 있다.

이를 익명 함수(Anonymous Function)라고 한다.

let funcB = function () {
    console.log("funcB");
};

funcB();

함수 자체에는 이름이 없지만 funcB 변수에 저장했기 때문에 해당 변수를 이용하여 호출한다.

이처럼 함수를 변수에 저장하는 방식을 함수 표현식이라고 한다.

19. 함수 표현식과 호이스팅

함수 선언문과 함수 표현식은 호이스팅에서 중요한 차이가 있다.

함수 선언문은 선언보다 먼저 호출할 수 있다.

hello();

function hello() {
    console.log("Hello");
}

하지만 다음과 같은 함수 표현식은 선언 전에 호출할 수 없다.

hello();

let hello = function () {
    console.log("Hello");
};

let으로 선언된 변수는 초기화되기 전에 사용할 수 없기 때문이다.

따라서 함수 표현식을 사용할 때는 일반적으로 함수를 변수에 할당한 이후 호출해야 한다.

20. 블록 스코프 주의하기

처음 작성했던 다음 코드에는 주의할 부분이 있다.

{
    let varB = function () {
        console.log("funcB");
    };
}

varB();

이 코드는 정상적으로 실행되지 않는다.

let은 블록 스코프(Block Scope)를 가지기 때문이다.

즉,

{
    let varB = ...
}

에서 선언한 varB는 {} 내부에서만 사용할 수 있다.

따라서 사용하려면 다음과 같이 같은 블록 안에서 호출해야 한다.

{
    let varB = function () {
        console.log("funcB");
    };

    varB();
}

또는 블록 밖에서 사용할 예정이라면 변수 자체를 바깥에서 선언해야 한다.

let funcB = function () {
    console.log("funcB");
};

funcB();

변수를 어디에서 선언했느냐에 따라 사용할 수 있는 범위가 달라진다는 점은 앞으로 JavaScript를 공부하면서 중요한 개념이다.

21. 화살표 함수

ES6부터 함수를 더욱 간결하게 작성할 수 있는 화살표 함수(Arrow Function)가 추가되었다.

기존 함수 표현식은 다음과 같다.

let funcC = function () {
    return 1;
};

화살표 함수로 바꾸면 다음처럼 작성할 수 있다.

let funcC = () => {
    return 1;
};

함수 이름 대신 => 기호를 사용하는 것이 특징이다.

22. 화살표 함수 간단하게 작성하기

함수 내부에서 단순히 하나의 값을 반환한다면 {}와 return도 생략할 수 있다.

let addOne = (value) => value + 1;

console.log(addOne(10));

결과

위 코드는 다음 함수와 동일한 역할을 한다.

let addOne = function (value) {
    return value + 1;
};

화살표 함수를 사용하면 훨씬 간결하게 표현할 수 있다.

매개변수가 하나일 경우

매개변수가 하나라면 괄호를 생략할 수도 있다.

let addOne = value => value + 1;

다만 개인적으로 처음 공부할 때는 구조를 명확하게 보기 위해 다음처럼 괄호를 작성하는 것도 좋다.

let addOne = (value) => value + 1;

매개변수가 여러 개인 경우

매개변수가 여러 개라면 괄호가 필요하다.

let add = (a, b) => a + b;

console.log(add(10, 20));

결과

함수 선언 방식 비교

JavaScript에서 지금까지 배운 함수 작성 방식을 비교하면 다음과 같다.

방식예시

함수 선언문	function add(a, b) { return a + b; }
함수 표현식	let add = function(a, b) { return a + b; };
화살표 함수	let add = (a, b) => a + b;

같은 기능을 수행할 수 있지만 작성 방법과 일부 동작에는 차이가 있다.

처음에는 세 가지 방식이 있다는 정도로 이해하고, 이후 JavaScript를 더 공부하면서 각각의 차이를 알아가면 될 것 같다.

정리

이번에는 JavaScript의 연산자부터 조건문, 반복문, 함수까지 공부했다.

개념설명

??	null, undefined가 아닌 값 선택
typeof	값의 자료형 확인
조건 ? A : B	삼항 연산자
if	조건에 따라 코드 실행
else if	여러 조건을 순서대로 검사
switch	하나의 값을 여러 경우와 비교
for	코드를 반복 실행
continue	현재 반복을 건너뜀
break	반복문 또는 switch 종료
function	재사용 가능한 코드 묶음
return	함수 실행 결과 반환
호이스팅	함수 선언을 위에서 한 것처럼 사용할 수 있는 특성
함수 표현식	함수를 변수에 저장
익명 함수	이름이 없는 함수
화살표 함수	=>를 이용한 간결한 함수 표현

이번 내용부터는 단순히 값을 저장하고 계산하는 것을 넘어서 프로그램의 실행 흐름을 직접 제어하는 문법이 등장했다.

특히 if, for, function은 앞으로 JavaScript 코드를 작성하면서 계속 사용하게 될 핵심 문법이기 때문에 동작 방식을 확실하게 이해해둘 필요가 있다.

JavaScript 기초 정리 1. 변수, 자료형, 형 변환, 연산자

잼coding — Mon, 14 Sep 2026 19:51:36 +0900

Js를 다시 공부하면서 오랜만에 정리해 두었던 내용을 토대로 블로그에 기재할려고 한다. js를 다시 공부하거나, 잘 모르는 분들에게 도움을 주기 위해 이 글을 작성한다.

1. 변수와 상수

프로그램을 작성하다 보면 데이터를 저장해두고 필요한 순간에 다시 사용해야 하는 경우가 많다.

이때 데이터를 저장하기 위해 사용하는 것이 변수(Variable)이다.

JavaScript에서는 주로 let과 const를 사용한다.

let

let으로 선언한 변수는 이후에 값을 변경할 수 있다.

let age = 27;

console.log(age);

age = 30;

console.log(age);

실행 결과

27
30

처음에는 age에 27을 저장했지만 이후 30으로 값을 변경할 수 있다.

즉, 값이 변경될 가능성이 있는 데이터에는 let을 사용한다.

const

const는 상수(Constant)를 선언할 때 사용한다.

한 번 값을 할당하면 다른 값으로 다시 할당할 수 없다.

const birth = "2000.06.19";

예를 들어 다음과 같이 값을 다시 대입하면 오류가 발생한다.

const birth = "2000.06.19";

birth = "2000.07.19";

따라서 값이 변경될 필요가 없다면 let보다 const를 사용하는 것이 좋다.

2. 변수 명명 규칙

변수 이름을 아무렇게나 만들 수 있는 것은 아니다.

JavaScript에서는 몇 가지 기본적인 변수 명명 규칙이 존재한다.

2-1. $, _를 제외한 특수문자는 사용할 수 없다.

다음과 같은 변수명은 사용할 수 있다.

let name1;
let $name2;
let _name3;

반면 다음과 같은 변수명은 사용할 수 없다.

// let user-name;
// let user@name;

2-2. 숫자로 시작할 수 없다.

숫자가 변수명에 들어가는 것은 가능하지만 첫 번째 글자로 사용할 수는 없다.

let name1;
let user2;

다음과 같은 형태는 사용할 수 없다.

// let 1name;

2-3. 예약어를 변수명으로 사용할 수 없다.

JavaScript에서 이미 문법적인 의미를 가지고 있는 단어를 예약어(Reserved Word)라고 한다.

예를 들어 if, for, while, class 등의 키워드는 변수명으로 사용할 수 없다.

// let if;
// let for;

3. 변수 이름은 의미가 드러나도록 작성하기

문법적으로 문제가 없는 변수명이라고 해서 좋은 변수명인 것은 아니다.

변수 이름만 보고도 어떤 데이터를 저장하고 있는지 알 수 있도록 작성하는 것이 중요하다.

let salesCount = 1;
let refundCount = 1;

let totalSalesCount = salesCount - refundCount;

예를 들어 a, b, c처럼 작성하는 것보다 salesCount, refundCount처럼 의미가 드러나는 이름을 사용하는 것이 코드를 이해하기 쉽다.

JavaScript에서는 여러 단어를 연결할 때 일반적으로 camelCase 방식을 많이 사용한다.

let totalSalesCount;
let userName;
let productPrice;

첫 단어는 소문자로 시작하고, 이후 단어의 첫 글자를 대문자로 작성하는 방식이다.

4. JavaScript의 자료형

JavaScript에서는 변수에 숫자, 문자열, 참/거짓 등 다양한 형태의 데이터를 저장할 수 있다.

이러한 데이터의 종류를 자료형(Data Type)이라고 한다.

4-1. Number Type

숫자를 표현하는 자료형이다.

JavaScript에서는 정수와 실수를 별도의 자료형으로 나누지 않고 대부분 Number 타입으로 처리한다.

let num1 = 27;
let num2 = 1.5;
let num3 = -20;

Number 타입을 이용하면 기본적인 산술 연산을 수행할 수 있다.

console.log(num1 + num2);
console.log(num1 - num2);
console.log(num1 * num2);
console.log(num1 / num2);
console.log(num1 % num2);

% 연산자는 나머지를 구하는 연산자이다.

console.log(10 % 3);

결과는 다음과 같다.

Infinity

JavaScript에는 무한대를 나타내는 Infinity라는 값도 존재한다.

let inf = Infinity;
let mInf = -Infinity;

각각 양의 무한대와 음의 무한대를 의미한다.

NaN

NaN은 Not a Number의 약자로, 숫자가 아닌 값을 의미한다.

let nan = NaN;

예를 들어 숫자와 숫자로 변환할 수 없는 문자열을 곱하면 정상적인 계산을 할 수 없기 때문에 NaN이 발생한다.

console.log(1 * "hello");

결과

NaN

주의할 점은 이름은 Not a Number이지만 JavaScript에서 NaN 자체는 Number 타입에 포함된다는 것이다.

5. String Type

문자열을 표현하는 자료형이다.

문자열은 " ", ' ', 또는 백틱 ` `을 사용해 표현할 수 있다.

let myName = "정재민";
let myLocation = "목동";

문자열끼리는 + 연산자를 이용해 연결할 수 있다.

let introduce = myName + myLocation;

console.log(introduce);

하지만 이렇게 작성하면 문자열 사이에 공백이나 문장을 직접 추가해야 하는 경우 코드가 복잡해질 수 있다.

이럴 때 사용할 수 있는 것이 템플릿 리터럴(Template Literal)이다.

템플릿 리터럴

템플릿 리터럴은 백틱 `을 사용하며 ${} 안에 변수를 넣을 수 있다.

let myName = "정재민";
let myLocation = "목동";

let introduceText = `${myName}은 ${myLocation}에 거주합니다`;

console.log(introduceText);

결과

정재민은 목동에 거주합니다

문자열과 변수를 함께 사용해야 할 때 매우 편리하다.

6. Boolean Type

Boolean은 참(True)과 거짓(False)을 나타내는 자료형이다.

let isSwitchOn = true;
let isEmpty = false;

주로 조건문이나 상태를 판단할 때 사용한다.

예를 들어 로그인 여부를 저장한다면 다음과 같이 작성할 수 있다.

let isLogin = true;

7. Null Type

null은 개발자가 의도적으로 값이 없다는 것을 나타낼 때 사용한다.

let empty = null;

즉, 어떤 변수에 값이 존재하지 않는 상태를 직접 명시하고 싶을 때 사용할 수 있다.

8. Undefined Type

undefined는 변수를 선언했지만 아직 값을 할당하지 않은 상태를 의미한다.

let none;

console.log(none);

결과

undefined

null과 undefined는 둘 다 값이 없다는 느낌이 있지만 차이가 있다.

null : 개발자가 의도적으로 값이 없다고 지정
undefined : 아직 값이 할당되지 않은 상태

9. 형 변환

JavaScript에서는 하나의 자료형을 다른 자료형으로 변환할 수 있다.

형 변환에는 크게 두 가지가 있다.

묵시적 형 변환과 명시적 형 변환이다.

9-1. 묵시적 형 변환

묵시적 형 변환은 개발자가 직접 자료형을 변경하지 않아도 JavaScript 엔진이 상황에 따라 자동으로 자료형을 변환하는 것이다.

let num = 10;
let str = "20";

const result = num + str;

console.log(result);

결과

숫자 10과 문자열 "20"을 더했지만 결과는 30이 아니라 "1020"이 된다.

+ 연산을 수행하는 과정에서 숫자 10이 문자열 "10"으로 자동 변환되었기 때문이다.

즉,

10 + "20"

은 사실상

"10" + "20"

처럼 동작하여 "1020"이 된다.

이처럼 JavaScript의 자동 형 변환은 편리하지만 예상하지 못한 결과를 만들 수도 있기 때문에 주의해야 한다.

10. 명시적 형 변환

개발자가 직접 내장 함수를 사용하여 자료형을 변환하는 것을 명시적 형 변환이라고 한다.

문자열 → 숫자

Number()를 사용할 수 있다.

let str1 = "10";

let strToNum1 = Number(str1);

console.log(strToNum1);

결과

하지만 숫자로 변환할 수 없는 문자열이 포함되어 있다면 NaN이 발생한다.

let str2 = "10개";

let strToNum2 = Number(str2);

console.log(strToNum2);

결과

NaN

Number()는 문자열 전체가 정상적인 숫자 형태여야 변환할 수 있다는 점을 기억해야 한다.

숫자 → 문자열

숫자를 문자열로 변경할 때는 String()을 사용할 수 있다.

let num1 = 20;

let numToStr1 = String(num1);

console.log(numToStr1 + "입니다");

결과

20입니다

11. 연산자

연산자는 값을 계산하거나 비교하는 등의 작업을 수행하기 위해 사용하는 기호이다.

JavaScript에는 다양한 종류의 연산자가 존재한다.

11-1. 대입 연산자

=는 오른쪽의 값을 왼쪽 변수에 저장하는 대입 연산자이다.

let var1 = 1;

수학에서는 =가 '같다'라는 의미지만 프로그래밍에서는 오른쪽 값을 왼쪽 변수에 저장한다는 의미로 사용된다.

12. 산술 연산자

숫자를 계산하기 위해 사용하는 연산자이다.

let num1 = 3 + 2;
let num2 = 3 - 2;
let num3 = 3 * 2;
let num4 = 3 / 2;
let num5 = 3 % 2;

각각 다음을 의미한다.

+ : 덧셈
- : 뺄셈
* : 곱셈
/ : 나눗셈
% : 나머지

괄호를 이용해 연산 순서를 지정할 수도 있다.

let num6 = (1 + 2) * 10;

console.log(num6);

결과

13. 복합 대입 연산자

현재 변수의 값을 이용해 연산한 후 다시 같은 변수에 저장할 때 사용할 수 있다.

let num7 = 10;

num7 += 20;

위 코드는 다음 코드와 같은 의미이다.

num7 = num7 + 20;

다른 연산자도 동일한 방식으로 사용할 수 있다.

num7 += 20;
num7 -= 20;
num7 *= 20;
num7 /= 20;
num7 %= 10;

반복적으로 값을 변경해야 할 때 코드를 간결하게 작성할 수 있다.

14. 증감 연산자

숫자를 1 증가시키거나 감소시키기 위해 사용하는 연산자이다.

let num8 = 10;

num8++;

++는 값을 1 증가시키며 --는 값을 1 감소시킨다.

num8++;
num8--;

증감 연산자에는 전위 연산과 후위 연산이라는 차이도 존재한다.

후위 연산

let num = 10;

console.log(num++);

먼저 현재 값인 10을 사용하고 그 이후 값이 11이 된다.

전위 연산

let num = 10;

console.log(++num);

먼저 값을 11로 증가시킨 다음 증가된 값을 사용한다.

즉,

num++ : 현재 값을 먼저 사용 → 이후 증가
++num : 먼저 증가 → 증가한 값을 사용

단순히 한 줄에서 num++만 사용하는 경우에는 큰 차이가 없지만 다른 연산과 같이 사용할 때는 결과가 달라질 수 있다.

15. 논리 연산자

Boolean 값을 이용한 논리 연산에 사용한다.

JavaScript에서 대표적인 논리 연산자는 ||, &&, !이다.

let or = true || false;
let and = true && false;
let not = !true;

console.log(or, and, not);

결과

true false false

OR ||

둘 중 하나라도 true이면 true이다.

true || false

결과

true

AND &&

두 값이 모두 true여야 true이다.

true && false

결과

false

NOT !

Boolean 값을 반대로 바꾼다.

!true

결과

false

16. 비교 연산자

두 값을 비교할 때 사용한다.

let comp1 = 1 === "1";
let comp2 = 1 !== 2;

console.log(comp1, comp2);

결과

false true

===는 두 값의 값과 자료형까지 모두 같은지 확인한다.

1 === "1"

숫자 1과 문자열 "1"은 눈으로 보이는 값은 같지만 자료형이 다르기 때문에 결과는 false이다.

반대로 !==는 두 값이 서로 다른지를 확인한다.

1 !== 2

두 값이 다르기 때문에 결과는 true이다.

JavaScript에는 ==도 존재하지만 자동 형 변환이 발생할 수 있어 예상하지 못한 결과가 만들어질 수 있다.

따라서 일반적으로는 ==보다 ===를 사용하는 습관을 들이는 것이 좋다.

정리

이번에 공부한 JavaScript의 기본 문법을 정리하면 다음과 같다.

구분내용

let	값을 변경할 수 있는 변수
const	재할당할 수 없는 상수
Number	숫자 자료형
String	문자열 자료형
Boolean	true, false
null	의도적으로 값이 없음을 표현
undefined	값이 아직 할당되지 않은 상태
Number()	문자열 등을 숫자로 변환
String()	값을 문자열로 변환
+ - * / %	산술 연산자
+= -= *= /=	복합 대입 연산자
++ --	증감 연산자
`
=== !==	비교 연산자

JavaScript는 자동으로 자료형을 변환해주는 경우가 많기 때문에 처음에는 편리해 보이지만, 이러한 특성 때문에 예상하지 못한 결과가 발생하기도 한다.

특히 앞으로 조건문이나 함수 등을 공부할 때 자료형과 형 변환에 대한 이해가 중요할 것 같다.

다음에는 JavaScript의 조건문과 반복문에 대해 정리해볼 예정이다.

V8 엔진 메모리 관리 및 GC 동작 원리

잼coding — Tue, 2 Jun 2026 16:24:31 +0900

1. V8 엔진 개요

V8은 Google이 개발한 오픈소스 JavaScript 런타임 엔진으로, Chrome 브라우저와 Node.js의 핵심 실행 환경이다. V8은 JavaScript 소스 코드를 기계어로 컴파일하고 실행하며, 메모리 할당과 회수(Garbage Collection)를 전담한다.

V8의 핵심 구성 요소는 다음과 같다.

V8 Engine
├── Parser         — JS 소스를 AST(추상 구문 트리)로 변환
├── Ignition       — AST를 바이트코드로 해석·실행 (인터프리터)
├── TurboFan       — 자주 실행되는 코드를 기계어로 최적화 (JIT 컴파일러)
└── Orinoco GC     — 메모리 할당 및 가비지 컬렉션 전담

JavaScript는 메모리를 개발자가 직접 해제하지 않는다. V8의 GC가 "더 이상 참조되지 않는 객체"를 자동으로 탐지하여 메모리를 회수한다.

2. V8 힙(Heap) 구조

V8은 객체를 저장하는 공간인 힙을 용도에 따라 여러 영역으로 분리하여 관리한다.

세대 가설 (Generational Hypothesis)

V8이 이러한 분리 구조를 채택한 이유는 세대 가설에 근거한다.

"대부분의 객체는 생성 직후 금방 죽는다. 오래 살아남은 객체는 더 오래 살아남을 가능성이 높다."

즉, 함수 안에서 생성되는 임시 배열, 루프 변수, VNode 등은 매우 짧게 살고,

전역 상태나 컴포넌트 인스턴스처럼 앱 구조에 필요한 객체는 오래 산다.

이 두 집단을 분리하면 짧게 사는 객체들만 빠르게 검사할 수 있어 GC 효율이 크게 높아진다.

3. Minor GC — Scavenger 알고리즘

3.1 개요

Minor GC는 Young Generation(Nursery + Intermediate) 영역만을 대상으로 실행된다.

사용하는 알고리즘은 Cheney's Copying Algorithm(스캐빈저) 이다.

실행 시간: ~1ms (체감 불가)
실행 빈도: Nursery가 꽉 찰 때마다 (수십 초 간격)
STW(Stop-The-World): 매우 짧아 UI 영향 없음

3.2 동작 과정

[단계 1] Nursery 영역이 꽉 참
─────────────────────────────────────────────
Nursery
┌─────────────────────────────────────────┐
│ obj_A (rAF 임시 결과)  — 참조 없음      │
│ obj_B (VNode 이전 버전) — 참조 없음     │
│ obj_C (ref 객체)        — 컴포넌트 참조 │
│ obj_D (BboxQueueEntry)  — watch 참조    │
│ obj_E (계산 중간 배열)  — 참조 없음     │
└─────────────────────────────────────────┘

[단계 2] 루트에서 참조 가능한 객체 탐색 (Mark)
─────────────────────────────────────────────
루트(Root): 현재 실행 중인 함수 스택, Vue 컴포넌트 트리, 전역 변수

obj_C → 컴포넌트가 참조 중 → 살아있음 ✓
obj_D → watch 핸들러가 참조 중 → 살아있음 ✓
obj_A, obj_B, obj_E → 아무도 참조 안 함 → 죽음 ✗

[단계 3] 살아있는 객체를 Intermediate 영역으로 복사 (Copy)
─────────────────────────────────────────────
Intermediate
┌──────────────────────┐
│ obj_C (복사됨)       │
│ obj_D (복사됨)       │
└──────────────────────┘

[단계 4] Nursery 전체 초기화 — 죽은 객체 일괄 소거
─────────────────────────────────────────────
Nursery: 완전히 빈 상태 (메모리 재사용 가능)

3.3 Intermediate → Old Generation 승격 조건

Intermediate에 있는 객체가 Minor GC에서 또 살아남으면 Old Generation으로 이동한다.

즉, GC를 2회 이상 통과한 객체가 Old Generation의 주민이 된다.

4. Major GC — Mark-Sweep-Compact 알고리즘

4.1 개요

Major GC는 Old Generation 전체를 대상으로 실행된다.

알고리즘은 Mark-Sweep-Compact 3단계로 구성된다.

실행 시간: ~10ms ~ 100ms (프레임 드롭 가능성 있음)
실행 조건: Old Generation이 임계치(힙 크기의 약 70%) 도달, 브라우저 idle 상태, 탭 백그라운드 전환
STW: 일부 단계에서 발생 (V8은 Incremental Marking으로 분산 처리)

4.2 동작 과정

5. 우리 프로젝트에서의 메모리 흐름

5.1 Vue 반응형 객체의 생애 주기

Vue의 ref, computed, watch는 모두 V8 힙의 객체다.

컴포넌트 마운트
      ↓
setup() 실행
  const cameraId = ref('cam_1')          → Nursery 할당
  const syncState = { bboxQueue: [] }    → Nursery 할당
  const inference = computed(() => ...)  → Nursery 할당
      ↓
Minor GC 1회: 컴포넌트가 참조 중 → Intermediate로 이동
Minor GC 2회: 여전히 살아있음   → Old Generation으로 이동
      ↓
컴포넌트가 살아있는 동안 Old Generation 거주
      ↓
컴포넌트 언마운트
  Vue: 반응형 그래프 링크 해제
  JS: 참조 없어짐
      ↓
다음 Major GC: 루트에서 도달 불가 → 수거

5.2 rAF 루프의 Minor GC 활용

useBoundingBoxOverlay의 rAF(requestAnimationFrame) 루프는

매 프레임마다 임시 객체를 생성한다.

function drawLoop() {
  const entry = dequeueBbox()           // 매 프레임 생성
  const ctx = canvas.getContext('2d')   // 매 프레임 참조
  const { videoW, videoH } = computeVideoRect(...)  // 매 프레임 생성
  // ...
}  // 함수 끝: entry, ctx, videoW, videoH 참조 소멸

이 객체들은 함수 종료 즉시 참조가 없어지므로 다음 Minor GC에서 Nursery째로 소거된다.

실측 성능 프로파일에서 Minor GC의 톱니 패턴이 규칙적으로 나타난 것이 이를 증명한다.

6. 결론

V8 GC 관점 요약

V8의 세대별 GC는 객체의 생존 기간에 따라 Minor GC(Nursery 빠른 정리)와

Major GC(Old Generation 전체 회수)로 역할을 분리한다.

이 설계 덕분에 rAF 루프처럼 매 프레임 생성·소멸하는 단명 객체는

Minor GC가 ~1ms 만에 처리하고, 컴포넌트·싱글턴 같은 장수 객체는

Old Generation에서 안정적으로 관리된다.

1. Vue란 무엇인가?

잼coding — Tue, 2 Jun 2026 09:27:47 +0900

Vue란 무엇인가? 자바스크립트 프레임워크 Vue 기초 정리

1. Vue란?

Vue(발음: /vjuː/, view와 유사)는 사용자 인터페이스(UI)를 구축하기 위한 자바스크립트 프레임워크이다. HTML, CSS, JavaScript를 기반으로 만들어졌으며, 선언적 렌더링과 컴포넌트 기반 구조를 통해 복잡한 웹 애플리케이션도 효율적으로 개발할 수 있도록 지원한다.

쉽게 말하면, 화면을 구성하는 요소들을 작은 단위의 컴포넌트로 나누고 상태 변화에 따라 화면을 자동으로 업데이트해주는 도구라고 볼 수 있다.

2. Vue의 핵심 특징

① 선언적 렌더링 (Declarative Rendering)

Vue는 데이터 상태와 화면을 연결하여 개발자가 화면 결과를 직접 조작하지 않아도 되도록 한다.

예를 들어 데이터 값이 변경되면 HTML을 직접 수정하지 않아도 자동으로 화면이 변경된다.

<button>
  Count is: {{ count }}
</button>

위 예시에서 count 값만 변경하면 화면도 함께 업데이트된다.

② 반응성 (Reactivity)

Vue의 가장 큰 특징 중 하나는 반응형 시스템이다.

JavaScript 변수의 변경을 자동으로 감지하여 필요한 부분의 DOM만 효율적으로 다시 렌더링한다.

예시:

const count = ref(0)

count.value++

별도로 화면 갱신 코드를 작성하지 않아도 UI가 즉시 변경된다.

3. Vue가 ‘점진적 프레임워크’인 이유

Vue는 다양한 규모와 목적의 프로젝트에 유연하게 적용할 수 있도록 설계되었다.

활용 방식은 다음과 같다.

기존 HTML 페이지 일부 기능 강화
웹 컴포넌트 형태로 삽입
SPA(Single Page Application) 개발
SSR(Server Side Rendering)
SSG(Static Site Generation)
모바일 및 데스크톱 애플리케이션 개발

즉, 작은 기능부터 대규모 서비스까지 단계적으로 확장할 수 있다는 특징이 있다.

4. 싱글 파일 컴포넌트(SFC)

Vue에서는 일반적으로 .vue 파일을 사용하여 컴포넌트를 구성한다.

이를 싱글 파일 컴포넌트(Single File Component, SFC)라고 한다.

하나의 파일 안에서 다음 요소를 함께 관리한다.

<template> → 화면 구조(HTML)
<script> → 로직(JavaScript)
<style> → 스타일(CSS)

예시:

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button>
    Count is: {{ count }}
  </button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

구조와 역할이 명확하여 유지보수가 용이하다.

5. Vue의 두 가지 개발 방식

Vue는 컴포넌트를 작성할 때 두 가지 스타일을 제공한다.

옵션 API (Options API)

객체 형태로 상태와 메서드를 구성하는 방식이다.

export default {
  data() {
    return {
      count: 0
    }
  }
}

특징

구조가 직관적이다
초보자가 접근하기 쉽다
this 기반으로 동작한다

컴포지션 API (Composition API)

함수 중심으로 상태를 조합하는 방식이다.

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

특징

재사용성과 확장성이 높다
대규모 프로젝트에 유리하다
로직 분리가 쉽다

현재 Vue 3에서는 Composition API + SFC 조합이 권장되는 방식이다.

6. 어떤 방식을 선택해야 할까?

학습 단계라면 이해하기 쉬운 방식부터 시작하면 된다.

실제 프로젝트 기준으로는 다음과 같이 추천한다.

간단한 프로젝트 → 옵션 API
중·대형 프로젝트 → 컴포지션 API + SFC

두 방식 모두 동일한 Vue의 핵심 개념을 기반으로 동작하기 때문에 하나를 익히면 다른 방식도 비교적 쉽게 이해할 수 있다.

마무리

Vue는 배우기 쉬운 문법과 강력한 반응형 시스템을 제공하는 프론트엔드 프레임워크이다.

특히 점진적 도입이 가능하고 컴포넌트 기반 개발을 지원하기 때문에 개인 프로젝트부터 대규모 서비스까지 폭넓게 활용된다.

프론트엔드 개발을 시작하려는 사람이라면 HTML, CSS, JavaScript 기본기를 학습한 뒤 Vue를 익혀보는 것을 추천한다.

PySide6란 무엇인가? — Python GUI 개발

잼coding — Wed, 29 Apr 2026 17:39:12 +0900

현재 회사에서 파이썬으로 GUI 프로그램을 만들기 위해 오픈소스를 찾던 도중, pyside라는 python GUI 툴이 있어서 그것에 대해

자세히 리뷰를 해볼려고 한다.

1. PySide6 소개

PySide6는 Qt Company가 공식 제공하는 Qt 6 프레임워크의 Python 바인딩이다. Qt는 C++로 작성된 크로스 플랫폼 GUI 툴킷으로, PySide6를 통해 Python에서 그 모든 기능을 사용할 수 있다.

- 개발사: The Qt Company (공식)
- 라이선스: LGPL v3 / 상업용 라이선스 (무료 사용 가능)
- 지원 플랫폼: Windows, macOS, Linux, Android, iOS, WebAssembly

설치 방법:

pip install PySide6

2. PySide6 vs PyQt6 — 무엇이 다른가?

가장 많이 받는 질문이다. 둘 다 Qt를 Python에서 쓰기 위한 바인딩인데, 왜 두 개가 존재할까?

항목 PySide6 PyQt6
개발사 Qt Company (공식) Riverbank Computing (서드파티)
라이선스 LGPL v3 GPL v3 / 상업용 유료
상업적 사용 무료 가능 유료 라이선스 필요
API 호환성 거의 동일 거의 동일
Signal 선언 Signal() pyqtSignal()
Slot 선언 Slot() pyqtSlot()
공식 지원 Qt 로드맵 직접 반영 Qt 릴리즈 이후 업데이트
핵심 차이: 라이선스. 상업 앱을 만들 계획이라면 PySide6가 훨씬 유리하다. API는 거의 동일하기 때문에 코드 마이그레이션도 어렵지 않다.

3. 기본 구조 이해하기

PySide6 앱은 크게 세 가지 레이어로 구성된다.

QApplication  →  최상위 앱 객체 (이벤트 루프 관리)
    └── QMainWindow / QWidget  →  윈도우
            └── Layout + Widget  →  실제 UI 구성요소

최소 동작 예제

import sys
from PySide6.QtWidgets import QApplication, QLabel, QMainWindow

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Hello PySide6")
        self.setFixedSize(400, 300)
        
        label = QLabel("안녕하세요!", self)
        label.move(150, 130)

app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec()

4. 주요 모듈 구성

PySide6는 목적별로 모듈이 분리되어 있다.

모듈 역할
- QtWidgets 전통적인 UI 위젯 (버튼, 레이블, 리스트 등)
- QtCore Signal/Slot, Timer, Thread, 파일시스템
- QtGui 폰트, 색상, 아이콘, 페인팅
- QtNetwork HTTP, TCP/UDP 네트워킹
- QtMultimedia 오디오, 비디오 재생
- QtOpenGL OpenGL 렌더링 통합
- QtWebEngineWidgets 내장 웹 브라우저 (Chromium 기반)
- QtQuick / QtQml QML 기반 모던 UI

5. Signal & Slot — Qt의 핵심 패턴

PySide6에서 가장 중요한 개념이다. 이벤트 기반 프로그래밍의 근간.

Signal: "이런 일이 일어났다"고 알리는 신호
Slot: 그 신호를 받아 처리하는 함수

from PySide6.QtCore import Signal, QObject

class Worker(QObject):
    finished = Signal(str)   # 커스텀 Signal 정의
    progress = Signal(int)

    def run(self):
        for i in range(100):
            self.progress.emit(i)   # Signal 발생
        self.finished.emit("완료!")
        # 연결
worker = Worker()
worker.finished.connect(lambda msg: print(msg))   # Slot 연결
worker.progress.connect(lambda v: print(f"{v}%"))

Signal은 타입을 명시할 수 있고, 여러 Slot에 동시에 연결할 수 있다. disconnect()로 해제도 가능하다.

6. 레이아웃 시스템

픽셀 단위로 위젯을 배치하는 것은 유지보수 악몽이다. Qt의 레이아웃 매니저를 사용하면 창 크기 변화에 자동으로 대응한다.

from PySide6.QtWidgets import QVBoxLayout, QHBoxLayout, QGridLayout
# 수직 배치
vbox = QVBoxLayout()
vbox.addWidget(button1)
vbox.addWidget(button2)

# 수평 배치
hbox = QHBoxLayout()
hbox.addWidget(label)
hbox.addStretch()   # 빈 공간으로 밀기
hbox.addWidget(button)

# 중첩
main_layout = QVBoxLayout()
main_layout.addLayout(hbox)
main_layout.addLayout(vbox)

QSplitter를 사용하면 사용자가 패널 크기를 드래그로 조절할 수 있다.

7. 스타일링 — Qt Style Sheets (QSS)

CSS와 매우 유사한 문법으로 위젯을 스타일링할 수 있다.

app.setStyleSheet("""
    QMainWindow {
        background-color: #1e1e1e;
    }
    QPushButton {
        background-color: #0078d4;
        color: white;
        border-radius: 6px;
        padding: 8px 16px;
        font-size: 14px;
    }
    QPushButton:hover {
        background-color: #1084d8;
    }
    QPushButton:pressed {
        background-color: #006cc1;
    }
""")

CSS와의 차이점:
선택자는 클래스명 기반 (QPushButton, QLabel) pseudo-state는 :hover, :pressed, :checked, :disabled 등
setObjectName()으로 ID 선택자처럼 특정 위젯만 지정 가능

8. 멀티스레딩 — QThread

GUI 앱에서 무거운 작업을 메인 스레드에서 실행하면 UI가 멈춘다. QThread와 Worker 패턴으로 해결한다.

from PySide6.QtCore import QThread, QObject, Signal

class Worker(QObject):
    result = Signal(object)
    
    def process(self):
        # 오래 걸리는 작업
        data = heavy_computation()
        self.result.emit(data)

class MainWindow(QMainWindow):
    def start_task(self):
        self.thread = QThread()
        self.worker = Worker()
        self.worker.moveToThread(self.thread)
        
        self.thread.started.connect(self.worker.process)
        self.worker.result.connect(self.on_result)
        self.worker.result.connect(self.thread.quit)
        
        self.thread.start()
    
    def on_result(self, data):
        # GUI 업데이트는 항상 메인 스레드에서
        self.label.setText(str(data))

중요: Qt에서 GUI 위젯은 반드시 메인 스레드에서만 건드려야 한다. Worker에서 직접 위젯을 수정하면 크래시가 발생한다. Signal을 통해 결과를 메인 스레드로 전달하는 패턴을 지켜야 한다.

9. 커스텀 위젯 — paintEvent 오버라이드

기본 위젯으로 부족할 때 QPainter로 직접 그릴 수 있다.

from PySide6.QtWidgets import QWidget
from PySide6.QtGui import QPainter, QColor, QPen
from PySide6.QtCore import Qt

class CircleWidget(QWidget):
    def paintEvent(self, event):
        painter = QPainter(self)
        painter.setRenderHint(QPainter.RenderHint.Antialiasing)
        
        pen = QPen(QColor("#0078d4"), 3)
        painter.setPen(pen)
        painter.setBrush(QColor("#e3f2fd"))
        
        rect = self.rect().adjusted(10, 10, -10, -10)
        painter.drawEllipse(rect)

paintEvent는 창이 다시 그려져야 할 때마다 자동 호출된다. update()를 호출하면 강제로 다시 그리기를 트리거할 수 있다.

10. 실용적인 팁

1. __init__ 에서 UI 메서드 분리하기

def __init__(self):
    super().__init__()
    self._init_ui()
    self._connect_signals()

2. 리소스 파일은 Qt Resource System 활용

pyside6-rcc resources.qrc -o resources_rc.py

3. UI 파일 (.ui) 로드

from PySide6.QtUiTools import QUiLoader
loader = QUiLoader()
ui = loader.load("main.ui")

4. 앱 종료 시 정리
app.aboutToQuit.connect(cleanup_function)

5. 고DPI 스케일링

# main 실행 전에 설정
os.environ["QT_AUTO_SCREEN_SCALE_FACTOR"] = "1"

마치며

PySide6는 Python GUI 프레임워크 중 가장 강력하고 성숙한 선택지 중 하나다. 초기 학습 곡선이 있지만, Signal/Slot 패턴과 레이아웃 시스템에 익숙해지고 나면 복잡한 데스크톱 앱도 체계적으로 구성할 수 있다. 라이선스 측면에서도 LGPL이라 상업적 프로젝트에 부담 없이 사용할 수 있다는 점이 큰 장점이다.