자바스크립트 | 깔끔한 코드를 위해서

Duboo·2021년 12월 8일
0

자바스크립트

목록 보기
2/7
post-thumbnail
post-custom-banner

흠..☹️

사람들은 뻔한 결과를 좋아하지 않는다.

하지만 코드는 다르다.

누가 봐도 읽기 편하고 목적이 뚜렷하며 뻔한 결과를 만들어내는 코드가 좋은 코드다.


들여 쓰기하자 꼭! 🙏

Indentation
논리적으로 종속되어 있는 코드를 작성할 때, 종속된 code block은 주인의 code block보다 두 칸 들여 쓰기를 하자

Example ⭕

const getSum = (num1, num2) => {
  return num1 + num2;
}

Example ❌

const getSum = (num1, num2) => {
return num1 + num2;
}

const getSum = (num1, num2) => {
  return num1 + num2;
  }

이름은 중요하다! 😤

Naming
변수 혹은 함수등.. 어떤것이든 네이밍을 잘하게 된다면 해당 변수, 함수 등이 무엇을 의미하지는 명확하게 알 수 있다.
물론 쉽지 않다. 제일 어렵다.

변수 이름

Variable names

  • 변수는 한 단어로 표현하는 것이 좋다. Descriptive word
  • 현재 다루고 있는 문제의 핵심을 묘사해주는 단어가 좋다.
  • 구조적인 부분보다 변수가 존재하는 목적을 고려해야 가독성 면에서 유리하다.
  • 자바스크립트 사용하세요? 그럼 카멜 케이스를 사용하세요. camelCase

Example ⭕

const animals = ['dog', 'cat'....];

Example ❌

const arr = ['dog', 'cat'...];

참 혹은 거짓

Boolean names

  • 불리언의 값은 참 혹은 거짓이다.
    • 관련 변수의 이름 앞에 is or are, has, can을 붙이자.

Example ⭕

let isPerson = true;
let hasAge = true;
let canDance = true;

Example ❌

let person = true;
let age = true;
let dance = true;

추가로 불리언 값의 결과는 되도록 바로 리턴하는게 효율적이다.

Example ⭕

return num1 > num2;

Example ❌

if(num1 < num2) {
  return false;
}
return true;

함수 이름

Function names

  • 함수는 무엇인가를 얻어내기 위해 사용한다.
  • 그러니 함수의 이름만 봐도 무엇을 알아내고자 하는지 알 수 있도록 동사로 시작하는 이름을 지어주자.

Example ⭕

const getSum = (num1, num2) => {
  ....
}

Example ❌

const sum = (num1, num2) => {
  ....
}

중괄호는 생략하지 말자 😫

  • 간혹 문법적으로 중괄호가 없어도 문제 없이 동작하는 코드를 작성할 수 있다.
  • 그래도 생략하지말자 중괄호는 코드의 시작과 끝을 알려주는 역할도 한다.

Example ⭕

for(let i=0; i<5; i++) {
  console.log(i);
}

Example ❌

for(let i=0; i<5; i++)
  console.log(i);

세미콜론은 옵션이지만 넣어주라; 😅

Semicolons

  • 코드 문장의 마지막에는 세미콜론을 넣어주자
    • 해당 내용은 필수는 아닙니다. 하지만 코드 문장의 끝에 세미콜론을 적는 것을 습관화하면 좋습니다.

띄어쓰기도 옵션이지만 해주라! 😠

코드를 작성하면서 띄어쓰기를 같이 섞어주면 눈이 편해집니다.

  • 물론 필수는 아닙니다.

Example ⭕

const example = (num1, num2, num3) => {
  console.log(num1, num2, num3);
  
  const exampleVal = 0;
  
  if(exampleVal + num > 0) {
    console.log('띄어쓰기 해주라!')
  }
}

Example ❌

const example = (num1,num2,num3) => {
  console.log(num1,num2,num3);
  
  const exampleVal=0;
  
  if(exampleVal+num>0) {
    console.log('띄어쓰기 해주라!')
  }
}
profile
둡둡
post-custom-banner

0개의 댓글