joyful

데이터 변경이 잦은 키-값 컬렉션에 맵 객체를 사용할 수 있다. 맵(Map) : 특정 작업을 매우 쉽게 처리하는 특별한 종류의 컬렉션 맵은 다음 두 가지 상황에서 사용 할 수 있다. 키-값 쌍이 자주 추가되거나 삭제되는 경우 키가 문자열이 아닌 경우 예제코드 1.키-값 쌍이 자주 추가되거나 삭제되는 경우 const dogs = [ { 이름: '맥스', 크기: '소형견', 견종: '보스턴테리어', 색상: '검정색', }, { 이름: '도니', 크기: '대형견', 견종: '래브라도레트리버', 색상: '검정색', }, { 이름: '섀도', 크기: '중형견', 견종: '래브라도레트리버', 색상: '갈색', }, ]; 반려견 입양을 도와주는 웹사이트를 예로 들어보자. 강아지의 컬렉션들이 배열로 담겨져있다. 이때 ..

이번 팁에서는 Object.assign()의 이점을 객체 펼침 연산자의 간단한 문법으로 대체하는 법을 알아보자. 객체 펼침 연산자 배열 펼침 연산자와 작동법이 비슷하다. 키-값 쌍을 목록에 있는 것처럼 반환한다. 새로운 정보를 펼침 연산자의 앞이나 뒤에 쉽게 추가할 수 있다. 배열 펼침 연산자와 마찬가지로 독립적으로 사용할 수 없고 객체에 펼쳐지게 해야 한다. function updateBookYear() { const book = { title: 'Reasons and Persons', author: 'Derek Parfit', }; const update = { ...book, year: 1984 }; // { title: 'Reasons and Persons', author: 'Derek Parfi..

Object.assign()을 이용해 조작하지 않고 객체를 업데이트하는 방법을 알아보겠다. 객체는 많은 이점을 갖고 있지만, 배열과 마찬가지로 조작의 위험성이 있으므로 주의해야 한다. 배열과 마찬가지로 원래의 데이터를 유지하는 새로운 객체를 생성하는 법을 알아보자. 문제 1 const defaults = { author: '', title: '', year: 2017, rating: null, }; const book = { author: 'Joe Morgan', title: 'Simplifying JavaScript', }; function addBookDefaults(book, defaults) { const fields = Object.keys(defaults); //['author', 'title..

배열은 유연해서 어떤 형태의 정보라도 담을 수 있지만, 필요 이상으로 복잡하게 만들기도 한다. 이때 가장 많이 사용하는 데이터 컬렉션 방법이 객체이다. 특히 변화가 없고 구조화된 키-값 컬렉션에 객체를 사용하는 것이 가장 적합하다. 예제코드 function getBill(item) { return { name: item.name, due: twoWeeksFromNow(), total: calculateTotal(item.price), }; } const bill = getBill({ name: '객실 청소', price: 30 }); function displayBill(bill) { return `${bill.name} 비용은 ${bill.total} 달러이며 납부일은 ${bill.due}입니다.`; ..

배열을 여러번 정렬해도 항상 같은 결과가 나오게 펼침 연산자를 사용할 수 있다. 이전 Tip들에서 펼침 연산자를 이용해서 여러 가지 조작 함수를 대체하는 방법을 살펴보았다. 그렇다면 대체하기 쉽지 않은 함수가 있을 때는? *펼침 연산자로 원본 배열의 사본을 생성하고, 사본을 조작하면 된다. 예제코드 직원 정보가 담긴 배열을 이름 또는 근속 연수를 기준으로 정렬하는 애플리케이션을 개발한다고 가정해보자. 다음은 직원 정보가 담긴 배열이다. const staff = [ { name: 'Joe', years: 10, }, { name: 'Theo', years: 5, }, { name: 'Dyan', years: 10, }, ]; 다음으로 이름 또는 근속 연수로 정렬하는 몇 가지 함수를 추가한다. functio..

push(): 새로운 항목을 배열 뒤에 추가해 원본 배열을 변경하는 메서드 문제 push()로 인해 발생하는 문제 -다음은 할인 금액을 확인하고 할인 상품이 두 개 이상이면 오류객체를 반환하는 함수이다. -만약 오류가 없다면 상품을 많이 구매한 사람에게 사은품을 준다. const cart = [ { name: 'The Foundation Triology', price: 19.99, discount: false, }, { name: 'Godel, Escher, Bach', price: 15.99, discount: false, }, { name: 'Red Mars', price: 5.99, discount: true, }, ]; const reward = { name: 'Guide to Science Fi..

펼침 연산자를 이용해 배열 작업을 단순하게 만들 수 있다. 펼침 연산자: 마침표 세개(...)로 표시한다. 배열에 포함된 항목을 목록으로 바꿔준다. 문제 1. 반복문만 사용하여 배열에서 항목을 제거하려 할 때: 코드가 길어지는 문제가 있음 function removeItem(items, removable) { const updated = []; for (let i = 0; i < items.length; i++) { if (items[i] !== removable) { updated.push(items[i]); } } return updated; } 2. splice()를 사용해서 항목을 제거하려 할 때: splice()가 원본 배열을 조작하는 문제가 있음 function removeItem(items,..

배열에 있는 값의 위치를 확인하지 않고도 존재 여부를 확인할 수 있는 방법이 있다. 문제 const sections = ['shipping']; function displayShipping(sections) { if (sections.indexOf('shipping')) { return true; } return false; } // false 배열에서 특정 문자열의 존재 여부를 확인하려 할 때, 그 문자열의 index 값으로 위치를 확인할 수 있다. 문자열이 존재하면 그 index를 반환하고, 존재하지 않는다면 -1이 반환된다. 문제는 index값이 0이 될 수도 있는데, 자바스크립트에서 0은 거짓(false)로 취급된다. 따라서 실제로 존재하는 값이더라도 확인 결과가 false로 출력될 수 있다. c..

1. 배열은 순서를 갖기 때문에 이를 기준으로 값을 추가하거나 제거할 수 있고, 어느 위치에 해당 값이 있는 지 확인 할 수도 있다. 2. 배열을 정렬해서 순서를 새로 지정할 수도 있다. const team = [ 'Joe', 'Dyan', 'Bea', 'Theo', ]; function alphabetizeTeam(team) { return [...team].sort(); // ['Bea', 'Dyan', 'Joe', 'Theo'] } *sort() 메서드를 이용해 배열의 요소들을 문자열로 취급하여 유니코드 순서대로 정렬했다. (알파벳 순) 3. map(), filter(), reduce() 등과 같은 배열 메서드를 이용하면 코드 한 줄로 정보를 쉽게 변경할 수 있다. const staff = [ { ..

자바스크립트에서 문자열을 연결하는 방법은 복잡하다. 하지만 템플릿 리터럴로 복잡도를 줄일 수 있다. 복잡한 기존의 연결 방법 -각 부분을 + 기호로 연결. //url과 이미지 ID를 조합하고, 이미지 너비를 쿼리 매개변수로 넘겨주는 형식의 url을 만드는 함수 function generateLink(image, width) { const widthInt = parseInt(width, 10); return 'https://' + getProvider() + '/' + image + '?width=' + widthInt; } --> url의 라우팅이 더 길거나 매개변수를 더 추가해야 한다면 함수가 더 길어질 우려가 있다. 템플릿 리터럴: 자바스크립트 표현식을 사용해서 문자열을 연결하고 새로운 문자열을 생성..