JavaScript/배열25

• 

  [JavaScript]배열 구조 분해(Array Destructuring) 배열 구조 분해(Array Destructuring) Destructuring이라는 단어는 무언가를 파괴 또는 축소하는 것을 의미합니다. JavaScript의 구조 분해는 배열이나 객체에 할당된 데이터에서 특정 값 또는 여러 값을 추출하는 방법입니다. 배열의 요소를 가져오는 일반적인 방법은 대괄호 표기법을 사용하여 인덱스로 접근하는 것입니다. const strArray = ['One', 'Two', 'Three']; const strOne = strArray[0]; const strTwo = strArray[1]; const strThree = strArray[2]; console.log(strOne); // One console.log(strTwo); // Two console.log(strThree).. JavaScript/배열 2022. 9. 20.

• 

  [JavaScript]배열의 slice와 splice 메서드의 차이점 배열의 slice와 splice 메서드의 차이점 JavaScript의 slice() 메서드와 splice() 메서드는 배열을 자르거나 배열의 요소를 제거하는 목적으로 사용됩니다. 두 메서드는 이름과 사용 목적이 비슷하므로 동일한 역할을 수행하는 것처럼 보이지만, 몇 가지 차이점이 존재합니다. 이번 포스팅은 slice() 메서드와 splice() 메서드 사용 방법과 차이점을 소개합니다. slice 메서드 JavaScript의 Array에서 제공하는 slice() 메서드는 이름 그대로 무언가를 자르는 것을 의미합니다. 시작 위치부터 마지막 위치까지 배열의 요소를 자를 수 있으며, 원래 배열을 변경하지 않고 새로운 배열을 반환합니다. arr.slice([begin[, end]]) slice() 메서드는 두 개.. JavaScript/배열 2022. 9. 19.

• 

  [JavaScript]특정 조건을 만족하는 배열의 인덱스 가져오는 방법 특정 조건을 만족하는 배열의 인덱스 가져오는 방법 이번 포스팅은 JavaScript에서 특정 조건을 만족하는 배열의 인덱스를 가져오는 몇 가지 방법을 소개합니다. 방법 1. findIndex 메서드 가장 잘 알려져 있는 방법으로 배열의 findIndex() 메서드를 사용하는 것입니다. findIndex() 메서드의 매개 변수로 특정 조건식에 대해 Boolean 값을 반환하는 콜백 함수를 전달하면, 특정 조건에 해당하는 인덱스를 반환합니다. 다음 예제는 숫자 타입의 배열에서 10보다 큰 요소의 인덱스를 가져옵니다. const numArray = [0, 5, 15, 10]; const findIndex = numArray.findIndex((num) => num > 10); console.log(findIn.. JavaScript/배열 2022. 9. 18.

• 

  [JavaScript]배열에서 특정 조건을 만족하는 요소의 개수 구하는 방법 배열에서 특정 조건을 만족하는 요소의 개수 구하는 방법 이번 포스팅은 JavaScript 배열에서 특정 조건을 만족하는 요소의 개수를 구하는 몇 가지 방법을 소개합니다. 방법 1. 반복문 가장 심플한 방법으로 반복문을 사용하여 특정 조건을 만족하는 요소의 개수를 구할 수 있습니다. 배열의 요소 개수만큼 반복문을 순회하여 특정 조건을 만족하면 count를 증가시킵니다. 다음 예제는 숫자 타입인 배열에서 10보다 큰 요소의 개수를 구합니다. const numArray = [0, 10, 5, 20, 8, 40]; let count = 0; for(index = 0; index 10) count++; } console.l.. JavaScript/배열 2022. 9. 18.

• 

  [JavaScript]배열을 특정 길이만큼 분리하는 방법 배열을 특정 길이만큼 분리하는 방법 JavaScript에서 배열을 특정 길이만큼 분리해야 하는 상황이 존재할 수 있습니다. 예를 들어, 배열의 요소가 9개 존재하며, 특정 길이를 3으로 설정하는 경우 배열이 다음과 같이 분리되어야 합니다. // 분리 전 [0, 1, 2, 3, 4, 5, 6, 7, 8] // 분리 후 [[0, 1, 2], [3, 4, 5], [6, 7, 8]] 배열의 요소가 8개이며, 특정 길이를 3으로 설정하는 경우 배열이 다음과 같이 분리되어야 합니다. // 분리 전 [0, 1, 2, 3, 4, 5, 6, 7] // 분리 후 [[0, 1, 2], [3, 4, 5], [6, 7]] 이번 포스팅은 JavaScript에서 배열을 특정 길이만큼 분리할 수 있는 몇 가지 방법을 소개합니다. 방.. JavaScript/배열 2022. 9. 18.

• 

  [JavaScript]배열을 특정 값으로 채우는 방법 배열을 특정 값으로 채우는 방법 JavaScript에서 배열의 요소를 특정 값으로 채워야하는 경우가 있을 수 있습니다. 가장 간단한 방법은 빈 배열을 생성하고 반복문을 사용하여 특정 값을 추가하는 것입니다. const intArray = []; for (index = 0; index < 5; index++) { intArray.push(5); } console.log(intArray); [실행 결과] [5, 5, 5, 5, 5] 반복문을 사용하여 특정 값을 채우는 방법이 나쁜 방법은 아니지만, JavaScript는 배열에 특정 값을 채울 수 있도록 해주는 fill() 메서드를 제공하므로 반복문보다 심플한 소스 코드를 작성할 수 있습니다. 이번 포스팅은 JavaScript에서 배열을 특정 값으로 채울 수 .. JavaScript/배열 2022. 9. 17.

• 

  [JavaScript]배열 마지막 요소 제거하는 방법 배열 마지막 요소 제거하는 방법 이번 포스팅은 JavaScript에서 배열의 마지막 요소를 제거하는 몇 가지 방법을 소개합니다. 방법 1. pop 메서드(권장) 첫 번째 방법으로 배열에서 제공하는 pop() 메서드를 사용하여 배열의 마지막 요소를 제거할 수 있습니다. pop() 메서드는 배열의 마지막 요소를 제거하고 해당 요소를 반환합니다. 빈 배열에서 pop() 메서드를 호출하면, undefined를 반환합니다. 다음 예제는 pop() 메서드를 호출하여 문자열 배열의 마지막 요소를 제거합니다. const strArray = ['Zero', 'One', 'Two', 'Three', 'Four']; const popResult = strArray.pop(); console.log(strArray); con.. JavaScript/배열 2022. 9. 17.

• 

  [JavaScript]배열에서 특정 값 제거하는 방법 배열에서 특정 값 제거하는 방법 이번 포스팅은 JavaScript의 배열에서 특정 값 또는 특정 조건을 만족하는 요소를 제거할 수 있는 몇 가지 방법을 소개합니다. 방법 1. indexOf 메서드와 splice 메서드 첫 번째 방법으로 배열에서 제공하는 indexOf() 메서드와 splice() 메서드를 사용하여 특정 값을 제거할 수 있습니다. [특정 값 제거 방법] 순서 1. indexOf() 메서드를 호출하여 특정 값의 위치(인덱스)를 찾습니다. 순서 2. indexOf() 메서드의 반환 결과가 -1 보다 큰 경우(특정 값을 찾은 경우) splice() 메서드를 호출합니다. 순서 3. splice() 메서드를 호출하여 첫 번째 매개변수로 indexOf() 메서드의 반환 결과(특정 값의 위치)를 전달하.. JavaScript/배열 2022. 9. 17.

• 

  [JavaScript]배열 그룹화하는 방법 이번 포스팅은 객체로 구성된 배열을 그룹화하는 방법을 소개합니다. 샘플 데이터 다음은 이번 포스팅에서 예제로 사용될 샘플 데이터입니다. const fruits = [ { name: 'banana', date: '2021', price: 10000 }, { name: 'banana', date: '2022', price: 20000 }, { name: 'apple', date: '2021', price: 15000 }, { name: 'apple', date: '2022', price: 25000 }, { name: 'orange', date: '2020', price: 40000 }, { name: 'grape', date: '2020', price: 25000 } ]; fruits라는 배열에는 과일의 .. JavaScript/배열 2022. 7. 4.

• 

  [JavaScript]배열 첫 번째 요소 제거 자바스크립트(JavaScript)에서 배열의 첫 번째 요소를 제거하는 대표적인 방법으로 shift(), splice(), slice() 함수를 사용할 수 있습니다. shift 함수 shift() 함수는 인수를 가지지 않습니다. shift() 함수는 배열의 첫 번째 요소를 반환하고 해당 요소를 제거합니다. const arr = [1, 2, 3, 4, 5]; const firstItem = arr.shift(); console.log(firstItem); // 1 console.log(arr); // [2, 3, 4, 5] 빈 배열에서 shift() 함수를 호출하면 undefined를 반환하며, 배열에 요소가 존재하지 않으므로 요소가 제거되지 않습니다. const arr = []; const firstIte.. JavaScript/배열 2022. 3. 24.

• 

  [JavaScript]배열 복사 방법 JavaScript에서 기존 배열의 값을 유지하고 새로운 배열로 복사 후 값을 변경해야 하는 경우가 존재합니다. 여기서 배열을 잘못된 방법으로 복사하면 새로운 배열의 값을 변경했는데 기존 배열의 값도 변경되는 문제가 발생합니다. 다음은 잘못된 방법으로 배열을 복사 후 값을 변경하는 예제입니다. let arrA = [1, 2, 3]; let arrB = arrA; arrB[0] = 10; console.log(arrA); // [10, 2, 3] console.log(arrB); // [10, 2, 3] 배열 arrB의 0번째 위치의 값을 변경했는데 배열 arrA의 0번째 위치의 값도 변경되었습니다. 이러한 원인은 배열이 값 형식이 아닌 참조 형식이기 때문입니다. 이번 포스팅에서는 JavaScript에서 .. JavaScript/배열 2022. 1. 19.

• 

  [JavaScript]배열인지 확인하는 방법 JavaScript에서 배열을 typeof 연산자로 체크하면 object가 반환됩니다. typeof [] // 'object' typeof 연산자는 JavaScript에서 원시 타입만 체크 가능하므로 배열은 체크할 수 없습니다. 이번 포스팅에서는 JavaScript의 변수 또는 객체가 배열인지 확인하는 방법과 사용하면 안 되는 방법들을 소개합니다. 목차 Array.isArray Object.prototype.toString.call Lodash의 isArray constructor의 문제점 instanceof의 문제점 Array.isArray ECMAScript 5(ES5)에서 도입된 Array.isArray() 함수를 사용하여 배열인지 확인할 수 있습니다. 불리언 값을 반환하며, 현재 배열을 확인하는 .. JavaScript/배열 2022. 1. 3.