코딩 스타일

Rock Kyun·2023년 10월 19일

협업

오늘 한 것

어제 나온 개인 과제에 검색기록 기능 추가
다가올 다음 주 협업을 위해 코딩 스타일 공부

오늘 배운 것

무조건 따라야 하는 것은 아니지만
코딩 스타일에는 읽는 사람에 대한 배려가 담긴(?)
추천하는 코딩 스타일이 있다.

배운 것 요약

1. 함수, if문, for문 등에서

여는 중괄호는 다음 줄에 쓰지 않는 이집션 스타일을 추천.

function cup() { // 여는 중괄호는 선언부와 같은 줄에 쓰고 왼쪽 공백을 한 칸!
  '코드 코드'
}

1-1. 중괄호 안의 코드가 한 줄일 경우

return 과 { } 중괄호를 모두 생략 가능한
한 줄짜리 구문은 어떻게 처리해야 보기 좋을까?

예). if (조건) console.log('조호아요!')

1. 코린이 스타일

중괄호가 필요 없기 때문에 권장하지 않음

if (조건) {console.log('조호아요!');}

2. 막 나가는 코린이

중괄호 생략하고 다음 줄에 쓸 수는 있지만, 다음 코드 라인을 추가할 때 에러 발생
절대 사용 X

if (조건) 
  console.log('조호아요!');

3. 괜찮은 코린이

코드가 짧다면 한 줄에 쓰는 것이 괜찮다.

if (조건) console.log('조호아요!');

4. 초심을 지키는 코린이

코드가 길던 짧든 스타일을 유지한다.

if (조건) {
  console.log('조호아요!');
}

2. 가로 길이

가로로 길게 늘여 쓴 코드는 읽는이의 눈을 피곤하게 만든다
만약 긴 문자열이 있다면 백틱( ` ) 을 사용하여 여러 줄로 표현하자.
보통 가로길이는 팀원들과 협의해서 정하는 게 좋고,
대부분은 80-120자로 제한한다고 한다.

function insertHtml(){
  let tempHTML = `ECMA International's TC39 is a
group of JavaScript developers, implementers, 
academics, and more, collaborating with the community 
to maintain and evolve the definition of JavaScript.`

< if문의 길어진 조건을 표현할 때 >
if (
  id === 123 &&
  moonPhase === 'Waning Gibbous' &&
  zodiacSign === 'Libra'
) {
  '코드코드'
}

3. 함수의 위치

어떤 코드에서 함수를 여러 개 호출 중이라면
함수를 호출하는 코드 위에서 함수를 모아서 선언하기

// 호출하는 곳 바로 위에 선언 된 함수들
function 함수1 () {
   ...
}
function 함수2 (인자) {
   ...
}
function 함수3 () {
   ...
}

// 함수를 호출하는 코드
let elem = 함수1();
함수2(elem);
함수3();

반대로. 사용하는 부분의 코드를 먼저 작성 후
함수를 선언하는 방법도 있다.

// 함수를 호출하는 코드
let elem = 함수1();
함수2(elem);
함수3();

// 호출하는 곳 바로 아래에 선언 된 함수들
function 함수1 () {
   ...
}
function 함수2 (인자) {
   ...
}
function 함수3 () {
   ...
}