프로그래밍언어/JavaScript (11) 썸네일형 리스트형 [JavaScript] filter()와 find() 함수 filter()와 find() 함수 이전 포스팅에서는 원본 배열에서 필요한 정보만 꺼내 새로운 배열을 생성했었다. 그럼 데이터의 형태는 유지하면서 배열의 일부만 필요할 경우엔 어떻게 할까? 예를 들어, 아래 배열을 살펴보자.const team = [ 'Michelle B', 'Dave L', 'Dave C', 'Courtney B', 'Davina M']; 이 배열에서 'Dav'가 포함된 문자열만 리턴해 보자. 가장 기본적인 방법은 for문을 사용하는 것이다.const daves = [];for (let i = 0; i filter() 함수이번엔 filter 함수를 사용해 보자. filter 함수는 배열의 항목을 하나씩 검사하면서, 반환값이 true일 때만 그 값을 유지하고,.. [JavaScript] map() 메서드로 비슷한 길이의 배열 생성 map() 메서드란? map() 메서드는 배열의 각 요소에 대해 콜백 함수에서 반환된 정보를 새로운 배열로 생성한다.다른 배열 메서드와 비교했을 때, 반환값을 예상하기 쉽고 명확하다. map() 메서드는 무엇을 할까?배열의 각 요소를 특정 조각으로 변환하거나새로운 형식의 값으로 변환할 수 있다. 예제: 밴드 연주자 정보 추출아래는 밴드 연주자의 정보가 담긴 컬렉션이다:const band = [ { name: 'corbett', instrument: 'guitar' }, { name: 'evan', instrument: 'guitar' }, { name: 'sean', instrument: 'bass' }, { name: 'brett', instrument: 'drums' }]; 반복.. [JavaScript] 배열 메서드로 반복문 짧게 작성하기 배열 메서드로 반복문을 단순화하기 모던 자바스크립트를 작성한다는 것은 코드의 간결함, 가독성, 그리고 예측 가능성을 추구하는 것이다.이러한 목표를 달성하는 데 있어 배열 메서드는 매우 강력한 도구다. 반복문 코드의 한계아래는 반복문을 사용해 배열을 처리하는 코드다:const prices = ['1.0', '2.15'];const formatterPrices = [];for (let i = 0; i 이 코드의 기능은 간단하다: 문자열로 된 숫자를 부동소수점 숫자로 변환하는 것이다.하지만 이런 반복문이 다섯 개의 파일에서 각기 다른 작업을 한다면, 중복된 코드가 늘어나고 유지보수가 어려워질 수 있다. 배열 메서드로 더 간결하게배열 메서드를 사용하면 위 코드를 다음과 같이 간단하게 작성할 수 있다:con.. [JavaScript] 화살표 함수로 반복문 단순하게 만들기 화살표 함수란 무엇일까? 화살표 함수는 함수가 장황해지는 문제를 해결해 간결하고 짧게 작성할 수 있도록 도와준다.불필요한 정보들을 최대한 제거해 작성할 수 있으며, function 키워드, 인수를 감싸는 괄호, return 키워드, 중괄호 등을 줄일 수 있다. 기명 함수를 화살표 함수로 바꾸기아래는 기명 함수로 작성된 예제다:function capitalize(name) { return name[0].toUpperCase() + name.slice(1);} 이 함수를 익명 함수로 작성하면 다음과 같이 변환할 수 있다:const capitalize = function(name) { return name[0].toUpperCase() + name.slice(1);}; 익명 함수에서 functio.. [JavaScript] Set을 활용한 고유값 관리 객체가 담긴 배열에서 중복 없는 고유한 값만 분류해야 할 때가 있다. 오늘은 이 문제를 해결하기 위한 강력한 도구, Set에 대해 알아보.Set이란? Set은 고유한 값을 관리하기 위한 특화된 컬렉션이다. 배열처럼 값을 저장하지만, 중복 값을 허용하지 않으며, 유일한 값만 저장한. 예제다음은 강아지에 대한 정보가 담긴 배열입니다: const dogs = [ { 이름: '맥스', 크기: '대형견', 견종: '진돗개', 색상: '노란색' }, { 이름: '도니', 크기: '중형견', 견종: '웰시코기', 색상: '갈색' }, { 이름: '방울이', 크기: '소형견', 견종: '말티즈', 색상: '흰색' }]; 이 배열에서 중복 없는 색상 목록을 만들려면 어떻게 해야 할까? 1단계: 색상 배열.. [JavaScript] 객체 펼침 연산자(Spread Operator) 활용하기 오늘은 객체 펼침 연산자에 대해 알아보려고 한다. 먼저, 객체에서 펼침 연산자를 사용하는 간단한 코드를 살펴보자.const book = { title: 'Reasons and Persons', author: 'Derek Parfit'};const update = { ...book, year: 1984 };console.log(book);console.log(update);위 코드에서 ...book은 기존 객체의 모든 키-값 쌍을 새로운 객체로 복사한다. 이후 year: 1984와 같이 추가적인 키-값 쌍을 덧붙일 수 있다. 결과적으로 book 객체는 변경되지 않고, 새로운 객체 update가 생성된다. 동일한 키가 있을 때객체 펼침 연산자의 중요한 특징 중 하나는 동일한 키가 여러 번 선언될.. [JavaScript] 객체 복사와 Object.assign의 활용 객체의 변경과 사이드 이펙트 배열과 마찬가지로 객체도 필드를 추가하거나 설정할 때 **사이드 이펙트(Side Effect)**가 발생할 수 있다. 특히, 기존 데이터를 유지하면서 새로운 필드를 추가하거나 기본값으로 채우려면 신중한 처리가 필요하다.예를 들어, 아래와 같은 기본값 객체와 새로 추가할 데이터를 가진 객체를 보자.const defaults = { author: '', title: '', year: 2017, rating: null};const book = { author: 'Joe Morgan', title: 'Simplifying JavaScript'}; 기존 방식: Object.keys와 반복문 활용defaults와 book을 병합하려면 아래와 같은 방식으로 각 필드를 처리할 .. [JavaScript] 정적인 키-값 탐색 배열과 객체의 차이점 이전 포스팅에서 배열에 대해 살펴봤다. 배열은 구조적으로 유사하고, 다른 데이터와 교체가 자유로운 경우 사용하기 적합한 컬렉션이다. 그러나 배열만으로는 표현하기 어려운 상황도 존재한다.예를 들어, 다음은 색상 코드를 저장한 배열이다.const colors = ['#d10202', '#19d836', '#0e33d8'];이 배열에서는 각각의 색상 코드가 어떤 색상을 의미하는지 명확히 알기 어렵다. 이러한 경우, 키-값 형태의 컬렉션을 사용하는 것이 더 적합하다. 객체: 키-값 형태의 정적인 데이터 다루기 객체는 변화가 적고 구조화된 데이터를 다룰 때 유용하다. 다음은 색상 코드와 색상 이름을 키-값 쌍으로 표현한 예다. const color = { red: '#d10202', .. 이전 1 2 다음 목록 더보기
