[Javascript] 배열

1. 배열(Array)은 하나의 변수에  여러개의 값 을 담기위해 사용한다.
2. 특별한 선언 방법은 없고 다음과 같이, 대괄호를 이용하여 선언한다.

let someArray = []; // 원소가 없는 배열

3. 어떠한 배열이 가지는 각 원소는 콤마(,)로 구분하여 여러개를 적을 수 있고, 대괄호와 인덱스(Index) 번호를 이용하여 접근하고 인덱스 번호는  0번 부터 시작한다.

let fruits = ['사과', '바나나', '코코넛'];
console.log(fruits[0]); // '사과'
console.log(fruits[1]); // '바나나'

4. 속성
    - length : ❗ 해당 배열의 길이(원소의 개수)이다. 배열의 길이에서 1을 뺀 값은 항상 마지막 인덱스 번호이다.

5. 단순 메서드(함수)

    - at(x) : 전달된 x값에 해당하는 인덱스의 값을 반환한다. 이는 어떠한 배열 someArray에 대해 someArray[x]하는 것과 같다.

console.log(fruits[1]); // 바나나
console.log(fruits.at(1)); // 바나나

    - concat(x) : Concatenate(이어 붙이다)의 줄임말로, 호출 대상이 되는 배열과 전달 인자인 배열 `x`를 이어 붙인 새로운 배열을 반환한다.  

let goodFoods = ['비빔밥', '약밥', '돌나물'];
let badFoods = ['햄버거', '피자', '감자 튀김'];
let foods = goodFoods.concat(badFoods);
console.log(badFoods); // ['햄버거', '피자', '감자 튀김']
console.log(goodFoods); // ['비빔밥', '약밥', '돌나물']
console.log(foods); // ['햄버거', '피자', '감자 튀김', '비빔밥', '약밥', '돌나물']

     - includes(x) : 호출 대상이 되는 배열이 전달된 x를 포함하는가의 여부를 반환한다.

badFoods; // ['햄버거', '피자', '감자 튀김']
badFoods.includes('햄버거'); // true
badFoods.includes('짜장면'); // false

      - indexOf(x) : ❗ 호출 대상이 되는 배열이 가지고 있는 원소 중 전달된 x와 일치하는 원소의 인덱스 번호를 반환한다. 일치하는 원소가 없다면 -1을 반환한다.

badFoods; // ['햄버거', '피자', '감자 튀김']
badFoods.indexOf('햄버거'); // 0
badFoods.indexOf('짜장면'); // -1
// badFoods.includes(x) 는 badFoods.indexOf(x) > -1와 같다.

    - join(x) : 호출 대상이 되는 배열이 가지고 있는 원소를 주어진 문자열 x로 이어 붙인 문자열을 반환한다. x원소가 생략될 경우 쉼표(,)로 인식한다. x는 각 원소 사이에 들어가며 첫번째 원소의 앞이나 마지막 원소의 뒤에 삽입되지 않는다.

badFoods; // ['햄버거', '피자', '감자 튀김']
badFoods.join('랑 ') + '주세요';
// 햄버거랑 피자랑 감자 튀김주세요

    - pop() : 호출 대상이 되는 배열이 가지고 있는 원소 중 마지막 원소를 반환하고 원래 배열에서  제거 한다.

badFoods; // ['햄버거', '피자', '감자 튀김']
badFoods.pop(); // '감자 튀김'
badFoods; // ['햄버거', '피자']
badFoods.pop(); // '피자'
badFoods; // ['햄버거']

    - push(x) : ❗ 호출 대상이 되는 배열 가장 마지막 자리에 새로운 원소 x를 추가한다.

badFoods; // ['햄버거', '피자', '감자 튀김']
badFoods.push('치킨');
badFoods; // ['햄버거', '피자', '감자 튀김', '치킨']

    - reverse() : 호출 대상이 되는 배열이 가지고 있는 원소들의 순서를 뒤집고 그 배열을 반환한다. 내림차순하는 것이 아닌 단순히 순서만 뒤집는다는 점에 유의한다.

let nums = [3, 1, 5, 2, 7];
let reversedNums = nums.reverse();
nums; // [7, 2, 5, 1, 3]
reversedNums; // [7, 2, 5, 1, 3]

    - shift() : 호출 대상이 되는 배열이 가지고 있는 원소 중 첫번째 원소를 반환하고 원래 배열에서  제거 한다.

badFoods; // ['햄버거', '피자', '감자 튀김']
badFoods.shift(); // '햄버거'
badFoods; // ['피자', '감자 튀김']
badFoods.shift(); // '피자'
badFoods; // ['감자 튀김']

    - slice(s, e) : 호출 대상이 되는 배열이 가지는 원소들 중 일부를 가지는 새로운 배열을 반환한다.
        - s와 e모두 전달할 경우 원본 배열이 가지는 원소의 인덱스를 기준으로 s부터 e개의 원소들을 가지는 새로운 배열을 반환한다.
        - e 생략시 s부터 끝까지의 원소를 가지는 새로운 배열을 반환한다.
        - s와 e모두 생략시 원본 배열과 동일한 원소를 가지는 새로운 배열을 반환한다.

let days = ['월', '화', '수', '목', '금', '토', '일'];
let weekdays = days.slice(0, 5);
weekdays; // ['월', '화', '수', '목', '금']

    - sort(x) : 호출 대상이 되는 배열이 가지는 원소를 오름 차순 정렬한 후 그 배열을 반환한다. 이 때 x는 정렬할 기준이되는 함수를 직접 구성할 수 있는데 여기서는 생략한다.
        - 내림차순으로 정렬 하고 싶은 경우 sort()함수 호출 후 reverse() 함수를 호출하면 된다.

let nums = [3, 5, 1, 7, 2];
let sortedNums = nums.sort();
nums; // [1, 2, 3, 5, 7]
sortedNums; // [1, 2, 3, 5, 7]

    - splice(i, r, v) : 호출 대상이 되는 배열에 새로운 값 v를 인덱스 i에 해당하는 위치에 추가한다. 이 때 추가하기 전 배열의 원소 중 인덱스 i를 가지는 원소를 포함, 이어오는 r개의 원소를 삭제한다.
        - 이때 v를 생략하면 splice함수는 원소를 삭제하기만 한다.
        - splice함수에 의해 삭제된 원소들은 새로운 배열로 반환된다.
        - splice함수에 의해 삭제된 원소가 없다면 빈 배열([])을 반환한다.

let days = ['월', '화', '수', '금', '풍', '토', '일'];
//           0     1     2     3     4    5     6
days.splice(3, 0, '목'); // []
days; // ['월', '화', '수', '목', '금', '풍', '토', '일']
days.splice(5, 1); // ['풍']
days; // ['월', '화', '수', '목', '금', '토', '일']

6. 함수를 인자로 받는 메서드(람다, Lambda)
    - every(f) : ❗ 호출 대상이 되는 배열이 가진 모든 원소가 논리값을 반환하는 주어진 함수 f에 대해 전부 참(true)인가의 여부를 반환한다.

let nums = [1, 3, 5, 7, 9];
 nums.every(x =>  x % 2 !== 0); // true
 nums.every(x =>  x < 9); // false

    - filter(f) : ❗ 호출 대상이 되는 배열이 가지는 모든 원소에 대해 논리값을 반환하는 주어진 함수 f에 대해 참인 원소만을 가지는 새로운 배열을 반환한다.

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let evenNums = nums.filter(x => x % 2 === 0);
let oddsNums = nums.filter(x => x % 2 > 0);
evenNums; // [2, 4, 6, 8]
oddNums; // [1, 3, 5, 7, 9]

    - find(f) : ❗ 호출 대상이 되는 배열이 가지는 모든 원소에 대해 논리값을 반환하는 주어진 함수 `f`에 대해 참인 첫번째 원소를 반환한다.

let nums = [2, 4, 5, 6, 7];
let foundOdd = nums.find(x => x % 2 > 0);
foundOdd; // 5

    - findIndex(f) : ❗ 호출 대상이 되는 배열이 가지는 모든 원소에 대해 논리값을 반환하는 주어진 함수 f에 대해 참인 첫번째 원소의 인덱스 번호를 반환한다. 해당하는 원소가 없으면 -1을 반환한다.

let nums = [2, 4, 5, 6, 7];
let foundOddIndex = nums.findIndex(x => x % 2 > 0);
foundOddIndex; // 2 (원소값 5의 인덱스 번호가 2임으로)

    - forEach(f) : ❗ 호출 대상이 되는 배열이 가지는 모든 원소에 대해 전달된 함수 f를 단순히 실행한다. 이때 인자인 f함수는 반환 값을 가질 필요가 없으며 forEach또한 별도로 반환하는 값이 없다.

let alphabets = ['a', 'b', 'c'];
alphabets.forEach(x => {
console.log(x);
 });
// 'a'
// 'b'
// 'c'

    - map(f) : ❗ 호출 대상이 가지는 원소 전체에 대해 전달된 함수인 인자 f의 계산 과정을 거친 새로운 배열을 반환한다.
        - 호출 대상이되는 배열과 반환되는 배열의 길이는 반드시 같다.

let names = ['apple', 'banana', 'coconut'];
let nameLengths = names.map(x => x.length);
nameLengths; // [5, 6, 7]

    - some(f) : ❗ 호출 대상이 되는 배열이 가진 모든 원소가 논리값을 반환하는 주어진 함수 f에 대해 한 개 이상이 참(true)인가의 여부를 반환한다.

let nums = [2, 4, 5, 6, 8];
nums.some(x => x % 2 > 0); // true
nums.some(x => x < 0); // false

7. 참고 링크 : [MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array)(_https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array_)

'Front > JavaScript' 카테고리의 다른 글

bindEvent  (0) 2023.08.19
spread.suspendPaint();  (0) 2023.08.19
[Javascript] 변수와 상수  (0) 2023.05.25
[Javascript] 반복문  (0) 2023.05.25
[Javascript] 데이터 타입 / 멤버  (1) 2023.05.25