자바스크립트 공부6 - JS 모듈 시스템, 조건문과 삼항 연산자

모듈화 시스템이란?

코드를 기능별로 분리하여 재사용 가능하고 유지보수하기 쉬운 단위로 만드는 시스템입니다.

모듈화의 장점

✅ 코드 재사용성 - 한 번 작성한 모듈을 여러 곳에서 사용
✅ 유지보수성 - 기능별로 분리되어 수정이 용이
✅ 네임스페이스 관리 - 전역 변수 충돌 방지
✅ 의존성 관리 - 모듈 간의 의존 관계를 명확히 표현

 

import, export 문법

export(내보내기)

여러 개 내보내기

// calculator.js 파일
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export const PI = 3.14;

메인 하나만 내보내기

// greeting.js 파일
function greet(name) {
  return `안녕하세요, ${name}님!`;
}

export default greet;

import(가져오기)

이름 지정해서 가져오기

// main.js 파일
import { add, subtract } from './calculator.js';

console.log(add(5, 3));      // 8
console.log(subtract(5, 3)); // 2

전부 가져오기

import * as calculator from './calculator.js';

console.log(calculator.add(5, 3));  // 8
console.log(calculator.PI);         // 3.14

메인 가져오기

import greeting from './greeting.js';  // 이름은 자유롭게!

console.log(greeting('철수')); // "안녕하세요, 철수님!"

별칭 사용하기

// 이름이 길거나 겹칠 때
import { validateEmail as checkEmail } from './utils.js';
import { validateEmail as verifyEmail } from './validation.js';

checkEmail('test@email.com');
verifyEmail('test@email.com');

섞어서 사용하기

// math.js
export const PI = 3.14;
export function add(a, b) { return a + b; }
export default function multiply(a, b) { return a * b; }

// main.js
import multiply, { PI, add } from './math.js';

console.log(multiply(2, 3)); // 6
console.log(add(2, 3));      // 5
console.log(PI);             // 3.14

---

조건문과 삼항 연산자

조건문이란?

"만약에 ~라면 이걸 해, 아니면 저걸 해" 하는 것입니다.

 

1. if문 - 기본 조건문

기본 형태

let age = 20;

if (age >= 18) {
  console.log("성인입니다!");
}

if-else문

let weather = "비";

if (weather === "맑음") {
  console.log("산책하러 가요!");
} else {
  console.log("집에 있어요!");
}

if-else if-else문

let score = 85;

if (score >= 90) {
  console.log("A학점");
} else if (score >= 80) {
  console.log("B학점");
} else if (score >= 70) {
  console.log("C학점");
} else {
  console.log("F학점");
}

2. switch문 - 여러 경우의 수

let day = "월요일";

switch (day) {
  case "월요일":
    console.log("새로운 한 주의 시작!");
    break;
  case "금요일":
    console.log("불금이다!");
    break;
  case "토요일":
  case "일요일":
    console.log("주말이에요!");
    break;
  default:
    console.log("평범한 하루");
}

삼항연산자

조건 ? 참일 때 값 : 거짓일 때 값

let age = 20;

// if문으로 쓰면
if (age >= 18) {
  console.log("성인");
} else {
  console.log("미성년자");
}

// 삼항연산자로 쓰면
console.log(age >= 18 ? "성인" : "미성년자");

실무에서 많이 쓰는 패턴들

1. 변수 할당

let temperature = 25;
let clothing = temperature > 20 ? "반팔" : "긴팔";

console.log(clothing); // "반팔"

 

2. 함수 리턴

function getStatus(isOnline) {
  return isOnline ? "온라인" : "오프라인";
}

console.log(getStatus(true));  // "온라인"
console.log(getStatus(false)); // "오프라인"

 

3. 객체/배열에서 활용

let user = {
  name: "김철수",
  age: 17
};

let permissions = user.age >= 18 ? ["읽기", "쓰기"] : ["읽기만"];
console.log(permissions); // ["읽기만"]

 

vue2에서 class를 분기할 때 자주 사용합니다.

    <!-- 삼항연산자로 클래스 제어 -->
    <button 
      :class="isActive ? 'btn-active' : 'btn-inactive'"
      @click="toggleActive"
    >
      {{ isActive ? '활성화됨' : '비활성화됨' }}
    </button>
    
    <!-- 여러 클래스 조합 -->
    <div 
      :class="`card ${isActive ? 'card-highlight' : 'card-normal'}`"
      class="base-style"
    >
      <p>카드 내용입니다</p>
    </div>

    <!-- 배열 형태로도 가능 -->
    <div :class="['card', isActive ? 'active' : 'inactive']">
      배열 형태 예시
    </div>