057_자바스크립트 배열 요소 하나로 정리하기(합치기) [적용] 배열의 요소를 계산하여 하나의 값으로 만들고 싶을 때 [문법] 메소드 의미 반환 배열.reduce(콜백함수, [초기화*]) 요소(좌->우)를 처리하여 하나의 값 생성 임의 지정값 배열.reduceRight(콜백함수, [초기화*]) 요소(우->좌)를 처리하여 하나의 값 생성 임의 지정값 * 생략 가능 [문법] - 콜백 함수 구문 의미 ((이전요소, 현재요소, 인덱스, 기존배열) => { /* 처리내용 */} 임의의 처리 [내용] reduce()는 배열 요소를 하나의 값으로 반환한다. 배열에 3개의 값을 넣고 합계를 구하는 샘플을 확인해 보자. // 3개의 값을 가지는 배열 const priceList = [100, 500, 900] // 합계..

056_자바스크립트 조건을 만족하는 배열 요소 추출하여 새 배열 만들기 [적용] 유저 정보 배열에서 18세 이상인 유저의 정보만을 가져와 배열을 생성하고 싶을 때 [문법] 메소드 의미 반환 배열.filter(콜백함수) 콜백 함수 조건을 만족하는 데이터의 배열 생성 배열 [문법] - 콜백 함수 구문 의미 ([요소*], [인덱스*], [기존배열*]) => 진리값 요소를 받아 진위 반환 * 생략 가능 [내용] filter()는 콜백 함수 조건에 만족하는 요소들을 새로운 배열로 생성한다. [10, 20, 30, 40] 배열에서 30 이상의 수를 가져와 배열을 생성하는 샘플을 확인해 보자 const newArray = [10, 20, 30, 40].filter((value) => value >= 30); cons..

055_자바스크립트 배열(Array) 요소 추출해서 새 배열 만들기 [적용] 요소를 추출하여 새로운 배열을 만들고 싶을 때 배열 요소 전체에 대한 처리 작업을 하고 싶을 때 ID와 이름을 가지는 객체 배열에서 ID만 가지는 배열을 새로 만들고 싶을 때 [문법] 메소드 의미 반환 배열.map(콜백함수) 콜백 함수로 새로운 배열 생성 배열 [문법] - 콜백 함수 구문 의미 ([요소*], [인덱스*], [기존배열*]) => 변경요소 요소를 받아 변경 후 반환 * 생략 가능 [내용] map()은 배열에서 요소를 추출하여 새로운 배열을 생성한다. 또한, 배열 요소를 하나씩 처리하기 때문에 배열의 루프 처리 작업에도 활용되며, 각 요소는 인수로 전달된 콜백 함수에 의해 처리된다. map()은 forEach()와 비..

054_자바스크립트 배열(Array) 요소 알파벳순 정렬하기 [적용] 대소문자 구분 없이 알파벳순으로 정렬하고 싶을 떄 [문법] 메소드 의미 반환 문자열1.localeCompare(문자열2) 문자열1과 문자열2 비교 숫자 [내용] 배열 sort()에서 문자열의 순서 비교는 localeCompare()를 사용한다. 문자 코드는 대소문자의 분류가 따로 되어 있기 때문에 유니코드 등으로 사용하면 의도한 대로 정렬할 수 없다. 예를 들어, 문자 코드를 사용한 정렬은 대문자로 시작하는 Orange가 소문자인 apple보다 앞으로 온다. localeCompare()은 대소문자 구분 없이 정렬할 수 있다. 다음 샘플을 확인해 보자 // 비교 함수 없이 정렬 const arr1 = ['grape', 'Orange', ..

053_자바스크립트 배열(Array) 요소 정렬하기 [적용 1] - 배열 요소 역순 정렬하기 배열 요소를 역순으로 정렬하고 싶을 때 [문법] 메소드 의미 반환 배열.reverse() 배열을 역순으로 정렬 배열 [내용] reverse()는 요소를 역순으로 정렬한다. const array1 = [1, 3, 5]; array1. reverse(); console.log(array1); // 결과: [5, 3, 1] [적용 2] - 배열 요소 정렬 방법 지정하기 배열 요소를 오름차순/내림차순으로 정렬하고 싶을 때 [문법] 메소드 의미 반환 배열.sort([비교함수*]) 배열을 비교 함수로 정려하기 배열 * 생략 가능 [내용] sort()는 비교 함수로 배열을 정렬한다. 비교 함수는 두 인수의 크기를 비교하여 정..

052_자바스크립트에서 조건을 만족하는 배열 요소(값) 가져오기 [적용] 유저 정보가 담긴 배열에서 ID를 기준으로 정보를 가져오고 싶을 때 [문법] 메소드 의미 반환 배열.find(콜백함수) 콜백 함수 조건에 맞는 첫 요소 요소 배열.findIndex(테스트함수) 콜백 함수 조건에 맞는 첫 요소의 인덱스 숫자 [콜백함수 문법] 구문 의미 ([요소*], [인덱스*], [기존배열]*) => 진리값 요소를 확인하고 진리값을 반환 [내용] find()는 배열에서 조건을 만족하는 첫 요소를 가져온다. const myArray = ['곰', '사자', '여우', '원숭이']; // 배열에서 '사자'를 가져옴 const targetUser = myArray.find((element) => element === '사..

051_자바스크립트 배열(Array) 요소 검색하기(배열 값 색인) [적용] 배열 데이터의 특정 요소를 확인하고 싶을 때 [문법] 메소드 의미 반환 배열.indexOf(검색데이터, [시작위치*]) 요소의 인덱스 위치 검색하기 숫자 배열.lastIndexOf(검색데이터, [시작위치*]) 끝에서부터 요소 위치 검색하기 숫자 배열.includes(검색데이터, [시작위치]*) 요소의 포함여부 확인하기 진리값 [내용] 배열 내 요소 데이터의 검색이 가능하다. indexOf()는 배열 내에서 검색 데이터가 처음 발견되는 위치(인덱스)를 반환하고, lastIndexOf()는 마지막 위치(인덱스)를 반환한다. 인덱스는 0부터 시작한다. 예를 들어 첫 번째 요소의 인덱스는 0이며, 다섯 번째 인덱스의 경우 인덱스 값은 ..

050_자바스크립트 배열(Array) 결합하기(합치기), 문자열 만들기 [적용] 여러개의 배열을 하나로 결합하고 싶을 때 배열 내 요소의 문자 데이터를 결합하고 싶을 때 [문법] 구문 의미 배열1.concat(배열2, 배열3, ...) 배열1에 배열2, 배열3을 결합 [...배열1, ...배열2, ...배열3] 배열1에 배열2, 배열3을 결합 메소드 의미 반환 배열.join([결합문자열*]) 배열 요소를 결합해 문자열 만들기 문자열 * 생략가능 [배열 요소 결합하기] 여러 개의 배열을 하나의 배열로 결합할 수 있다. concat()을 사용해 인수의 배열을 결합하며, 결합하는 배열의 수는 제한이 없다. 인수의 배열은 결합한 후에도 삭제되지 않는다. const array1 = ['곰', '사자']; cons..

049_자바스크립트 배열(Array) 요소 부분(지정위치) 변환(삭제, 추가)하기 [적용] 배열 내 요소를 다른 요소로 변환하고 싶을 때 [문법] 메소드 의미 반환 배열.splice(위치, 추출개수, 요소1, 요소2, ...) 지정 위치 요소 추출, 요소 추가 배열 [내용] splice()는 지정한 위치의 요소를 추출하고 새로운 요소를 추가한다. 위치를 지정하여 요소를 추가하고 싶을 때 유용하다. const array1 = ['사과', '귤']; array1.splice(1, 0, '바나나'); // 인덱스 1의 위치에서 0개의 요소를 삭제하고 '바나나'를 추가함 console.log(array1); // 결과: ['사과', '바나나', '귤'] const array2 = ['사과', '귤']; arra..

048_자바스크립트 배열(Array) 요소 삭제하기 [적용] 배열 요소를 삭제하고 싶을 때 [문법] 메소드 의미 반환 배열.shift() 배열 첫 위치의 요소를 삭제 삭제된 요소 배열.pop() 배열 마지막 위치의 요소를 삭제 삭제된 요소 [내용] shift()와 pop()은 초기화 이후 배열의 요소를 삭제할 때 사용한다. 각각 배열의 첫 요소와 마지막 요소를 삭제하며, 반환값은 삭제된 요소다. const array1 = ['사과', '귤', '바나나']; const siftedValue = array1.shift(); // 첫 위치의 요소 삭제 console.log(shiftedValue); // 결과: "사과" (삭제된 요소) console.log(array1); // 결과: ["귤", "바나나"] ..