javascript
[JavaScript] 클린 코드 - 4. 객체와 자료구조
1. getter와 setter를 사용한다. JavaScript는 public, private 키워드나 인터페이스 문법이 존재하지 않는다. (TypeScript에선 모두 제공하고 있다. 굿굿) 그래서 중요한 내용을 내부 인터페이스로 따로 분리하여 관리하는 것이 어렵다. 대신 getter와 setter를 사용하는 것을 추천한다. 다음과 같은 장점을 가질 수 있다. 단순히 속성을 얻는 것 이상의 행동을 쉽게 구현할 수 있다. 만약 검증 로직이 필요하다면 간단하게 추가할 수 있다. 내부용 API를 캡슐화 시킬 수 있다. getting, setting 로그를 관리하거나 에러 처리를 쉽게 할 수 있다. 서버에서 객체 속성을 받아올 때 lazy load 할 수 있다. lazy load - 페이지를 읽는 시점에서 중..
[JavaScript] 클린 코드 - 3. 함수 (2)
1. 함수형 프로그래밍을 지향한다. (여기선 간단히만 다룸. 중요한 패러다임이니 따로 공부할 예정) 함수형 프로그래밍이란 함수를 기반으로 하는 프로그래밍이다. 이러한 함수형 프로그래밍에선 순수 함수를 사용해야 한다. 순수 함수 같은 입력이 주어지면 항상 같은 값을 반환해야 한다. 부작용(Side effect)이 없어야 한다. = 함수의 실행이 프로그램의 실행에 영향을 미치지 않아야 한다. ex 함수 내부에서 인자의 값을 변경하거나 프로그램 상태를 변경하는 행위 프로그램에 변화를 주지 않고, 입력에 대한 결과를 예측할 수 있어서 테스트가 쉬워진다. 또한 함수형 프로그래밍은 데이터를 변경하지 않고 기존 데이터의 복사본을 다뤄야 한다. 복사본을 만들기 위한 JavaScript의 대표적인 순수 함수는 map, ..
[JavaScript] 클린 코드 - 2. 함수 (1)
1. 함수 인자는 2개 이하가 이상적이다. 매개변수의 개수가 적다는 것은 테스트할 경우의 수가 줄어든다는 것을 의미한다. 1~2개가 이상적이다. 인자가 2개가 넘으면 그 함수는 너무 많은 역할을 하고 있는 중이다. 참고) ES6의 비구조화(destructuring) 문법을 사용한다면 함수의 속성을 명확하게 보여줄 수 있다. // BAD function createMenu(title, body, buttonText, cancellable) { // ... } // GOOD! - 비구조화(destructuring) function createMenu({ title, body, buttonText, cancellable }) { // ... } createMenu({ title: "Foo", body: "Ba..
[JavaScript] 클린 코드 - 1. 변수명 짓는 방법
1. 의미 있고 발음하기 쉬운 변수명을 사용한다. const yyyymmdstr = moment().format('YYYY/MM/DD'); // BAD const currentDate = moment().format('YYYY/MM/DD'); // GOOD! 2. 같은 의미의 변수를 여러 개 만들지 않는다. // BAD - 같은 의미의 변수들이다. getUserInfo(); getClientData(); getCustomerRecord(); // GOOD - 변수들을 하나로 묶는다. getUser(); 3. 검색 가능한 이름을 사용한다. 의미를 가지고 있는 값이라면 상수로 만들어 관리하자! 손쉽게 검색할 수 있게 된다. 동료와 협업할 때, 예전의 내 코드를 찾아볼 때 등의 상황에서 코드 이해에 큰 도움을..
[JavaScript] 배열 메서드 종류 (filter, forEach, map, reduce, sort)
Array methods JavaScript에는 배열을 다루는 여러 가지 유용한 메서드들이 많다. 자주 쓰이는 문법들이기도 하니까 한번쯤 정리할 필요성을 느꼈다. 1. Array.prototype.filter() 배열 요소들 중 콜백 함수의 조건을 만족하는 요소들만 모아 새로운 배열을 생성한다. callback 함수는 결과값이 true면 요소를 유지하고 false면 버린다. 필터링된 새로운 배열을 반환한다. 필터링된 요소가 없다면 빈 배열을 반환한다. 선언 arr.filter(callback(element, [index], [array]) { ... }, [thisArg]) // element: 처리할 현재 요소 // index: 처리할 현재 요소의 인덱스 [Optional] // array: filte..
[JavaScript / ES6] 화살표 함수 (Arrow function)
Arrow function (화살표 함수) 화살표 함수는 function 키워드 대신 화살표 =>를 사용하여 보다 간략한 방법으로 함수를 선언하는 방법이다. 문법 기본 문법은 다음과 같다. // function let func = function(arg1, arg2, ...argN) { return expression; }; // arrow function let func = (arg1, arg2, ...argN) => expression 인수가 하나밖에 없다면 인수의 괄호는 생략할 수 있다. // function let double = function(n) { return n * 2 } // arrow function let double = n => n * 2; 인수가 없을 땐 빈 괄호를 사용한다. 다..
[Javascript] classList 메서드 종류 (remove, add, item, toggle, contains, replace)
Element.classList classList의 다양한 메서드를 통해 클래스를 간편하게 제어할 수 있다. classList 자체는 읽기 전용 프로퍼티지만 add()와 remove() 메서드를 이용하여 변형할 수 있다. 메서드 먼저 foo 클래스를 가지는 div 상수를 만들고 시작한다. const div = document.createElement('div'); div.className = 'foo'; console.log(div) // 1. remove() 지정한 클래스 값을 제거한다. 존재하지 않는 클래스를 제거해도 에러를 발생시키지 않는다. div.classList.remove("foo"); // 2. add() 지정한 클래스 값을 추가한다. 추가하려는 클래스가 이미 존재한다면 무시한다. div...
[JavaScript] 템플릿 리터럴 (Template literals)
Template literals (템플릿 리터럴) 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 이전 버전의 ES2015 명세서에는 "template strings" (템플릿 문자열)라고 불렸다. 익숙해지면 굉장히 편리한 문법이다! 핵심 기능 여러 줄 표현 문자열에 변수, 표현식 삽입 사용 방법 이중 따옴표"", 작은 따옴표'' 대신 백틱(backtick)``을 이용한다. 물결(~)과 같은 키 버튼이다. 변수나 표현식은 $와 중괄호를 통해 표기한다. - ${var}, ${a + b} 여러 줄 표현 normal strings console.log('string text line 1\n' + 'string text line 2'); [ES6] template literals console.lo..