javascript 배열 객체

javascript 데이터 실행하기

▶ 오늘은 제가 공부하면서 복습하기 위한 블로그를 써보려고 하는데요, 함께 보면서 같이 공부하면 좋으니 궁금하시다면 봐주세요!

1. find()

▶ find()는 배열(Array)에서 주어진 조건을 만족하는 첫 번째 요소를 찾아서 반환하는 JavaScript의 배열 메서드로 조건을 만족하는 요소가 없으면 undefined를 반환합니다.

{
  const numbers = [10, 20, 30, 40, 50];

  const foundNumber = numbers.find(number => number > 25);
  console.log(foundNumber); // 배열에서 25보다 큰 첫 번째 요소를 찾아서 반환하기 때문에 30이 나옴
}

▶ 위의 예시처럼 find()는 첫번째로 만족하는 요소만 반환하는데, 여기서 25보다 큰 숫자라는 조건에 맞는 건 30, 40, 50이나 첫번째가 30이기 때문에 30이 반환됩니다.

2. forEach()

▶ forEach()는 배열의 각 요소에 대해 주어진 함수를 한 번씩 실행하는 JavaScript의 배열 메서드로 이 메서드는 배열을 수정하지 않고 각 요소에 대해 반복적인 작업을 할 때 유용합니다.

{
  const numbers = [1, 2, 3, 4, 5];

  numbers.forEach(number => {
      console.log(number * 2);// 각 배열 숫자마다 *2를 하여 결과 출력
  });
}

▶ 위의 예시처럼 forEach()를 사용하면 반복적인 작업이 가능한데 결과값 출력 시 *2를 해주었기 때문에 기존 numbers의 각각의 배열값마다 *2를 한 결과값이 5번 반복적으로 반환됩니다.

3. join()

▶ join()은 배열의 모든 요소를 하나의 문자열로 합쳐서 반환하는 JavaScript의 배열 메서드로 이 메서드는 배열 요소 사이에 구분자를 넣어서 합쳐진 문자열을 생성합니다.

{
  const fruits = ['apple', 'banana', 'orange', 'grape'];

  const joinedString = fruits.join(', ');
  console.log(joinedString); // "apple, banana, orange, grape"
}

▶ 위의 예시처럼 join()은 연결시켜주는 메서드이기 때문에 ‘, ‘로 연결시켜주도록 만들어주면 배열값이 지정한대로 연결되서 반환됩니다.

4. push()

▶ push()는 배열의 끝에 하나 이상의 요소를 추가하는 JavaScript의 배열 메서드로 이 메서드를 사용하면 배열의 길이가 자동으로 증가하고, 추가된 요소가 배열의 마지막 요소가 됩니다.

{
  const fruits = ['apple', 'banana', 'orange'];

  fruits.push('grape', 'watermelon');
  console.log(fruits); // ["apple", "banana", "orange", "grape", "watermelon"]
}

▶ 위의 예시처럼 push()를 사용해주면 ()안에 쓴 배열값이 기존 배열값에 추가되어 반환됩니다.

5. slice()

▶ slice() 메서드는 배열이나 문자열의 일부분을 추출하여 새로운 배열이나 문자열을 반환하는 JavaScript의 메서드로 이 메서드는 기존 배열이나 문자열을 변경하지 않고 원하는 부분을 추출할 때 사용됩니다.
단, slice()는 배열 슬라이스의 동작 방식으로 인해 시작 인덱스는 포함되지만 종료 인덱스는 포함되지 않습니다.

{
  const fruits = ['apple', 'banana', 'orange', 'grape', 'watermelon'];

  const slicedFruits = fruits.slice(1, 4);
  console.log(slicedFruits); // 종료 인덱스는 포함되지 않아 결과값은 ["banana", "orange", "grape"]만 나옴
}

▶ 위의 예시처럼 slice(1, 4)를 입력하면 인덱스 1번부터 4번까지의 값은 반환합니다. 단 마지막 인덱스는 포함되지 않기때문에 인덱스가 4번이라 할지라도 반환되지 않게됩니다.

6. splice()

▶ splice() 메서드는 배열의 기존 요소를 제거하거나 새로운 요소를 추가하여 배열을 수정하는 JavaScript의 배열 메서드로 이 메서드는 배열을 변경하고, 제거된 요소들을 반환합니다.

{
 const fruits = ['apple', 'banana', 'orange', 'grape'];

  // 인덱스 1부터 2개의 요소를 제거하고, 그 자리에 'watermelon'과 'kiwi'를 추가
  const rstrongovedFruits = fruits.splice(1, 2, 'watermelon', 'kiwi');
  
  console.log(rstrongovedFruits); // ["banana", "orange"]
  console.log(fruits); // ["apple", "watermelon", "kiwi", "grape"]
}

▶ 위의 예시처럼 splice(1, 2, ‘문자열’, ‘문자열’)을 입력하면 인덱스 1, 2번 인덱스를 해당 문자열로 바꾸라는 의미가 되기 때문에 결과 값은 교체되어 반환됩니다.

이렇게 오늘은 제가 외우기 위해 써 본 배열 객체에 대해 알아봤는데요,
다음 블로그부터는 면접과 관련된 내용들로 가져와보도록 하겠습니다 😁!