요즘 바쁘다보니.. 벨로그가 뜸했네요 ^^;
간만에 자바스크립트 안티패턴 관련한 내용을 공유합니다.
anti pattern ?
😡 anti pattren ?
- 많이 또는 자주 사용되는 패턴이지만 비효율적이거나 비생산적인 패턴
여기서 말하는 패턴이라는 단어는 일정한 형태, 유형, 되풀이 되는 사건이라는 의미는 아니며 소프트웨어 공학에서 이야기하는 패턴을 의미한다.
(디자인 패턴 : 소프트웨어를 설계할 때 특정 맥락에서 자주 발생하는 고질적인 문제들이 또 발생했을 때 재사용할 할 수있는 훌륭한 해결책)
- 요약하자면, 프로그램을 작성할때 어떤 문제를 해결하고자 패턴(어떤 해결책)을 적용했는데 오히려 비효율적이고 독이되는것을 의미한다.
javascript anti pattrens
1.
<script></script>태그는<body> 태그 다음에 정의하라!
- 브라우저 렌더링 엔진이 HTML 문서를 파싱하다 중간에
<script>태그를 만나면 파싱을 멈추고 자바스크립트를 해석하고 실행을한다. 이럴경우 브라우저에서 페이지 로딩이 느려지기 때문에 좋지않다.(이를 제어하고자 defer, async 속성을 사용할 수 있다)
2. 전역변수 사용을 주의하라!
- 전역변수는 언제든지 모든 부분에서 접근할 수 있기 때문에 편하지만, 모든 부분에서 변경될 수 있고, 그로 인해 예상치 못한 오류를 발생시킬 수 있다.
- var 키워드를 생략하고 변수를 선언하면 전역변수로 선언이 되는데 전역스코프가 오염이 될 수있으니 주의해야한다.
3. 변수 및 함수는 사용전에 정의하라!
- 자바스크립트에서는 호이스팅이라는 현상으로 함수 선언문과 변수선언이 컨텍스트 최상단으로 끌어올려집니다. 그래서 아래와 같은 코드도 정상동작은 하지만 가독성이 떨어지며 이로인해 오류가 발생하면 찾기가 어렵습니다.
say();
function say() {
console.log('hello!');
}
4. 배열 및 객체 선언시 리터럴 방식으로 정의하라!
- 리터럴 방식이 가독성 및 속도측면에서 좋다.
// anti pattren
var arr = new Array();
var obj = new Object();
obj.num = 1;
var arr = [];
var obj = { a: 1 };
5. array.length 및 DOM 은 캐시해놓고 사용하라!
- 캐시해놓고 사용하면, 속도측면에서 빠르다.
- DOM 같은 경우는 캐시해서 사용하되 꼭 메모리누수가 나지 않도록 참조를 풀어주는것도 중요하다.
let arr = [1,2,3];
for(let i = 0; i < arr.length; i++) {...}
// for 문이 수행할때마다 arr.length 그만큼 수행
let arr = [1,2,3];
const arrLength = arr.length;
for(let i = 0; i < arrLength; i++) {...}
// 배열의 길이를 이미 구했기 때문에 훨씬 빠르다
6. inline javascript 작성을 피하라!
- 유연하지 않으며, 여러 이벤트리스너 방지
- 아래와 같이 이벤트를 추가하는 경우, 이벤트 함수가 전역에 있어야함(전역으로 실행)
- 코드와 마크업이 혼용됨(기능과 HTML이 분리되어야함)
// anti pattren
<body onload="init()">
document.body.addEventListener('load', init);
developer life started : 2016.06.07 ~ 흔한 Front-end 개발자