📌 truthy & falsy
자바스크립트에서 Truthy와 Falsy는 Boolean 문맥(조건문 등)에서 참(true) 또는 거짓(false)처럼 평가되는 값을 의미합니다.
1. Falsy 값
불리언 자료형의 거짓(false)은 아니지만 거짓과 같은 의미로 쓰이며, 조건식에서 거짓(false)으로 평가합니다. undefined, null, 0n, 0, -0, NaN, ""(빈 문자열)은 모두 조건식에서 거짓(false)으로 평가되는 falsy한 값입니다. 따라서 이 값 앞에 ! 연산자를 붙이면 참이 되어 if문을 실행하게 됩니다.
let f1 = undefined;
let f2 = null;
let f3 = 0;
let f4 = -0;
let f5 = NaN;
let f6 = "";
let f7 = 0n;
if (!0) {
console.log("0은 falsy"); // 출력
}
if (!"") {
console.log("빈 문자열은 falsy"); // 출력
}
2. Truthy 값
7가지의 Falsy한 값을 제외한 나머지 모든 값을 의미합니다.
let t1 = "hello"; //문자열
let t2 = 123; //0이 아닌 모든 숫자
let t3 = []; //빈 배열
let t4 = {}; //빈 객체
let t5 = () => {}; //함수
let t6 = true; //true값
if ("Hello") {
console.log("문자열은 truthy"); // 출력
}
if ([]) {
console.log("빈 배열도 truthy"); // 출력
}
3. Truthy와 falsy의 활용 사례
⓵ 조건문에서의 활용
if ("Hello") {
console.log("문자열은 truthy"); // 출력
}
if ([]) {
console.log("빈 배열도 truthy"); // 출력
}
⓶ 기본값 설정
const name = ""; // Falsy
const displayName = name || "기본값";
console.log(displayName); // "기본값"
⓷ 존재 확인
const obj = { key: "value" };
if (obj.key) {
console.log("키가 존재합니다."); // 출력
}
📌 단락 평가
논리 연산자(&& 또는 ||)를 사용할 떄, 첫번째 피연산자의 값만으로도 이 연산의 결과를 확정할 수 있다면 두번째 피연산자에는 접근하지 않는 방식을 의미합니다.
1. AND 단락평가 (&&)
&& 연산자는 피연산자의 값이 하나라도 거짓이면 거짓을 반환합니다.
• 왼쪽 값이 Falsy이면 오른쪽을 평가하지 않고 왼쪽 값을 반환합니다.
• 왼쪽 값이 Truthy이면 오른쪽 값을 평가하여 반환합니다.
console.log(false && "right"); // false
console.log(true && "right"); // "right"
const isLoggedIn = true;
const user = isLoggedIn && "User Info";
console.log(user); // "User Info"
2. OR 단락 평가
| | 연산자는 피연산자의 값이 하나라도 참이면 참을 반환합니다.
• 왼쪽 값이 Truthy이면 오른쪽을 평가하지 않고 왼쪽 값을 반환합니다.
• 왼쪽 값이 Falsy이면 오른쪽 값을 평가하여 반환합니다.
console.log(true || "right"); // true
console.log(false || "right"); // "right"
const name = ""; // Falsy
const displayName = name || "Default Name";
console.log(displayName); // "Default Name"
📌 구조 분해 할당
구조 분해 할당(Destructuring Assignment)은 자바스크립트에서 배열이나 객체의 속성을 간단하게 추출하여 변수에 할당할 수 있는 문법입니다.
1. 배열 구조 분해 할당
/* 기본 사용법 */
const numbers = [1, 2, 3];
const [first, second, third] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(third); // 3/* 기본값 설정하기 */
let arr = [1, 2, 3];
//four에 4라는 값을 지정하여 설정할 수 있습니다.
let [one, two, three, four = 4] = arr;
console.log(one, two, three, four); // 1,2,3,4/* 일부 요소만 추출하기 */
const numbers = [10, 20, 30, 40];
const [first, , third] = numbers;
console.log(first); // 10
console.log(third); // 30/* 나머지 요소 추출하기 */
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]
2. 객체 구조 분해 할당
/* 기본 사용법 */
const user = { name: "shyunu", age: 27 };
const { name, age } = user;
console.log(name); // shyunu
console.log(age); // 27/* 변수이름 변경하기 */
const user = { name: "shyunu", age: 27 };
const { name: userName, age: userAge } = user;
console.log(userName); // shyunu
console.log(userAge); // 27/* 기본값 설정하기 */
const user = { name: "shyunu" };
const { name, age = 27 } = user;
console.log(name); // shyunu
console.log(age); // 27/* 나머지 속성 추출하기 */
const user = { name: "shyunu", age: 27, city: "Seoul" };
const { name, ...rest } = user;
console.log(name); // shyunu
console.log(rest); // { age: 27, city: "Seoul" }
3. 함수 매개변수에서의 구조분해 할당
function printUser({ name, age }) {
console.log(`Name: ${name}, Age: ${age}`);
}
const user = { name: "shyunu", age: 27 };
printUser(user); // "Name: shyunu, Age: 27"
📌 Spread 연산자와 Rest 매개변수
1. Spread 연산자 ( ... )
스프레드 연산자는 ... 기호로 표기하는데, 전개 연산자라고도 부릅니다. 스프레드 연산자를 이용하면 배열, 문자열, 객체 등과 같이 반복이 가능한 객체의 값을 개별 요소로 분리할 수 있습니다.
⓵ 배열 병합
/* 방법1 */
let arr1 = [1, 2, 3];
let arr2 = [4, ...arr1, 5, 6];
function funcA(p1, p2, p3) {
console.log(p1, p2, p3);
}
funcA(...arr1); // 1, 2, 3
/* 방법2 */
let obj1 = {
a: 1,
b: 2,
};
let obj2 = {
...obj1,
c: 3,
d: 4,
};
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }
⓶ 배열 복사
const numbers = [1, 2, 3];
const newNumbers = [...numbers];
console.log(newNumbers); // [1, 2, 3]
console.log(numbers === newNumbers); // false (두 배열은 복사되었다고 해서 같지 않습니다.)
⓷ 객체 속성 덮어쓰기
const user = { name: "shyunu", age: 27 };
const updatedUser = { ...user, age: 30 }; // 기존 age 덮어씀
console.log(updatedUser); // { name: "shyunu", age: 30 }
2. Rest 매개변수 ( ... )
Rest 매개변수는 나머지 매개변수라고 하며, 스프레드 연산자처럼 기호 ... 으로 표기합니다. 스프레드 연산자는 배열이나 객체처럼 반복 가능한 값을 개별 요소로 분리하지만, Rest 매개변수는 반대로 개별 요소를 배열로 묶습니다.
// one, ...rest : 첫번째로 전달된 인수는 one에 저장되고, 그 이후에 전달되는 인수는 rest배열에 전달된다.
// 📍주의) Rest 매개변수 뒤에는 추가적으로 매개변수를 선언할 수 없다.
let arr1 = [1, 2, 3];
function funcB(one, ...rest) {
console.log(one); // 1
console.log(rest); // [2, 3]
}
funcB(...arr1);