타입 | 예시 |
---|---|
상수(Constant) | SCREAMING_SNAKE_CASE (MAX_VALUE, API_URL) |
Boolean 변수 | is접두사 (isActive) |
일반 변수 | camelCase 사용 (userName, itemList) |
배열 | 복수형 사용 (users, items) |
객체 | 단수형 사용 (user, item) |
이벤트 핸들러 | handle 접두사 (handleSubmit) |
비동기 함수 | fetch 접두사 (fetchData) |
타입스크립트 | type |
props | on (onClick) |
작게 만들 것. (최대 20줄 이내)
하나의 함수는 한 가지 작업만 해야 한다.
인수의 개수는 적을수록 이상적이다.
부수 효과를 일으키지 말 것.
외부 데이터를 직접 사용하지 않고 파라미터로 받아서 사용한다.
참조형 데이터를 직접적으로 바꾸는 함수를 만들지 말 것 (예. 배열을 인수로 받아서 원본배열을 바꾸는 함수)
// Bad
function addItem(arr: number[], item: number): number[] {
arr.push(item)
return arr
}
// Good
function addItem(arr: number[], item: number): number[] {
return [...arr, item]
}
try/catch 블록은 별도 함수로 뽑아내는 것이 좋다.
함수 표현식을 사용하며, 화살표 함수를 사용한다.
// Bad
function fnName() {};
[1,2,3].map(function(x){
retrun {};
})
// Good
const fnName = () => {};
[1,2,3].map(x => x);
바로 return 하는 경우
// bad
const foo = () => { return "bar"; }
// good
const foo = () => "bar";