1. 변수 (Variable): 데이터를 담는 '그릇'
디자인할 때 레이어에 이름을 붙이거나, 컴포넌트를 만드는 것과 같다. 값을 재사용하기 위해 이름표를 붙여 저장하는 것이다.
const (상수)
개념: 한 번 선언하면 절대 바꿀 수 없는 값.
디자인 비유: 디자인 시스템의 Primary Color나 Logo. (Lock 걸린 레이어)
사용처: 브랜드명, 도메인 주소, 고유 ID 등.
let (변수)
개념: 상황에 따라 계속 바뀌는 값.
디자인 비유: Page Number나 Toggle State.
사용처: 스크롤 위치, 장바구니 수량, 현재 탭 번호 등.
JavaScript
// 쇼핑몰 'ARCHIVE' 예시
const brandName = "ARCHIVE"; // 절대 변하지 않음 (const)
let productCount = 50; // 재고는 변할 수 있음 (let)
productCount = 49; // 재고 변경 가능
// brandName = "Gagu"; // 에러! (const는 변경 불가)자료형 (Data Type): 그릇에 담긴 '내용물'
변수라는 그릇에 담기는 데이터의 형태다. 실무에서 가장 많이 쓰이는 3가지.
String (문자열): 따옴표("", '')로 감싼 글자.
Number (숫자): 연산이 가능한 숫자.
Boolean (논리형): true / false 딱 두 가지 상태. (스위치 ON/OFF)
const productName = "벨벳 라운지 체어"; // String
const price = 300000; // Number
let isSoldOut = false; // Boolean (품절 여부)2. 연산자 (Operator)
데이터를 가공하거나 비교할 때 사용한다.
비교 연산자 (===)
중요: 자바스크립트에서는 '같다'를 표현할 때 = 하나가 아니라 === (등호 3개)를 써야 정확하다.
(= 하나는 값을 '대입'할 때 쓴다.)
const myMoney = 200000;
const chairPrice = 300000;
console.log(myMoney > chairPrice); // false (살 수 없음)Intro: True/False가 아니다
자바스크립트의 논리 연산자는 단순히 참/거짓을 알려주는 게 아니라, "선택된 값(Value)"을 반환한다. 이 원리를 모르면 화면에 의도치 않은 0이 출력되거나, 기본값 설정이 꼬이는 버그를 만나게 된다. 실무 필수 문법인 단축 평가, Truth/Falsy, 그리고 Null 병합 연산자를 정리한다.
1) Truthy vs Falsy (참과 거짓의 기준)
자바스크립트는 모든 값을 참 아니면 거짓으로 분류한다. 아래 5가지(Falsy)만 외우면, 나머지는 다 참(Truthy)이다.
false
0 (숫자 0) 🚨 주의!
"" (빈 문자열)
null
undefined
Tip: "0"(문자열 0), "false", " " (공백)은 안에 내용물이 있으므로 참(Truthy)이다.
2) AND 연산자 (&&) : 깐깐한 문지기 (Guard)
원리: 앞에서부터 보다가 하나라도 거짓(Falsy)이면 그 값을 반환하고 끝낸다. (끝까지 다 참이어야 마지막 값을 줌)
용도: "조건부 실행". A가 있을 때만 B를 보여줘라.
const isLoggedIn = true;
const welcomeMsg = isLoggedIn && "환영합니다!";
console.log(welcomeMsg); // "환영합니다!"3) OR 연산자 (||) : 낙천가 (Default Value)
원리: 앞에서부터 보다가 하나라도 참(Truthy)이면 그 값을 반환하고 끝낸다.
용도: "빈칸 채우기(기본값)". 입력이 없으면 기본값을 써라.
const userName = ""; // 입력 안 함 (Falsy)
const displayName = userName || "익명";
console.log(displayName); // "익명"
// 설명: 앞이 거짓이니, 뒤에 있는 "익명"을 선택함.4) 실무 버그 1순위: 숫자 '0'의 함정
&& 연산자를 쓸 때 0은 거짓(Falsy)이므로, 0이라는 값 자체가 반환되어 화면에 출력되는 문제가 발생한다.
const count = 0; // 0개
// 의도: 0개니까 아무것도 출력 안 하겠지?
// 현실: 0은 Falsy니까, 0이라는 '값' 자체가 반환되어 화면에 찍힘.
const result = count && "결과 있음";
console.log(result); // 0 (숫자가 뚱하니 출력됨)0을 거르고 싶을 땐, 확실한 조건식(부등호)을 써서 false를 만들어야 한다.
// 0 > 0 은 false(찐 boolean)이므로 안전함.
const safeResult = (count > 0) && "결과 있음";5) 구원 투수: ?? (Null 병합 연산자)
|| 연산자는 0이나 ""도 거짓 취급해서 무시해버린다. (할인율 0%인데 할인 없음 처리 등) 이때 null과 undefined만 콕 집어서 거르는 ??를 사용한다.
const price = 0; // 무료 (유효한 데이터)
// ❌ || 사용 시: 0을 무시하고 3000원 결제됨
console.log(price || 3000); // 3000
// ✅ ?? 사용 시: 0을 인정해줌
console.log(price ?? 3000); // 0요약 가이드
입력창 빈칸("") 처리할 때: 👉 || 사용
숫자 0도 데이터로 인정해야 할 때: 👉 ?? 사용
3. 조건문 (If-Else)
특정 조건에 따라 다른 코드를 실행하는 로직. 엑셀의 IF 함수나, 디자인의 Responsive(반응형) 분기점과 비슷하다.
실습: 회원 등급별 할인 로직
"VIP 회원이면 10% 할인, 아니면 5% 할인"을 코드로 구현해 보았다.
const VIP_LEVEL = "VIP"; // 기준값 (상수)
let myLevel = "NORMAL"; // 나의 현재 등급 (변수)
if (myLevel === VIP_LEVEL) {
console.log("10% 할인 쿠폰 발급");
} else {
// 굳이 'myLevel !== VIP_LEVEL' 조건을 다시 쓸 필요 없다.
console.log("신규/일반 5% 할인 쿠폰 발급");
}_💡 Insight: 전역 변수(Global Variable) 위 코드에서 VIP_LEVEL과 myLevel은 코드 최상단(대지 바깥)에 선언되었기 때문에 전역 변수다. 어디서든 가져다 쓸 수 있지만, 너무 남발하면 꼬일 수 있으니 주의하자. (마치 모든 레이어를 그룹 없이 최상위에 풀어놓
는 것과 같다!)
