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

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

배열에 해당 값이 존재하지 않을 경우 기본값인 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);

결과

27

이 경우 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에는

1

이 들어가고

two에는

2

가 들어간다.

나머지 값은 모두 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;
};

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

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

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