자바스크립트 Short Code 예제

1. 단축 조건문 (삼항 연산자) 활용

// 기존 코드
let message;
if (isMember) {
  message = "Welcome back!";
} else {
  message = "Sign up now!";
}

// 단축 코드
let message = isMember ? "Welcome back!" : "Sign up now!";

2. 단축 논리 연산자 활용 (||, &&, ??)

// 기존 코드
let name = userName ? userName : "Guest";

// 단축 코드 (기본값 설정)
let name = userName || "Guest";

// 기존 코드 (값이 존재할 때 실행)
if (isLoggedIn) {
  showDashboard();
}

// 단축 코드
isLoggedIn && showDashboard();

3. 객체 속성 축약 (ES6)

// 기존 코드
let name = "Alice";
let age = 25;
let user = { name: name, age: age };

// 단축 코드
let user = { name, age };

4. 화살표 함수 활용

// 기존 코드
function add(a, b) {
  return a + b;
}

// 단축 코드
const add = (a, b) => a + b;

5. 배열 메서드 활용 (map, filter, reduce)

// 기존 코드 (배열의 제곱 계산)
let numbers = [1, 2, 3, 4];
let squared = [];
for (let i = 0; i < numbers.length; i++) {
  squared.push(numbers[i] ** 2);
}

// 단축 코드 (map 사용)
let squared = numbers.map(n => n ** 2);

6. 템플릿 리터럴 활용

// 기존 코드
let greeting = "Hello, " + name + "! Welcome to " + city + ".";

// 단축 코드
let greeting = `Hello, ${name}! Welcome to ${city}.`;

7. 즉시 실행 함수 (IIFE) 활용

// 기존 코드
function init() {
  console.log("Initialized");
}
init();

// 단축 코드
(() => console.log("Initialized"))();

8. 구조 분해 할당(Destructuring) 활용

// 기존 코드
const text = "hello, world";
const parts = text.split(", ");
const first = parts[0];
const second = parts[1];

console.log(first);  // "hello"
console.log(second); // "world"


// 단축 코드
const [first, second] = "hello, world".split(", ");

console.log(first);  // "hello"
console.log(second); // "world"

9. REST 연산자(...) 활용

// 기존 코드
const numbers = [1, 2, 3, 4, 5];

const first = numbers[0];
const rest = numbers.slice(1);

console.log(first); // 1
console.log(rest);  // [2, 3, 4, 5]


// 단축 코드
const [first, ...rest] = [1, 2, 3, 4, 5];

console.log(first); // 1
console.log(rest);  // [2, 3, 4, 5]

10. 스프레드 연산자(...) 활용

// 기존 코드
const user = { name: "Alice", age: 25 };
const address = { city: "Seoul", country: "Korea" };

const userInfo = Object.assign({}, user, address);

console.log(userInfo);
// { name: "Alice", age: 25, city: "Seoul", country: "Korea" }


// 단축 코드
const user = { name: "Alice", age: 25 };
const address = { city: "Seoul", country: "Korea" };

const userInfo = { ...user, ...address };

console.log(userInfo);
// { name: "Alice", age: 25, city: "Seoul", country: "Korea" }

11. 널 병합 연산자(??) 활용

// 단축 코드
const userName = null;
const defaultName = "Guest";

const name = userName ?? defaultName;

console.log(name); // "Guest"


// ??와 || 비교
const value = null;
const defaultValue = "Default";

console.log(value ?? defaultValue); // "Default" (null이라서 대체값 반환)
console.log(value || defaultValue); // "Default" (falsy값이라서 대체값 반환)

참고자료

• https://codegolf.stackexchange.com/