클린코드
고민하기
- 타인이 정의한 답을 의심한다
- 나보다 경력이 많고 네임드 개발자 일지라도 맹목적인 믿음을 가지고 생각하지 않는 경향을 없에고 다양한 배움을 포기하지 말자
구글링만 하고 넘어가는 현상하고도 같다
- 열린 태도를 가지자
- 디자인 패턴이나 구조 라이브러리 설계 같은 것을 너무 빡빡하게 가져서 프레임이 갖힐 수 있다. 좀 더 열린 태도를 가지자
- 상위 2가지에 부합하는 건 스스로 생각하고 고민하는 것
- 다양한 사례를 통해 각 상황에서의 좋은 코드 나쁜 코드를 파악해보기 (연습)
var 지양하기
var X -> let & const!
var는 함수 스코프, let & const는 블록 스코프, TDZ를 피할 수 있다.
console.log(name) //undefined
var name = '이름';
var name = '이름2';
var name = '이름3';
var name = '이름3';
console.log(name) // 이름3
값이 다르지만 에러가 나지 않으며 가장 마지막에 할당한 게 나오며 먼저 console.log를 사용했음에도 에러가 아닌 undefined로 출력해버린다(호이스팅)
만약 우리가 작성하는 라인이 엄청나다고 생각하면 굉장히 곤란해진다
let이나 const를 사용하면 안전하게 사용 가능하다
스코프 차이
var global = '전역';
if(global =='전역){
var global = '지역'
console.log(global); //지역
}
console.log(global);//지역
위 상황에서 중괄호 안까지만 바뀌길 원했는데 전역까지 바꾼다. 함수단위 스코프이기 때문
블록단위로 해야 안전하다
let global = '전역';
if(global =='전역){
let global = '지역'
console.log(global); //지역
}
console.log(global);//전역하지만 let보다 const가 좋은 이유 -> 재할당만 생각해보자면
const person ={
name : 'jang',
age:30
}
person = {
...
} // Assignment to constant variable
person.name = 'lee'
person.age == 20
console.log(person) // {name: 'lee',age:20}재할당 금지 에러가 뜬다. 하지만 아래는 person을 재할당 하지 않고 값만 바꾼것이기 때문에 가능하다!
배열 또한 push메서드 등을 사용할 경우 가능하다. const는 재할당만 금지! 객체 배열 조작할땐 이상이 없다
전역 공간을 사용 X
전역공간은 window와 global로 나누는데 각 브라우저와 node로 나눈다.
전역-> 최상위
간단히 index.js 와 index2.js 2개가 있는데 index.js에서 전역 변수를 만들게 될 경우 index2.js에서도 똑같이 사용 됨으로 서로 코드가 겹칠 위험성이 매우 커진다
파일을 나누면 스코프가 나뉘는 게 아니기 때문
요약
전역 공간을 최대한 사용 자제
-> 어디서나 접근 가능하며 스코프 분리 위험
어떻게??
1. 전역변수 X
2. 지역변수 O
3. window.global을 조작 X
4. const, let ok
5. IIFE, Module, closure 스코프를 나누기
임시 변수 제거하기
function getElements() {
const result = {};
result.title = document.querySelector('.title')
result.text = document.querySelector('.text')
result.value = document.querySelector('.value')
return result;
}의문이 생길 수 있다. const를 사용했고 괜찮지 않나? 겠지만 이 함수 안에서 사용한 result는 임시 객체도 함수가 커진다면 이 임시객체가 전역 변수와 비슷하게 변해버릴 수 있다.
함수를 잘게 쪼갠다면 상관없지만 그렇지 않다면 임시변수를 만드는 습관이 있다면 고치고 뜯어보자
function getElements() {
const result = {
title : document.querySelector('.title'),
text : document.querySelector('.text'),
value : document.querySelector('.value'),
};
return result;
}이렇게 변환할 경우 좀 더 명확해지고 여기서 더 명확하게 하려면 그냥 객체 자체를 return해버리는 방식도 있다
function getElements() {
return {
title : document.querySelector('.title'),
text : document.querySelector('.text'),
value : document.querySelector('.value'),
}
}이러면 이 코드는 사이드 이펙트가 굉장히 적어진 코드가 될 수 있다.
임시 변수가 생기는 순간부턴 조작을 많이하고 반환만 하면 된다라는 유혹이 일어날 수 있는 것이다.
또는
function getDateTime(targetDate)}{
let month = targetDate.getMonth();
let day = targetDate.getDate();
let hour = targetDate.Hours();
month = month >= 10? month: '0'+month;
day = day >= 10? day: '0'+day;
hour = hour >= 10? hour: '0'+hour;
return {
month,day,hour
}
}만약 이런 상황이 온다면 이후에 이 함수가 할 수 없는 추가적인 스펙 즉, 기획이나 마케팅적인 요소로 무언가 날짜에 대한 요구사항이 생겼을 때 어떻게 할 것인가?
1. 함수추가
2. 함수 유지 보수, 수정
-> 이 경우에 문제가 생길 수 있다. 함수가 여러군데 쓰일 수 있기때문에
function getDateTime(targetDate)}{
const month = targetDate.getMonth();
const day = targetDate.getDate();
const hour = targetDate.Hours();
return{
month : month >= 10? month: '0'+month,
day : day >= 10? day: '0'+day,
hour : hour >= 10? hour: '0'+hour,
}
}
function getDateTime(){
const currentDateTime = getDateTime(new Date())
....
}등처럼 임시변수를 만들어 crud하는 상황을 줄이고 추상화를 통해 하나 나하나 함수를 씌우고 벗겨가며 구상해보자.
요약
임시변수를 제거
-> 명령형으로 가득한 로직이 나오며 어디서 어떻게 잘못됐는지 디버깅이 힘듬
-> 추가적인 코드를 작성하게 되는 유혹이 일어난다
해결
-> 함수나누기
-> 바로 반환
-> 고차함수(map,filter,reduce)
-> 선언형 프로그래밍 활용
