Velog Velog

을 읽고 작성합니다. 5장 반복문을 단순하게 만들어라 화살표 함수(arrow function)로 반복문을 단순하게 만들어라 화살표 함수는 함수가 장황해지는 문제를 해결해서 함수 작성을 간결하고 짧게 만들어준다. 또한, 필요하지 않은 정보를 최대한 걷어낸다. (function keyword, 괄호, return, 중괄호) 매개변수가 1개인 경우에는 괄호를 생략 매개변수가 없거나 2개 이상인 경우에는 괄호 필수 function greet(first, last) { return `안녕하세요, ${capitialize(first)} ${capitalize(last)}님`; } const greet = (first, last) => { return `안녕하세요, ${capitialize(first)} ${capi..

을 읽고 작성합니다. 4장 조건문을 깔끔하게 작성하라 거짓 값이 있는 조건문을 축약하라 Falsy keyword 0 숫자 -0 음수 0n BigInt "" 빈 문자열 null 아무 값도 없음 undefined 원시값 NaN 숫자가 아님 출처 MDN falsy 배열과 객체의 경우 비어있더라도 항상 값이 참이다. 객체 또는 배열이 비어있는지 확인하려면 [].length 또는 Object.keys({}).length 등으로 확인해야 한다. 거짓인지 버그없이 확인하는 방법은 두 가지가 있다. 데이터를 조작하지 않도록 함수를 수정하라 함수를 수정할 수 없다면 strict equivalency를 이용하라! 삼항 연산자로 빠르게 데이터를 확인하라 삼항 연산자를 사용해야 하는 이유? 단순하기만 한 것이 아니라 더 예측..

을 읽고 작성합니다. 3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라 객체를 이용해 정적인 키-값을 탐색해라 원칙적으로 객체는 변화가 없고 구조화된 키-값 데이터를 다루는 경우에 유용하다. .을 통해 직접 참조하거나 배열처럼 접근이 가능하다. 이처럼 객체는 단순하기 때문에 정적인 정보를 다룰 때 훌륭하다. 하지만 계속해서 갱신, 반복, 대체, 정렬해야 하는 정보에는 적절하지 않다. 이런 경우에는 맵을 사용하는 것이 낫다. 단, 기존의 객체를 조작하는 것이 아니라 각각의 함수에서 새로운 객체를 생성하면 조작없이 사용 가능하다. 중괄호에 key-value를 작성하는 것을 객체 리터럴object literal이라고 한다. 비구조화 할당(destructuring) 은 빠른 탐색이 필요할 경우 객체를 선택해..

을 읽고 작성합니다. 2장 배열로 데이터 컬렉션을 관리하라 배열로 유연한 컬렉션을 생성하라 이전 자바스크립트에서는 데이터 컬렉션을 다루는 구조로 배열과 객체 만 있었으나, 모던 자바스크립트에 Map, Set, WeakMap, WeakSet, 객체, 배열 을 사용할 수 있다. 어떠한 형태로든 조작(추가, 제거, 정렬, 필터링, 교체 등)을 해야 한다면 배열이 가장 적합한 컬렉션이다. 이터러블(iterable)이란 컬렉션의 현재 위치를 알고 있는 상태에서 컬렉션의 항목을 한 번에 하나씩 처리하는 방법을 의미한다. 배열은 이터러블(iterable)이 내장되어 있어 다양한 메소드를 활용할 수 있다. 문자열처럼 자체적으로 이터러블이 존재하거나 이터러블로 변환할 수 있는 데이터 형식이면 배열에 사용하는 모든 작업을..

을 읽고 작성합니다. 1장 변수 할당으로 의도를 표현하라 const로 변하지 않는 값을 표현하라 const는 블록의 문맥 내에서 재할당할 수 없는 변수 선언이지만 불변값이 되는 것은 아니다. 자바스크립트에서는 기본적으로 const를 이용해서 변수를 할당하는 것이 좋다. -> 디버깅이 쉬워지기 때문 const로 할당해도 값을 바꿀 수는 있다. 하지만 가능한 조작(mutation)을 피하는 것이 좋다. const discountable = []; for (let i=-; i< cart.length; i++) { if (cart[i].discountAvailable) { discountable.push(cart[i]); } } // No mutation const discountable = cart.filte..

getDay(date){ const week = ['일', '월', '화', '수', '목', '금', '토']; return week[new Date(date).getDay()]; } vue에서 사용한 코드 {{code.startdate}} ({{getDay(code.startdate)}}) v-for을 사용하여 렌더링할 때 함수 파라미터에 날짜를 넣어주고 요일 리턴 Vue.filter('toPrice', price => { if (price === 0) return '무료' else return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '원' }) vue filter를 이용해서 price를 파라미터로 받아 세자리마다 컴마를 추가해주는 데이터..

배열에서 특정 값이 있는지 확인하고 없을 때 값을 넣고 싶으면 array.includes() 메소드 이용 if (!(exmapleArray.includes(p))){ exmapleArray.push(p) } 객체에서 특정 키 값이 존재하는지 확인하고 싶을 때 object.hasOwnProperty(key) if (userList.hasOwnProperty(name)){ // 내용 }