JavaScript 단축키, 팁 & 트릭 — 간단하고 재미있는 예제

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• JavaScript 초보자 및 중급 개발자
• 난이도: 기초 문법 활용에 초점을 맞춘 실용적인 팁 제공

핵심 요약

• 단축 연산자 ? 사용: if-else 대신 간결한 조건 표현 가능
• 디스트럭처링({ firstName, age } = person): 객체 속성 직접 추출 가능
• 템플릿 리터럴(${}): 문자열 내 변수 직접 삽입 가능
• 스프레드 연산자 ...: 배열 복사 및 확장 가능

섹션별 세부 요약

1. 조건 표현식 단축

• const food = hungry ? 'Order pizza!' : 'Keep coding!';
• if-else 대신 단일 라인으로 조건 처리 가능
• ?: 연산자는 간결한 결정 로직 제공

2. 기본 매개변수 설정

• function gift(name = 'Friend') { ... }
• 호출 시 매개변수 누락 시 기본값 자동 적용
• gift() → 'Friend'로 자동 대체

3. 객체 디스트럭처링

• const { firstName, age } = person;
• person.firstName 대신 직접 추출 가능
• 반복적인 속성 참조 최소화

4. 템플릿 리터럴 활용

• const sentence = My ${pet} is called ${petName}...;
• + 연산자 대신 간결한 문자열 생성
• 변수 내삽으로 가독성 향상

5. 화살표 함수 사용

• const multiply = (x, y) => x * y;
• 함수 정의 간소화 및 this 바인딩 단순화
• 간단한 연산 시 빠른 구현 가능

6. 논리 OR 기본값 설정

• const defaultText = userInput || 'Please type something!';
• userInput이 falsey일 때 기본값 자동 적용
• 사용자 입력 누락 시 친절한 메시지 출력

7. 스프레드 연산자 활용

• const moreVeggies = [...veggies, 'spinach'];
• 배열 복사 후 요소 추가 가능
• 원본 배열 변조 없이 새로운 배열 생성

8. `.map()` 활용

• const funScores = scores.map(score => You scored ${score}...);
• 배열 요소 변환 시 명확한 명령어 사용
• 데이터 변형을 한 줄로 처리

9. 옵셔널 체이닝

• car.owner?.name || 'Owner unknown'
• 객체 속성 누락 시 예외 처리 없이 안전하게 접근
• ?. 연산자로 깊은 속성 접근 시 안정성 확보

10. `for...of` 반복

• for (const snack of snacks) { console.log(I love ${snack}!); }
• 배열 순회 시 for 대신 간결한 구문 사용
• 요소별 처리 시 가독성 향상

결론

• 실무 팁: 단축 문법과 ES6+ 기능을 활용해 코드 간결성과 가독성을 동시에 향상
• 예제 적용: map, spread, optional chaining 등은 복잡한 로직을 단순화하는 데 유용
• 추천: 이러한 팁을 연습해 보고, 실제 프로젝트에 적용해 보세요!