자바스크립트 배열 컨트롤 중급편 2/2

 

자바스크립트 배열 컨트롤 중급 편 2/2

 

 

 

Javascript 배열 함수 2/2

 

728x90

 

자바스크립트에서 배열과 관련한 함수들은 다양한 작업을 수행할 수 있도록 도와준다. 이러한 함수들을 잘 활용하여 배열을 다루는 방법에 대해 알아보자.

 

지난 글에 이어 이번 글에서 다룰 배열 관련 함수들의 목차는 다음과 같다

 

배열 관련 함수들

✔ slice() ✔ filter() ✔ every() ✔ isArray() ✔ findIndex() ✔ forEach() ✔ includes() ✔ lastIndexOf()

 

 

 

 

slice()

lice() 메서드는 배열의 일부 요소를 추출하여 새로운 배열을 반환합니다. 이 메서드는 배열의 특정 범위의 요소를 복사하여 새로운 배열을 만들어낸다.

 

주요 특징:

• 1개 또는 2개의 매개변수를 받는다.
• 첫 번째 매개변수는 추출을 시작할 인덱스를 나타낸다.
• 두 번째 매개변수는 추출을 종료할 인덱스를 나타낸다. 이 인덱스는 포함되지 않는다.
• 매개변수를 1개만 전달하면 시작 인덱스부터 배열의 끝까지 추출한다.
• 원본 배열은 변경되지 않는다.

const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];

// 인덱스 1부터 3까지 추출 (banana, cherry)
const slicedFruits1 = fruits.slice(1, 3);
console.log(slicedFruits1); // ['banana', 'cherry']

// 인덱스 2부터 끝까지 추출 (cherry, date, elderberry)
const slicedFruits2 = fruits.slice(2);
console.log(slicedFruits2); // ['cherry', 'date', 'elderberry']

// 원본 배열은 변경되지 않음
console.log(fruits); // ['apple', 'banana', 'cherry', 'date', 'elderberry']

 

활용 사례:

• 배열의 일부 요소를 복사하여 새로운 배열을 만들 때 사용
• 배열을 특정 범위로 자르거나 추출할 때 사용
• 배열의 일부를 변경하지 않고 복사본을 만들 때 사용

slice() 메서드는 배열을 다루는 데 매우 유용한 메서드이다. 원본 배열을 변경하지 않고 새로운 배열을 만들어낼 수 있어 안전하게 배열을 조작할 수 있다. 이를 통해 배열 데이터를 효과적으로 관리할 수 있다.

 

 

 

filter()

자바스크립트의 filter 메서드는 배열의 모든 요소를 대상으로 주어진 함수를 호출하여 조건을 만족하는 요소로 이루어진 새로운 배열을 반환한다.

filter 메서드는 다음과 같은 형식으로 사용된다:

 

const newArray = oldArray.filter(callback(element, index, array) {
  // 조건을 만족하는지 확인하는 로직을 작성합니다.
  // 만족하는 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
});

 

여기서 callback은 각 요소에 대해 실행되는 함수이며, element는 현재 처리 중인 요소, index는 현재 처리 중인 요소의 인덱스, array는 filter를 호출한 배열을 나타낸다. callback 함수는 true를 반환하는 경우에만 해당 요소가 새 배열에 포함된다.

예를 들어, 다음은 숫자 배열에서 짝수만 필터링하는 예제이다:

 

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
// evenNumbers는 [2, 4, 6]이 됩니다.

 

이렇게 filter 메서드를 사용하면 특정 조건에 따라 배열을 필터링할 수 있다.

 

 

 

every()

자바스크립트의 every 메서드는 배열의 모든 요소가 주어진 조건을 만족하는지를 검사하는 메서드이다. 이 메서드는 배열의 모든 요소가 주어진 조건을 만족하면 true를 반환하고, 그렇지 않으면 false를 반환한다.

every 메서드는 다음과 같은 형식으로 사용된다:

 

const isConditionSatisfied = array.every(callback(element, index, array) {
  // 조건을 만족하는지 확인하는 로직을 작성합니다.
  // 만족하는 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
});

 

여기서 callback은 각 요소에 대해 실행되는 함수이며, element는 현재 처리 중인 요소, index는 현재 처리 중인 요소의 인덱스, array는 every를 호출한 배열을 나타낸다. callback 함수는 true를 반환하는 경우에만 모든 요소가 조건을 만족한다고 간주된다.

예를 들어, 다음은 배열의 모든 요소가 양수인지 확인하는 예제이다:

 

const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every(num => num > 0);
// allPositive는 true가 됩니다.

 

이렇게 every 메서드를 사용하면 배열의 모든 요소에 대해 특정 조건을 검사할 수 있다.

 

 

 

isArray()

자바스크립트의 isArray 메서드는 주어진 값이 배열인지 아닌지를 판별하여, 그 결과를 true 또는 false로 반환하는 메서드이니다. 이 메서드는 ES5에서 도입되었으며, 배열 여부를 확인하는 데 사용된다.

isArray 메서드는 다음과 같은 형식으로 사용된다:

 

Array.isArray(value)

 

여기서 value는 배열 여부를 확인하고자 하는 값이다. 만약 value가 배열이면 true를 반환하고, 그렇지 않으면 false를 반환한다.

예를 들어, 다음은 isArray 메서드를 사용하여 배열 여부를 확인하는 예제이다:

 

const arr = [1, 2, 3];
const isArr = Array.isArray(arr);
// isArr는 true가 됩니다.

const str = 'Hello';
const isStrArr = Array.isArray(str);
// isStrArr는 false가 됩니다.

 

이렇게 isArray 메서드를 사용하면 주어진 값이 배열인지 아닌지를 간단히 확인할 수 있다.

 

 

 

 

findIndex()

자바스크립트의 findIndex() 메서드는 배열에서 주어진 조건을 만족하는 첫 번째 요소의 인덱스를 반환하는 메서드이다. 이 메서드는 ES6에서 도입되었으며, 배열의 각 요소에 대해 제공된 콜백 함수를 실행하여 조건을 확인한다.

findIndex() 메서드는 다음과 같은 형식으로 사용된다:

 

arr.findIndex(callback(element[, index[, array]])[, thisArg])

 

여기서 arr은 대상 배열이고, callback은 각 요소에 대해 실행될 콜백 함수이다. callback 함수는 세 가지 매개변수를 가질 수 있으며, 각각은 순서대로 요소 자체, 요소의 인덱스, 그리고 배열 전체를 나타냅니다. 또한, thisArg 매개변수를 통해 callback 함수 내에서 사용될 this 값을 설정할 수 있다.

예를 들어, 다음은 findIndex() 메서드를 사용하여 조건을 만족하는 요소의 인덱스를 찾는 예제이다:

 

const arr = [5, 12, 8, 130, 44];
const index = arr.findIndex(element => element > 10);
// index는 1이 됩니다. (12의 인덱스)

const fruits = ['apple', 'banana', 'mango', 'orange'];
const index2 = fruits.findIndex(fruit => fruit === 'mango');
// index2는 2가 됩니다. ('mango'의 인덱스)

const index3 = fruits.findIndex(function(fruit) {
  return fruit === this.favoriteFruit;
}, { favoriteFruit: 'banana' });
// index3는 1이 됩니다. ('banana'의 인덱스)

 

이렇게 findIndex() 메서드를 사용하면 배열에서 조건을 만족하는 첫 번째 요소의 인덱스를 간단히 찾을 수 있다. 만약 조건을 만족하는 요소가 없으면 -1을 반환한다.

 

 

 

 

forEach()

forEach() 메서드는 자바스크립트 배열 객체의 메서드로, 배열의 각 요소에 대해 주어진 콜백 함수를 한 번씩 실행한다. 이를 통해 각 요소와 해당 인덱스에 대해 원하는 작업을 수행할 수 있다. 이 메서드는 주로 배열의 각 요소에 동일한 작업을 수행하거나, 각 요소를 이용하여 다른 응용프로그램에 값을 추가할 때 유용하게 활용된다. 또한, forEach() 메서드는 원본 배열을 수정하지 않고, 각 요소에 대해 콜백 함수를 실행하므로, 새로운 값을 다른 변수에 저장해야 한다. 이를 통해 기존 배열을 변경하지 않고도 각 요소에 대해 원하는 작업을 수행할 수 있다.

 

var nums = [2, 2, 4, 6, 10, 20];
var numsUpdated = [];

function addTwo (e) {
    e += 2;
    numsUpdated.push (e);
}

nums.forEach (addTwo);
console.log (numsUpdated);
// 출력 : [4, 4, 6, 8, 12, 22]

 

원본 배열 nums의 각 요소의 값에 2를 더하여 numsUpdated 배열에 저장하였다.

 

결과화면 :

 

 

 

 

 

includes()

includes() 메서드는 특정 배열에 특정 값이 존재하는지를 검사하는 자바스크립트 배열 메서드이다. 이 메서드는 주어진 값이 배열에 존재하면 true를 반환하고, 그렇지 않으면 false를 반환한다. 따라서, 배열에 특정 값이 포함되어 있는지 여부를 확인할 때 includes() 메서드를 사용하여 간편하게 확인할 수 있다. 이를 통해 배열에 특정 값이 존재하는지 여부를 판단하고, 그에 따른 로직을 수행할 수 있다.

 

var colors = [ '검은', '파란', '노란', '녹색', '보라'];

console.log (colors.includes ( '파란'));
// 출력 : true

console.log (colors.includes ( '빨간'));
// 출력 : false

 

결과화면:

 

 

 

 

lastIndexOf()

lastIndexOf() 메서드는 indexOf()와 유사하지만, 배열에서 특정 값의 마지막 인덱스를 반환하는 자바스크립트 배열 메서드이다. 이 메서드는 배열을 끝에서부터 검색하여 주어진 값과 일치하는 가장 마지막 요소의 인덱스를 반환하며, 일치하는 값이 없을 경우 -1을 반환한다.

예를 들어, 다음과 같은 배열이 있다고 가정해 보자.

 

let fruits = ['apple', 'banana', 'orange', 'apple', 'mango'];

 

이때, 'apple'의 마지막 인덱스를 찾기 위해 lastIndexOf() 메서드를 사용할 수 있다.

 

let lastIndex = fruits.lastIndexOf('apple');
console.log(lastIndex); // 3

 

위 예제에서 'apple'은 배열 fruits에서 3번째 인덱스와 0번째 인덱스에 모두 존재하지만, lastIndexOf() 메서드는 배열을 끝에서부터 검색하여 마지막으로 일치하는 요소의 인덱스를 반환한다.

 

 

 

 

toString()

toString() 메서드는 자바스크립트의 모든 객체에서 사용할 수 있는 메서드이다.
이 메서드는 해당 객체를 문자열로 변환하여 반환한다.
객체를 문자열로 변환할 때 기본적으로 toString() 메서드가 호출된다.

 

let obj = {
  name: "John",
  age: 30
};

console.log(obj.toString()); // "[object Object]"

 

위 예제에서 obj 객체의 toString() 메서드를 호출하면 "[object Object]"라는 문자열이 반환된다.

숫자 변환

• 숫자 타입에서도 toString() 메서드를 사용할 수 있다.
• 이 경우 숫자를 문자열로 변환할 수 있다.

let num = 42;
console.log(num.toString()); // "42"

 

진수 변환

• toString() 메서드에 진수 값을 인수로 전달하면 해당 진수 값의 문자열을 반환한다.

let num = 42;
console.log(num.toString(2)); // "101010"
console.log(num.toString(16)); // "2a"

 

위 예제에서 num.toString(2)는 2진수 문자열 "101010"을, num.toString(16)은 16진수 문자열 "2a"를 반환한다.

toString() 메서드의 활용

• 객체를 문자열로 변환하여 출력하거나 다른 작업에 사용할 수 있다.
• 숫자를 문자열로 변환하여 다른 문자열과 연결하거나 특정 형식으로 출력할 때 사용할 수 있다.
• 진수 변환을 통해 숫자를 다양한 진수 형식의 문자열로 변환할 수 있다.