[JS] Array(배열) / arguments(유사 배열)

📌 Array (배열)

: 순서(index)가 있는 값의 집합

• 배열은 특별한 종류의 객체로, [대괄호]를 사용해 요소에 접근하는 방식은 객체 문법을 사용한 것이다.
• 배열은 키(key)가 숫자(index)라는 점이 다르다. 👉 즉, 본질은 객체

 

 

배열 선언

let friends = '한,재,정,유,윤,민,재,신'.split(',');
console.log(friends);
// ['한', '재', '정', '유', '윤', '민', '재', '신']


let friends = ['한,재,정,유,윤,민,재,신'];
console.log(friends); 
// ['한,재,정,유,윤,민,재,신']

 

 

 

배열 요소의 총 갯수

let friends = '한,재,정,유,윤,민,재,신'.split(',');

console.log(friends.length); // 8

 

 

 

배열 비우기

let friends = '한,재,정,유,윤,민,재,신'.split(',');

console.log(friends.length = 0); // 0

 

 

 

배열 요소 변경

let friends = '한,재,정,유,윤,민,재,신'.split(',');

friends[1] = '비바'
console.log(friends);
// ['한', '비바', '정', '유', '윤', '민', '재', '신']

 

 

 

Array(길이)

: 길이만큼의 빈 배열이 생김

Array(10);
// (10) [empty × 10]

 

 

 

Array(길이).fill(내용)
: 해당 길이의 빈 배열을 만들어서 내용을 채울 수 있음

Array(10).fill(null);
// (10) [null, null, null, null, null, null, null, null, null, null]

 

 

예시

const pow = (numeric, powerCount) => {

  return Array(powerCount).fill(null).reduce((acc) => {
    return acc *= numeric
  }, 1)
  // 값을 비워두기 위해 fill(null)을 함
  // reduce를 통해 값을 축적 => 거듭제곱
  // 그냥 Array(powerCount)을 하면 배열을 생성하긴 하는데 비어있는거고, 요소가 정의되지 않아서 reduce 메소드를 바로 사용할 수 없기 때문에 null로 채워줌
}

 

---

 

다차원 배열

: 행렬을 저장하는 용도

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][1]); // 5

 

 

 

큐(queue)  vs  스택(stack)

 

큐 

• FIFO (선입선출: 먼저 들어온 것이 먼저 나간다)
  ← queue ←

 

스택 

• LIFO (후입선출: 나중에 들어온 것이 먼저 나간다)
  ↓ stack ↑

 

---

📌 arguments 객체(유사 배열)

arguments

 

: 함수에 전달된 인자들을 배열과 유사한 형태로 모아놓은 객체

• 함수 실행 시 자동으로 생성
  - 매개변수로 따로 정의하지 않아도 함수 내부에서 `arguments`로 사용 가능 ⭕
• index, length 프로퍼티 ⭕
• 배열 메서드 사용 ❌
  👉 진짜 배열이 아니기 때문에 배열로 변환해서 사용
• 화살표 함수에서는 arguments(유사배열) 사용 불가능 ❌

function printArguments() {
  console.log('All arguments:', arguments); // [ 'apple', 'banana', 'cherry' ]
  
  console.log('First argument:', arguments[0]); // apple
  
  console.log('Number of arguments:', arguments.length); // 3
}

printArguments('apple', 'banana', 'cherry');

 

 

 

 

✨ arguments(유사 배열 객체)를 배열로 변환하는 방법

 

1. Array.from(arguments)

// 유사 배열 객체 생성
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

// Array.from()을 사용하여 배열로 변환
const array = Array.from(arrayLike);

console.log(array); // 출력: ['a', 'b', 'c']
console.log(Array.isArray(array)); // 출력: true (배열이 됨)

 

 

 

2. 전개 구문 [...arguments]

// 유사 배열 객체 생성
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

// 전개 연산자를 사용하여 배열로 변환
const array = [...Array(arrayLike.length).keys()].map(i => arrayLike[i]);

console.log(array); // 출력: ['a', 'b', 'c']
console.log(Array.isArray(array)); // 출력: true

 

 

 

3. __proto__

: 조상을 찾아 태생을 배열로 바꾸기 

  arguments.__proto__ = Array.prototype
  
  console.log(arguments); // 배열이 됨

let calculateTotal = function () {

  let total = 0;

  // 배열의 능력을 일회성으로 빌려쓴거
  // Array.prototype.forEach.call(arguments, function (item) {
  //   total += item
  // })

  // 태생을 배열로 바꾸기
  arguments.__proto__ = Array.prototype
  console.log(arguments);

  return total;
};


const result = calculateTotal(1000, 5000, 2500, 4000, 2300);

 

 

 

 

✨ 화살표 함수에서 arguments를 사용하는 방법

* 화살표 함수에서는 arguments(유사배열) 사용 ❌

 

👉 나머지 매개변수(rest parameter)로 일반 배열로 만든 후 사용

const example = (...args) => {
// 나머지 매개변수(...)를 사용하여 인수를 배열로 수집

  console.log(args.map(x => x * 2)); 
  // 배열의 모든 요소를 두 배로 변환
};

example(1, 2, 3, 4, 5); // [2, 4, 6, 8, 10]

 

 

 

예제 1

function _sum() {
  // 유사 배열임(진짜 배열이 아님)
  console.log(Array.isArray(arguments), arguments.length); // [ false, 5 ] [ false, 3 ]

  // 유사 배열 -> (진짜) 배열로 바꿈
  const numbers = Array.from(arguments);

  // 진짜 배열이 됨
  console.log(Array.isArray(numbers), numbers.length) // [ true, 5 ] [ true, 3 ]

  return numbers.reduce((result, number) => result + number, 0);
}


const sum = (...numbers) => numbers.reduce((total, number) => total + number);

// arguments
let result1_1 = _sum(2, 3, 9, 12, 105); 
let result1_2 = sum(2, 3, 9, 12, 105);

console.log(result1_1); // 131
console.log(result1_2); // 131
console.log(Object.is(result1_1, result1_2)); // true


let result2_1 = _sum(90, 418, -7);
let result2_2 = sum(90, 418, -7);

console.log(Object.is(result2_1, result2_2)); // true

 

 

---

 

배열

 

arguments 객체 - JavaScript | MDN