060_자바스크립트 배열 섞기(셔플) [적용] 게임에서 요소의 값을 섞을 때 [내용] 배열을 빠르면서도 고르게 섞기 위해서는 피셔 예이츠(Fisher Yates) 알고리즘이 사용된다. 다음의 샘플을 확인해보자. const array = [1, 2, 3, 4, 5]; const arrayLength = array.length; // 피셔 예이츠 알고리즘 for (let i = arrayLength -1; i>=0; i--) { const randomIndex = Math.floor(Math.random() * (i + 1)); [array[i], array[randomIndex]] = [array[randomIndex], array[i]]; } console.log(array); // 결과: [4, 5, ..

059_자바스크립트 배열 요소의 개별 변수에 분할 대입하기 [적용] 배열의 요소를 변경하고 싶을 때 [문법] 메소드 의미 [변수1, 변수2, 변수3] = [값1, 값2, 값3] 각 변수에 값을 대입 [내용] 좌변 배열의 각 변수에 우변 배열의 값을 대입하는 방법을 '분할 대입'이라고 한다. 다음 샘플을 확인해 보자. let a; let b; let c; [a, b, c] = [1, 2, 3] console.log(a, b, c); // 결과: 1, 2, 3 분할 대입은 다음과 같이 배열 내 값의 변경이나 요소의 위치를 변경할 수 있다. const array = ['곰', '여우']; [array[0], array[1]] = [array[1], array[0]]; console.log(array); // ..

058_자바스크립트 유사 배열 객체를 배열(Array)로 변환하기 [적용] 문자열과 유사 배열ArrayLike을 배열로 변환하고 싶을 때 반복 가능Iterable 한 객체를 배열로 변환하고 싶을 때 [문법] 구문 의미 [...변환대상] 배열로 변환 [내용] 스프레드(Spread) 연산자 (...)를 사용하면 유사 배열 객체를 배열로 변환할 수 있다. 유사 배열의 특징은 다음과 같다. length 속성으로 크기를 확인할 수 있다. 인덱스가 부여된 요소를 가진다. 샘플을 확인해보자. document.querySelectorAll(selector)는 인수 selector와 일치하는 요소 데이터를 전부 불러오지만, 반환값은 NodeListOf 객체다. length와 인덱스가 부여된 요소를 가진다. 따라서 Nod..

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이며, 다섯 번째 인덱스의 경우 인덱스 값은 ..