Array

🎲 Array

연관된 데이터들을 하나의 그룹으로 묶어서 효율적으로 데이터를 관리하기 위해 사용.

👉 배열에 저장되는 요소(elements)는 순차적(0부터 시작)으로 저장되고 고유한 index값을 갖는다.
👉 배열의 특정 element에 접근하기 위해서는 arrayValue[index]의 형식으로 한다.
👉 배열은 요소 index로 문자열(연관 배열)을 사용할 수 없으며 무조건 정수만 허용
👉 속성 접근자(점 또는 괄호 표기법으로 객체의 속성에 접근할 수 있도록 해주는 방식)를 사용해 정수 외 키에 접근할 경우, 배열 리스트의 요소가 아니라 배열 객체의 속성 변수를 설정하거나 회수해야함

❗ 연관배열
연관 배열(associative array)은 자료구조의 하나로, 키 하나와 값 하나가 연관되어 있으며 키를 통해 연관되는 값을 얻을 수 있다. 연상 배열, 결합형 배열, 맵(map), 사전(dictionary)으로 부르기도 한다.

---

🐸 Array 선언 방법

Array를 선언하는 방법 3가지 (a, b, c가 같다)

var a = new Array(1,2,3);   // a 객체의 프로토타입 생성(new 생성자)
var b = [1,2,3];            // 대괄호 안에 배열을 나열해 준다
var c = new Array();        // 생성자 객체 생성 후 push하여 요소를 넣어준다
c.push(1);    //1
c.push(2);    //2
c.push(3);    //3


// 첫번째 인자의 형식에 따른 차이
var a = new Array(5);
console.log(a);   //[undefined,undefined,undefined,undefined,undefined]
            // 값이 없는 5개의 원소를 포함한 array를 생성한다. 따옴표로 감싸줘야 함
var b = new Array('5');
console.log(b);   // string object 5를 원소로 하는 array를 생성한다. ["5"]
var c = new Array(new Number(5))
console.log(c); // number object 5를 원소로 하는 array를 생성한다. [5] 

---

🐸 Array 속성 추가 & 요소 추가

associative array(연관배열)를 자바스크립트에서는 배열이 아니라 object로 처리한다.


// 속성(property) 추가
codingeverybody = new Array();
codingeverybody['html'] = '웹문서를 만든다';
codingeverybody['css'] = 'html을 꾸며준다';
codingeverybody['javascript'] = 'html을 동적으로 제어한다';
codingeverybody['php'] = 'html을 서버측에서 동적으로 생성한다';

console.log(codingeverybody['html']);   // string, 웹문서를 만든다
console.log(codingeverybody['css']);    // string, html을 꾸며준다

// 요소 추가( = push)
codingeverybody.push(1);
codingeverybody.push(2);

console.log(codingeverybody);              // array, [1,2]
console.log(codingeverybody.length);       // number, 2
// codingeverybody는 array object이지만, 동시에 object이기도 하기 때문에 'html', 'css', 'javascript', 'php'는 object codingeverybody의 원소가 아니라 property(속성)으로 사용된다.
// 그래서 위의 코드에서 codingeverybody.length 가 2가 된다. (push로 추가된 1,2만 카운트하여 총 2   

❗ 배열에 요소를 추가하는 유일한 방법은 push 등을 통해 넣어주는 것!!! (속성 추가와 다르다)
❗ 배열의 길이(요소의 갯수)를 확인하는 방법은 .length를 활용한다.
➡ 배열의 첫번째 요소를 찾으려면 배열이름[0]
➡ 배열의 마지막 요소를 찾으려면 배열이름[배열이름.length -1]

const arr = ['first', 'second', 'third', 'forth', 'fifth']

console.log(arr[0])  // 'first'
console.log(arr[arr.length-1])  // 'fifth'
// arr[index]는 요소를 찾는다. 대괄호 안에 arr.length-1을 하면 마지막 index가 나오기 때문에
// 결국 arr[index]가 되며, 마지막 index의 요소를 찾을 수 있다


// 배열의 원소에 접근 하는 방법  >>  index활용
let a = new Array(1,2,3);
console.log(a[0]); // 1
console.log(b[1]); // 2
console.log(c[2]); // 3

---

🐸 Array 와 반복문

let arr = new Array(1,2,3);

// for 문 활용
for(let i = 0; i < arr.length; i++){
    console.log(arr[i]);    // 1, 2, 3
}
// arr의 인덱스로 i를 0부터 2까지 순차적으로 대입한 후에 arr[index]출력


// for ... of 활용
for( let el of arr ){
    console.log(el);       // 1, 2, 3
}


// forEach 활용
arr.forEach( el => console.log(el))
// 해당 배열 안에 들어있는 값마다 콜백함수를 실행하여 출력한다.
// 즉 배열의 모든 값이 콜백함수로 들어간 뒤 해당 콜백함수를 출력하기 때문에 원래 배열(arr)을 출력하는 것과 같은 결과

---

🎲 Array 메서드

✅ 배열을 결합하는 메서드

🐘 concat

👉 2개 이상의 배열을 하나의 문자열로 결합해서 return한다.
(2개 이상의 문자열을 연결하려면 concat 함수를 중첩시켜서 사용)
👉 두 문자열 사이의 연결 연산자(||)는 concat함수와 동일한 결과를 반환. (값 || 값 || 값 으로 사용)
👉 문법: array1.concat(array2);

//concat함수를 메소드로 활용하여 배열 return
let a = new Array(1,2,3);
let b = new Array(4,5,6);
let c = new Array(7,8,9);

a.concat(b,c); 
// [1,2,3,4,5,6,7,8,9]



//concat함수를 사용하여 문자열 return
let a = 'apple'
a.concat(' is fresh,' , 'good');
// apple is fresh, good



//연결 연산자(||)를 사용하여 concat과 같은 결과 return
let a = new Array(1,2,3);
let b = new Array(4,5,6);
let c = new Array(7,8,9);

a||b||c; // [1,2,3,4,5,6,7,8,9]

🐇 join

👉 배열의 원소를 결합해서 하나의 문자열로 만든다. 배열을 String으로 변환
👉 문법: array.join(separator구분자);
👉 반환: 문자열

// separator(배열의 각 요소를 구분할 구분자를 지정) 예시
let weather = ['바람', '비', '불'];

let join1 = weather.join();      // 기본 구분자. 결과값은 컴마(,)로 구분됨
// 출력결과: '바람,비,불'

let join2 = weather.join(', ');  // "컴마 띄어쓰기"로 표현 
// 출력결과: '바람, 비, 불'

let join3 = weather.join(' + '); // "띄어쓰기 플러스 띄어쓰기"로 표현 
// 출력결과: '바람 + 비 + 불'

let join4 = weather.join('');    // 공백없이 표현 
// 출력결과: '바람비불'

🐇 split

👉 문자열을 하나의 배열안에 요소로 구분해서 담는다. String을 배열로 변환
👉 문법: string.split(separator구분자);
👉 반환: 배열

// separator(문자열의 각 요소를 구분할 구분자를 지정) 예시
let weather = '바람, 비, 불';

let split1 = weather.split();      // 구분자가 없으면 전체를 한 번에 배열로 담음
// 출력결과: [ '바람, 비, 불' ]

let split2 = weather.split(' ');  // 띄어쓰기를 기준으로 쪼개서 배열에 담음
// 출력결과: [ '바람,', '비,', '불' ]

let split3 = weather.split(' + '); // 콤마를 기준으로 쪼개서 배열에 담음
// 출력결과: [ '바람', ' 비', ' 불' ]

❗ string.split( separator, limit )
➡ 괄호 안의 첫 번째 자리는 구분자를 넣어줘야 하며 필수사항이다.
➡ 두번째 자리는 쪼개어 담을 요소의 갯수를 뜻한다.

weather.split(',', 2)
// 출력결과: [ '바람', ' 비' ]
// 2번째 index 이전까지 잘라서 담는다

---

✅ 배열의 요소를 추가/제거 하는 메서드

🐈 pop / push

👉 pop
array.pop()
배열에서 마지막 원소를 제거한 후에 이를 return ( <-> shift)

👉 push
array.push()
배열에서 마지막에 원소를 추가한 후에 return ( <-> unshift)
문법 ➡ array.push ( 추가할 element1, 추가할 element2 . . . 추가할 element3 )
반환값 ➡ 원소가 추가된 이후에 배열의 원소 수(length)

pop 과 push 비교

// pop
let jobs = ['programmer', 'designer', 'teacher']

console.log(jobs);          // ['programmer', 'designer', 'teacher']
console.log(jobs.pop());    // ['teacher']
console.log(jobs);          // ['programmer', 'designer']  마지막 요소가 제거된 배열이 출력

let job1 = jobs.pop();   // jobs.pop(); 호출을 변수(job1)로 해줄 뿐
job1;          // ['teacher']



// push
let jobs = ['programmer', 'designer', 'teacher'];
let job2 = jobs.push('singer');

console.log(jobs);     // ['programmer', 'designer', 'teacher', 'singer']
console.log(job2);     // 4 (총 원소 갯수가 4개가 되었기 때문)

🐈 shift / unshift

👉 shift
array.shift()
배열에서 첫번째 원소를 제거한 후에 이를 return ( <-> pop)

👉 unshift
array.unshift()
배열에서 첫번째에 원소를 추가한 후에 return ( <-> push)
문법: array.unshift(element1, element2...element3)
반환값: 원소가 추가된 이후에 배열의 원소 수(length)

shift 와 unshift 비교

// shift
let jobs = ['programmer', 'designer', 'teacher'];
console.log(jobs.shift());   // ['programmer']
console.log(jobs);           // ['designer', 'teacher'] 

let job3 = jobs.shift();    // jobs.shift(); 호출을 변수로 해줄 뿐
console.log(job3);          // ['programmer'] 


// unshift
let jobs = ['programmer', 'designer', 'teacher'];
console.log(jobs.unshift('singer'));   // 4
console.log(jobs);                     // ['programmer', 'designer', 'teacher', 'singer']

let job4 = jobs.unshift('singer');     // jobs.unshift(); 호출을 변수(job4)로 해줄 뿐
console.log(job4);         // 4

🐈 slice

👉 배열의 특정 start index부터 특정 end index까지 잘라내는 메서드
👉 문법: array.slice(start, end)
👉 반환값: 새로운 array 출력

❗ end index는 해당 인덱스 이전까지로 범위를 제한한다.
즉, end index를 2로 지정하면, index 1까지 slice 된다. (end index 자체는 포함하지 않는다)

let jobs = ['programmer', 'designer', 'teacher', 'singer'];

jobs.slice(0,2);     // [ 'programmer', 'designer' ]
jobs.slice(1,3);     // [ 'designer', 'teacher' ]

---

✅ 배열 요소의 순서를 정렬하는 메서드

🐻 sort

👉 정렬 순서를 정의하는 함수
👉 문법: array.sort(sortfunc)
👉 반환값: array, 정렬된 배열, 자기 자신에 대한 레퍼런스 값

🪐 정렬기준

• 알파벳 순서로 배열을 정렬한다.
• 숫자의 경우 암시적으로 문자열로 형변환 하기 때문에 숫자 10이 숫자 2보다 먼저 나온다.
• sortfunc 로 비교 대상인 두개의 인자를 전달하는데, 리턴 값에 따라서 선후를 판단한다.

arr.sort( (a,b) => b-a )

let numbers = [9,8,7,6,5,4,3,2,1];
console.log(numbers.sort()); // 1,2,3,4,5,6,7,8,9 (숫자는 1부터)
console.log(numbers); 
// 출력결과 : [1,2,3,4,5,6,7,8,9] 


let numbers = [20,10,9,8,7,6,5,4,3,2,1];
console.log(numbers.sort());  
// 출력결과 : [1,10,2,20,3,4,5,6,7,8,9] 
// 암시적으로 원소를 문자로 형변환 하기 때문에 10이 1뒤에 온다.


const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// ["Dec", "Feb", "Jan", "March"]  알파벳 순으로


const array = [1, 30, 4, 21, 100000];
array.sort();
console.log(array);
// [1, 100000, 21, 30, 4]


let numbers = [4, 2, 5, 1, 3];
numbers.sort( (a, b) => a - b );
// [1, 2, 3, 4, 5]
numbers.sort( (a, b) => b - a );
// [5, 4, 3, 2, 1]
numbers.sort( (a, b) => 0 )
// [4, 2, 5, 1, 3]


let stringArray = ['Blue', 'Humpback', 'Beluga'];
let numberArray = [40, 1, 5, 200];
let numericStringArray = ['80', '9', '700'];
let mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200];

function compareNumbers(a, b) {
  return a - b;
}

console.log(stringArray.join());  // Blue,Humpback,Beluga
console.log(stringArray.sort());  // Beluga,Blue,Humpback

console.log(numberArray.join());  // 40,1,5,200
console.log(numberArray.sort());  // 1,200,40,5
console.log(numberArray.sort(compareNumbers));  // 1,5,40,200

console.log(numericStringArray.join());  // 80,9,700
console.log(numericStringArray.sort());  // 700,80,9
console.log(numericStringArray.sort(compareNumbers));  // 9,80,700

console.log(mixedNumericArray.join());  // 80,9,700,40,1,5,200
console.log(mixedNumericArray.sort());  // 1,200,40,5,700,80,9
console.log(mixedNumericArray.sort(compareNumbers));  // 1,5,9,40,80,200,700

🐻 reverse

👉 정렬 순서를 거꾸로 만드는 메서드
👉 문법: array.reverse()
👉 반환값: 기존 array가 바뀌어서 출력

let numbers = [9,8,7,6,5,4,3,2,1];
console.log(numbers.reverse()); // 1,2,3,4,5,6,7,8,9 (숫자는 1부터)
console.log(numbers); 
// 출력결과 : [1,2,3,4,5,6,7,8,9] 
// 원래 배열인 numbers의 값이 바뀌어서 출력된다. (새로운 배열을 만드는 것이 아니다)

---

✅ 배열의 요소(index)를 찾는 메서드

🐹 includes

👉 배열 내 특정 요소가 포함되어 있는지 확인하는 메서드
👉 문법: array.includes(element)
👉 반환값: true / false 로 반환

let fruits = ['apple', 'banana', 'grape', 'mango']

console.log(fruits.includes('apple'));    // true
console.log(fruits.includes('orange'));   // false

🐹 indexOf

👉 배열 내 특정 요소의 index를 반환
👉 문법: array.indexOf(element)
👉 반환값: 요소의 index값 반환

let fruits = ['apple', 'banana', 'grape', 'mango']

console.log(fruits.indexOf('apple'));    // 0
console.log(fruits.indexOf('orange'));   // -1

❗ 배열 요소에 존재하지 않는 값이면 -1 출력

🐹 lastIndexOf

👉 배열 내 특정 요소의 마지막 index를 반환
👉 문법: array.lastIndexOf(element)
👉 반환값: 마지막 요소의 index값 반환 (같은 요소가 2개 들어있을 경우, 마지막 요소의 index출력)
❗ 배열 요소에 존재하지 않는 값이면 -1 출력

let fruits = ['apple', 'banana', 'grape', 'mango', 'apple']

console.log(fruits.indexOf('apple'));    // 0
// apple 요소가 2개 있을 경우, 첫 번째 index를 출력한다
console.log(fruits.lastIndexOf('apple'));   // 4
// lastIndexOf를 사용하면 마지막 요소 또는 같은 요소 중 마지막 번째 요소의 index를 출력

❗ 기본적으로 배열내 똑같은 요소의 첫 번째 index를 출력하기 때문에 마지막 요소를 출력하고 싶으면 lastIndexOf를 사용해주면 된다

🐹 find

👉 배열 내 콜백함수를 실행해서, 조건에 만족하는 첫 번째 요소(true인 요소)를 출력
= 배열 내 콜백함수를 통해 요소 하나 하나 접근한 뒤, 요소가 true일 때 return한다
👉 문법: array.find( el => 조건)
👉 반환값: 조건에 충족한 첫 번째 요소 출력

class Student {
  constructor (name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}


const students = [
  new Student ('A', 29, true, 45),
  new Student ('B', 28, false, 80),
  new Student ('C', 30, true, 90),
  new Student ('D', 40, false, 66),
  new Student ('E', 18, true, 88),
];


// 점수가 90점 이상인 학생 찾기
const result = students.find( student => student.score===90);
console.log(result)

// 출력결과: Student {
//            name: 'C',
//            age: 30,
//            enrolled: true,
//            score: 90,
//            __proto__: Student { constructor: ƒ Student() }
//          }

🐹 filter

👉 배열 내 콜백함수를 실행해서, 조건에 만족하는 모든 요소(true인 요소)를 출력
= 배열 내 콜백함수를 통해 요소 하나 하나 접근한 뒤, 요소가 true일 때 return한다
👉 문법: array.filter( el => 조건)
👉 반환값: 조건에 충족한 모든 요소 출력

class Student {
  constructor (name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}


const students = [
  new Student ('A', 29, true, 45),
  new Student ('B', 28, false, 80),
  new Student ('C', 30, true, 90),
  new Student ('D', 40, false, 66),
  new Student ('E', 18, true, 88),
];


// 등록된 학생(enrolled === true) 모두 찾기
const result = students.filter( student => student.enrolled);
console.log(result)

// 출력결과: Student {
//            name: 'A',
//            age: 29,
//            enrolled: true,
//            score: 45,
//            __proto__: Student { constructor: ƒ Student() }
//          }
//          Student {
//            name: 'C',
//            age: 30,
//            enrolled: true,
//            score: 90,
//            __proto__: Student { constructor: ƒ Student() }
//          }
//          Student {
//            name: 'E',
//            age: 18,
//            enrolled: true,
//            score: 88,
//            __proto__: Student { constructor: ƒ Student() }
//          }

🐹 Some

👉 배열 안의 어떤 요소라도 주어진 판별 함수(콜백함수)를 통과하는지 테스트한다
조건에 하나라도 충족하면 true를 반환한다.
👉 문법: array.some ( el => 조건)
👉 반환값: true/false 반환

// 50점 이하의 학생이 있는지 없는지 테스트(있으면 true, 없으면 false)
const result = students.some( student => student.score < 50;
console.log(result)
// true

---

✅ 배열을 순회하여 return하는 메서드

🐶 map

👉 배열 내 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 콜백함수를 실행해서 조건에 부합하는 새로운 배열을 반환
👉 문법: array.map( el => 조건)
👉 반환값: 새로운 배열 return

// 학생들의 점수만 반환
const result = students.map( student => student.score)
console.log(result);
// 출력결과: [45, 80, 90, 66, 88]


// 학생들의 점수만 반환한 배열에 10씩 더해주기
const sumResult = result.map( el => el + 10)
console.log(result);
// 출력결과: [55, 90, 100, 76, 98]

🐶 forEach

👉 배열 내 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 콜백함수를 실행해서 조건에 부합하는 새로운 배열을 반환
👉 문법: array.map( el => 조건)
👉 반환값: 새로운 배열 return

const result = students.map( student => student.score)
console.log(result);
// 출력결과: [45, 80, 90, 66, 88]

🐠 reduce

👉 배열 내 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 콜백함수를 실행해서 조건에 부합하는 새로운 배열을 반환
👉 문법: array.reduce( (누적값, 현재값, index, el) => {return 결과}, 초기값 );
👉 반환값: 새로운 배열 return

// 공식
let sum = arr.reduce( (acc, cur, index, el) => { return acc + cur }, 0);
console.log(sum)



// 예시
const numArr = [1, 2, 3, 4, 5]

let result = numArr.reduce( (acc, cur, index) => {
// console.log(acc, cur, index)
// (누적 현재값 index)
// 0 1 0
// 1 2 1
// 3 3 2
// 6 4 3
// 10 5 4
	return acc + cur;
} , 0);

console.log(result)   // 15 (총 누적값 출력)



// 누적값과 현재값만 나타내는 예시
const numArr = [1, 2, 3, 4, 5]

let result = numArr.reduce( (acc, cur ) => {
// console.log(acc, cur)
// 0 1
// 1 2
// 3 3
// 6 4
// 10 5
	return acc + cur;
}, 0);

console.log(result)