Study

[JavaScript][clean-code] 호이스팅 주의하기

[참고] https://latte1114.tistory.com/357 * 호이스팅이란? - 런타임시(프로그램이 동작될때) 선언을 바로 최상단으로 끌어 올려주는것 - 런타임시(프로그램이 동작될때) 선언과 할당을 분리해준다. * 문제점은?? 코드를 작성할 때 예측하지 못한 실행 결과를 만들어 낼 수 있다. 굉장히 힘든 개발을 해야 할 수 있다. * 이러한 상황을 피하기 위해서는?? var를 사용하지 않는다. let, const를 사용해주자. 함수도 조심할것 좋은방법: 함수표현식을 이용하자 * 함수표현식 const sum = function() { return 1 + 2; } console.log(sum()); // 3

[JavaScript][clean-code] 임시변수를 제거하자

* 임시변수란? - Scope안에서 전역변수처럼 활용되는 변수 * 임시변수를 쓰면 왜 위험한가? 함수안에있는 임시객체들이 함수가 커지면서 전역공간이나 다름없는 상황에서 나올수 있다. 그렇게되면 임시객체들이 매우 위험한 요소들이 될 수가 있다. 명령형으로 가득한 로직이 나온다. 임시변수에 값을 넣고 넣고 넣고 변경하다가 보면 값이 예상이 되지않는다. 어디서 어떻게 잘못되었는지 디버깅이 힘들다. 추가적인 코드를 작성하고 싶은 유혹에 빠지기 쉽다. 코드 유지보수가 어렵다. * 임시변수나 임시객체들은 어떻게 CRUD하는게 좋을까? (CRUD는 조작한다는 의미) 함수를 많이 나누는 방법 임시변수에 담지않고 바로 반환하기 단 하나의 역할만 할 수 있는 함수로 만들기 고차함수를 사용 ex) map(), filter(..

[JavaScript][clean-code] 전역 변수 사용 최소화

* 전역공간이 무엇일까? - 최상위 공간이 바로 전역공간이다. 브라우저에서는 Window가 최상위 공간 node에서는 Global이 최상위 공간 위 둘이 크게 다른것은 없다. * 전역공간을 너무 더럽히지 말자 - 이유는?? 어디서나 접근이 가능하게 된다. 사람이 생각하기에는 분리가 되었지만 런타임 환경에서는 분리가 되어있지않다. (위험하다) 다른 코드에도 영향을 주어 부작용을 발생시킬 수 있다. https://latte1114.tistory.com/497 (몽키패치 내용 참조) 파일을 나누어서 사용하였지만 다른 파일에서도 전역으로 설정한 변수가 읽힌다. 따라서 코드가 겹칠수도있다. 하지만 error은 발생하지 않아서 어디서 문제가 생긴건지 확인이 힘들다. - 어떤 방법이 좋은방법일까? 전역변수를 애초에 ..

[JavaScript][clean-code] var를 지양하자

* var를 사용을 지양하자. - let, const를 사용하자 * 왜 let, const를 사용해야 할까?? 1. Scope (핵심) var : 함수 스코프 let, const : 블록 스코프, Temporal Dead Zone(TDZ)속성을 가지고있음 더 안전하다. TDZ : 변수 선언 전에 변수를 호출 할경우 reference error 가 발생하는데 이때 tdz 에 걸렸다고 표현 2. 재선언, 재할당 var : 재선언, 재할당이 가능하다. 중복선언도 가능하다. 따라서 코드가 길어지면 어떤값이 선언된건지 어떤값이 호출될지 예상이 되지않는다. let : 재선언 불가능, 재할당은 가능 따라서 안전하게 사용 가능 const : 재선언 및 재할당이 되지않음 * code로 확인하는 scope의 차이 * va..

[JavaScript][clean-code] 클린코드 리뷰 지적 사항

* JavaScript - 해당 내용을 code review에서 지적받은 사항을 정리하여 놓은 내역입니다. 1. DRY(making function) DRY 원칙, 즉 “반복하지 마라(Don't Repeat Yourself)”라는 말 역시 좋은 소프트웨어 개발 습관의 근원이라 할 만하다. “모든 지식 조각은 딱 한 번만 나와야 한다" 2. Early return early return이란, return을 빨리 해버려서 뒷 코드의 구조를 단순하게 만들어주는 패턴이다. 정확히는 else를 제거하는것이 목적이다. 3. Consistency(일관성)있게 작성하기 변수명 작성 패턴 ex) camelCase 선택자 일치 ex) querySelector or getElementByClassName 4. Event d..

[JavaScript][clean-code] JavaScript의 특성을 파악해야하는 이유

* JavaScript는 몽키패치(Monkey patch)이다. 런타임 중인 프로그램의 내용이 변경되는 행동을 의미한다. 런타임 중에 property object를 직접적으로 수정하는 일련의 작업들을 말한다. (JS 기준) 몽키 패치는 일반적으로 안티 패턴 (비효율적이거나 비생산적인 패턴)으로 인식된다. 이러한 패치들은 런타임 중에 특정 시점에 적용되는 것인데도 불구하고 전역 변수로 적용이 되기 때문에 다른 코드에도 영향을 주고 부작용을 발생시킬 수밖에 없음 * code로 보는 몽키패치 var globalVar = 'global'; console.log(globalVar); // 'global' console.log(window.globalVar); // 'global'; window안에 globalVa..