hoon's bLog

5장 배열로 데이터 컬렉션을 관리하라 tip23. filter( )와 find( )로 데이터의 부분집합을 생성하라 다음은 문자열이 담긴 간단한 배열에 필터링을 적용하는 예제 코드이다. const team = ['Michelle B', 'Dave L', 'Dave C', 'Courtne B', 'Davina M']; 'Dave'.match(/Dav/); // ["Dav", index: 0, input: "Dave", groups: undefined] 'Michelle'.match(/Dav/); // null match() : 문자열이 정규 표현식과 일치하면 일치한 항목에 대한 정보를 배열로 반환, 일치하지 않으면 null 반환!! filter() 메서드로 수정해보면 다음과 같다. const daves = ..

5장 반복문을 단순하게 만들어라 tip20. 화살표 함수로 반복문을 단순하게 만들어라 화살표 함수는 함수가 장황해지는 문제를 해결해서 함수 작성을 간결하고 짧게 만들어준다. 또한, 필요하지 않은 정보를 최대한 걷어낸다. (function keyword, 괄호, return, 중괄호 등...) 매개변수가 1개인 경우에는 괄호를 생략 매개변수가 없거나 2개 이상인 경우에는 괄호 필수 // 이름이 있는 '기명함수' function capitalize(name) { return name[0].toUpperCase() + name.slice(1); } // 이름이 없어 변수에 할당하는 '익명함수' const capitalize = function(name) { return name[0].toUpperCase() ..

4장 조건문을 깔끔하게 작성하라 tip17. 거짓 값이 있는 조건문을 축약하라 불 자료형(boolean type)이라고 부르는 원시값 true, false 와 참(truthy) 또는 거짓(falsy) 값이라고 부르는 것들에 대한 차이를 살펴보자. Falsy keyword 0 숫자 -0 음수 0n BigInt "" 빈 문자열 null 아무 값도 없음 undefined 원시값 NaN 숫자가 아님 배열과 객체의 경우 비어있더라도 항상 값이 참이다.(ex. [], {}) 객체 또는 배열이 비어있는지 확인하려면 [].length 또는 Object.keys({}).length 등으로 확인해야 한다. 정의되지 않은 키의 값을 가져오면 undefined 이다. 1 == '1' // true 동등 : 자료형이 다른 값을..

3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라 tip16. Set를 이용해 고윳값을 관리하라. 드디어 3장의 마지막 Set!! 를 정리하고 마무리하려고 한다. 앞에 tip15에서 언급했던 강아지에 대한 정보가 들어있는 필터링 조건을 보자. const dogs = [ { 이름 : '맥스', 크기: '소형견', 견종: '보스턴테리어', 색상: '검정색', }, { 이름 : '도니', 크기: '대형견', 견종: '래브라도레트리버', 색상: '검정색', }, { 이름 : '섀도', 크기: '중형견', 견종: '래브라도레트리버', 색상: '갈색', }, ] 사용자가 선택할 수 있는 조건을 알려면 선택할 수 있는 모든 값을 수집해야 한다. 색상 조건을 수집하기 위해 배열 메서드 map()을 활용해보자. fu..

3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라 tip14. 맵과 펼침 연산자로 키-값 데이터를 순회하라 객체는 순회하기가 번거롭다. 그나마 for ...in문을 사용할 수 있지만 키 외에는 접근할 수 없다. const filters = { color: 'black', breed: 'Retriever' }; function getAppliedFilters(filters) { const keys = Object.keys(filters); const applied = []; for (const key of keys) { applied.push(`${key}:${filters[key]}`); } return `선택한 조건은 ${applied.join(',')} 입니다.`; } Object.keys()로 ..

3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라 tip10. 객체를 이용해 정적인 키-값을 탐색해라 원칙적으로 객체는 변화가 없고 구조화된 키-값 데이터를 다루는 경우에 유용하다. "."을 통해 직접 참조하거나 배열처럼 접근이 가능하다. 이처럼 객체는 단순하여 정적인 정보를 다룰 때 훌륭하다. 하지만 계속해서 갱신, 반복, 대체, 정렬해야 하는 정보에는 그닥 비추!.. 단, 기존의 객체를 조작하는 것이 아니라 각각의 함수에서 새로운 객체를 생성하면 조작없이 사용 가능하다. const colors = { red: '#d10202', green: '#19d836', blue: '#0e33d8' } 위와 같이, 데이터가 변경될 가능성이 없는 색상 컬렉션을 공유하는 경우에는 객체를 선택하는 것이 좋다. 중..

2장 배열로 데이터 컬렉션을 관리하라 tip7. 펼침(Spread) 연산자로 배열을 본떠라 책에서는 펼침 연산자라고 지칭하지만 스프레드 연산자로 정리하겠다.(너무 번역투....) 스프레드 연산자는 마침표 세 개...로 표시하며 자바스크립트에서 아주 중요한 연산자이다. 배열뿐만 아니라 Map Collection이나 Generator를 이용하는 데이터 구조 등에서도 사용할 수 있다. 또한 스프레드 연산자는 단독으로 사용할 수 없고 어떤 곳 안에 정보를 펼쳐 넣어야 한다. 반복문이 늘어날수록 코드는 복잡해지기 때문에 스프레드 연산자를 잘 활용하는 것이 중요하다. 또한 원본 데이터에 영향을 주지 않고 새로운 데이터를 생성할 수 있어 데이터 불변성 유지에 좋다. function selectBook(title, a..

2장 배열로 데이터 컬렉션을 관리하라 tip5. 배열로 유연한 컬렉션을 생성하라 이전 자바스크립트에서는 데이터 컬렉션을 다루는 구조로 배열과 객체 만 있었으나, 모던 자바스크립트에 Map, Set, WeakMap, WeakSet, 객체, 배열 을 사용할 수 있다. 컬렉션을 선택할 때는 정보로 어떤 작업을 할지 먼저 생각 해야한다. 이터러블(iterable)이란 컬렉션의 현재 위치를 알고 있는 상태에서 컬렉션의 항목을 한 번에 하나씩 처리하는 방법을 의미한다. 배열은 이터러블(iterable)이 내장되어 있어 다양한 메소드를 활용할 수 있다. 문자열처럼 자체적으로 이터러블이 존재하거나 이터러블로 변환할 수 있는 데이터 형식이면 배열에 사용하는 모든 작업을 동일하게 실행할 수 있다. 아래 코드는 team 배..