JS 클린코드 <변수편>

🤔 이번 시간에는 자바스크립트 클린코드를 공부해보았다!

1. 변수

-무의미한 변수명은 지양하자
-상수를 그대로 쓰지 말고 변수에 할당하자
- 변수의 의도를 나타내자
- 문맥상 중복되는 말은 제외하자
- 매개변수에 기본값을 지정하자

(1) 무의미한 변수명은 지양하자

• 변수명을 지을 때, 해당 변수가 어떤 데이터를 담고 있는지 명시적으로 적어야 한다.
• 아래 예시는 음식리스트를 담고 있는 배열이다.
• 예시1처럼 변수를 선언했을 때, 다른 개발자는 이 변수가 어떤 데이터를 담고 있는지 쉽사리 알기 어렵다.

// 예시1
const aa = ['apple', 'orange', 'lemon']

예시2와 같이 해당 데이터를 표현할 수 있는 명시적인 이름으로 지정하자.

// 예시2
const foods = ['apple', 'orange', 'lemon']

(2) 상수를 그대로 쓰지 말고 변수에 할당하자

• window의 너비에서 사이드바의 너비인 255을 빼는 코드를 작성해보았다.

// 예시1
const width = window.innerWidth - 255;

• 코드를 작성한 사람은 255가 사이드바 너비라는 걸 알지만, 다른 개발자는 이게 사이드바 너비인지 알 수 없다.
• 그렇기 때문에 이와 같은 상수는 별도의 변수로 선언해주는 게 좋다.

// 예시2
const SIDEBAR_WIDTH = 255;
const width = window.innerWidth - SIDEBAR_WIDTH;

(3) 변수의 의도를 나타내자

• personInfo는 홍길동이라는 사람의 이름, 나이, 거주지 데이터를 담고 있는 배열이다.

const personInfo = ['홍길동', 32, '서울'];

• 만약 우리가 홍길동의 정보 중 이름, 나이만 출력하고 싶다면 어떻게 작성할 수 있을까?
• 예시1처럼 배열의 인덱스를 바로 사용할 수도 있다.

// 예시1
console.log(personInfo[0], personInfo[1]);

• 하지만 예시1처럼 작성하면 코드만 보고 출력하는 데이터를 유추하기는 어렵다.
• 이 경우, 각각 변수를 선언하여 변수의 의도를 나타낼 수 있다.

const [name, age] = personInfo;
console.log(name, age);

(4) 문맥상 중복되는 말은 제외하자

• catInfo변수에 고양이의 나이, 이름, 색상값을 담고자 한다.
• 예시1은 나이, 이름, 색상을 각각 catAge, catName, catColor로 지정했다.

// 예시1
const catInfo = {
  catAge: 5,
  catName: 'Lila',
  catColor: 'black'
}

• 하지만 우리는 catInfo라는 변수명을 통해 해당 객체가 고양이에 대한 정보를 가진다는 걸 알 수 있다.
• 그렇기에 키값에 cat을 붙이지 않고, 아래와 같이 선언할 수 있다.

// 예시2
const catInfo = {
  age: 5,
  name: 'Lila',
  color: 'black'
}

(5) 매개변수에 기본값을 지정하자

• printName함수는 name를 인자로 받아, 이름을 출력해주는 역할을 한다.
• 이때 인자가 넘어오지 않는다면 None을 출력하도록 했다.

function printName(name) {
  console.log(name || 'None') 
}

• JS에서는 기본 매개변수를 정의할 수 있기에 해당 방법을 사용해 기본값을 정의하는 게 좋다.

function printName(name = 'None') {
  console.log(name) 
}

해당 링크로 이동하면 더 많은 정보를 알 수 있습니다 :)