Study/JavaScript(Clean code)

[JavaScript][clean-code] default Value / default parameter

* Default Value / Default parameter - 기본값 설정 * 기본값 예시 코드 function createCarousel(options) { options = options || {}; const margin = options.margin || 0; const center = options.center || false; const navElement = options.navElement || 'div'; // ...some code return { margin, center, navElement, }; } createCarousel(); 기본값 설정이 되어 있어서 인자가 들어오지 않을경우 기본값으로 할당이 된다. * 기본값 다른 예시 function createCarousel({ ..

[JavaScript][clean-code] 복잡한 인자 관리하기

* 복잡한 인자 관리하기 - 인자의 갯수별로 함수의 사용도가 달라지기보단 인자의 갯수에 따른 맥락을 유추할 수 있는 방식이 더 중요하다. 무조건 인자가 많은게 나쁜건 아니다. 맥락과 흐름을 파악할 수 있는 인자가 더 중요하다. * 맥락과 흐름을 파악할 수 있는 인자 예시코드 function toggleDisplay(isToggle) { // ...some code } // 인자의 네이밍을 보고 bool형식의 인자가 들어갈 것이 유추된다. function sum(sum1, sum2) { // ...some code } sum(1, 2); // 값이 2개 이므로 2개의 값을 더하는구나를 유추 할 수 있다. function getRandomNumber(min, max) { // ...some code } * ..

[JavaScript][clean-code] argument & parameter

* argument & parameter - 자바스크립트 함수에서 넘기는 인자 혹은 매개변수 * JavaScript argument vs parameter의 다른점은 무엇일까? MDN에서는 아래의 예시와 같이 구분하고 있다. function example(parameter) { console.log(parameter); } const argument = 'foo'; example(argument); 함수의 parameters는 이름이 있고 함수의 정의 부분에 있다. 함수의 arguments는 함수에 들어가는 real value이다. * Parameter (Formal Parameter) 예시 형식을 갖춘 매개 변수 function axios(url) { // some code } * Argument (A..

[JavaScript][clean-code] 함수, 메서드, 생성자

* 함수, 메서드, 생성자 자바스크립트의 함수는 많은 일을 한다. 함수는 일급객체로 동작하다보니 고차함수로 쓸 수도 있고 함수형 프로그래밍도 가능 그렇다보니 자바스크립트의 함수의 사용도가 넓은것에 따라서 오는 어려운 부분이 있다. 어려운 부분중 하나인 함수, 메서드, 생성자 구분이다. * 자바스크립트의 함수는 1급 객체 변수나, 데이터가 담길 수 있다. 매개변수로 전달 가능 (콜백 함수) 함수가 함수를 반환 가능 (고차 함수) * 자바스크립트 this - this가 전부 다른고 사용도 또한 다르다. 함수의 this func(); // 전역객체 메서드에서의 this 메서드란?? 객체에 의존성이 있는 함수, OOP 행동을 의미 메서드에서의 this는 호출된 객체를 바라본다. obj.method(); 생성자 ..

[JavaScript][clean-code] 직접 접근 지양하기

* 직접 접근 지양하기 - 직접 접근이 가능하면 발생할 수 있는 문제를 예시를 통해 확인 * 예시 const model = { isLogin : false, isValidToken : false }; function login() { model.isLogin = true; model.isValidToken = true; } function logout() { model.isLogin = false; model.isValidToken = false; } someElement.addEventListener('click', login) someElement를 click하였을때 login function이 실행된다. 이때 model에 쉽게 접근할 수 있는점이 문제점이 된다. * 해결방법 this를 사용하거나 객..

[JavaScript][clean-code] hasOwnProperty

* hasOwnProperty - property를 가지고 있는가? - 가지고있다면 true 없다면 false를 반환한다. const person = { name : 'hyeonwoo' } person.hasOwnProperty(name); // true person.hasOwnProperty(age); // false JavaScript는 프로퍼티 명칭으로서 hasOwnProperty를 보호하지 않는다. 그러므로 이 명칭을 사용하는 프로퍼티를 가지는 객체가 존재하려면 즉, 올바른 결과들을 얻기 위해서는 외부 hasOwnProperty를 사용해야한다. 아래의 예시를 통해 확인해보기 * 예시를 통한 확인 (hasOwnProperty) // hasOwnProperty라는 메서드와 bar라는 문자열을 가지고 ..