array

- array(배열)

리스트를 만드는 방법. 문자열, 숫자, 불리안 등 모든 데이터타입을 배열할 수 있다. 배열된 각 아이템들은 각자의 위치(index)가 부여되고 요소 element 라고 불린다. 요소들은 서로 데이터타입이 달라도 되며, 대괄호 [] 안에서 ,로 구분된다.

배열의 인덱스는 0부터 시작한다. 인덱스를 초과하는 값을 도출하려고 하면 undefined 출력.

- 배열 안의 요소 업데이트

let groceryList = ['bread', 'tomatoes', 'milk'];
groceryList[1] = 'avocados';
//Output: ['bread', 'avocados', 'milk'];

- let 배열과 const 배열

let으로 선언된 배열은 재할당될 수 있다.

let sampleArr = [1, 2, 3];  // 출력결과 [1, 2, 3]
sampleArr = ['a string'];  // 출력결과 ['a string']

const로 선언된 배열은 새로운 배열 혹은 다른 값으로 재할당 될 수 없지만, 배열 안의 요소는 변경될 수 있다.

- length

array 내에 있는 요소의 갯수를 알고 싶을 때 이용한다.
배열이름 뒤에 속성을 붙여준다.

const objectives = ['Learn a new languages', 'Read 52 books', 'Run a marathon'];

console.log(objectives.length);  //3출력

- 다양한 메소드(method)

자바스크립트에 빌트인되어 있는 메소드를 이용하면 함수처럼 활용할 수 있다.

const chores = ['wash dishes', 'do laundry', 'take out trash'];

chores.push(1, 2);
console.log(chores); //출력 ['wash dishes', 'do laundry', 'take out trash', 1, 2 ]

• arr.push() : 배열 끝에 요소를 추가
• pop() : 배열 끝의 요소를 삭제
• unshift() : 배열 처음에 요소 추가
• shift() : 배열 처음에 요소 삭제
  ** `unshift(), shift() 는 push와 pop보다 느리다. 배열 전체 데이터가 움직여야 하기 때문이다.
• slice(n,m) : n부터 m까지 반환. 단, 본래 정의한 배열은 수정되지 않는다. 괄호안에 아무것도 안넣으면 배열이 복사된다.
• indexOf() 로 특정 문자열이 처음으로 나타나는 위치를 반환한다. .indexOf(target,fromIndex)의 경우 fromIndex에서 시작하여 target이 최초로 위치하는 인덱스를 반환한다. 만약 발견되지 않을 경우 -1 반환.
• splice(시작인덱스, 삭제할 요소 수, 요소1, 요소2,..) : 지정된 범위에서 요소 삭제하거나 추가하기, 삭제된 요소 반환하며 기존 배열은 수정됨
  요소 수가 0이면 어떠한 원소도 삭제되지 않는다. 시작인덱스 바로 앞에 새로운 값이 추가된다.
  요소는 옵션이며 인덱스와 요소 수 사이에 추가될 값이다.
• concat(arr2, arr3) : 기존 배열에 다른 배열을 합쳐서 새배열 반환, 여러 요소를 추가할 때 사용한다.
• indexOf(요소) : 해당요소가 몇번째 인덱스에 있는지 찾기, 배열안에 값이 없을경우 -1 리턴, 두번째 인수는 시작위치를 의미
• lastindexOf() : 끝에서부터 탐색, 동일한 값이 중복될 경우 뒤에 있는 인덱스 찾기
• includes() : 값이 있는지 없는지 true/false로 리턴
• split() : 문자열을 배열로 반환, 구분자를 매개변수로 넣어준다. 빈문자열을 전달하면 각 글자마다 하나씩 배열로 반환한다.
• join() : 배열을 문자열로 합쳐서 변형, 구분자를 매개변수로 넣어준다. 아무것도 전달하지 않으면 쉼표로 구분되어 합쳐진다.
• forEach(fn) : 함수를 인자로 받는다. 이 함수는 3개의 매개변수가 있는데 1. 해당 요소, 2. 인덱스, 3. 해당 배열 자체, 보통 1,2만 사용한다.
• find(fn) : 조건에 맞는 첫번째 true 값만 반환하고 끝. 만약 없으면 undefined를 반환
• findIndex(fn) : 해당 인덱스를 반환, 첫번째 true 값만 반환하고 끝. 만약 없으면 undefined를 반환
• filter(fn) : 특정 조건에 만족하는 모든 요소를 배열로 반환, 새로운 배열을 리턴한다.
• reverse() : 역순으로 재정렬
• Array.isArray() : 배열인지 확인하기, js 에서 배열은 객체에 해당되기 때문에 배열인지 확인할 필요가 있을 때 사용한다.

- map(), reduce(), sum(), every(), sort()

• map(fn)
  배열의 각 요소에 대해 실행한 콜백함수 호출을 통한 결과를 모은 새로운 배열 반환(맵핑), 배열의 각 요소를 변형한다.

const userList = [
  { name: "tom", age: 20 },
  { name: "jaen", age: 18 },
  { name: "ari", age: 30 },
];

const newUserList = userList.map((user, index) => {
  return Object.assign({}, userList, {
    // 새로운 객체 프로퍼티 생성하여 추가
    id: index + 1,
    isAdult: user.age > 19,
  });
});

console.log(newUserList);

• reduce(fn)
  이 메서드가 보통 배열을 값 하나로 줄이는 데 쓰이기 때문에 reduce라는 이름이 붙었다. 모든 요소들에 대해 체크하고 누적된 값을 출력한다.

const arr = [1, 2, 3, 4, 5];

// 배열의 모든 수 합치기, for, for of, forEach

//for
result = 0;
for (i = 0; i < arr.length; i++) {
  result += arr[i];
}
console.log(result); //15

//for of
result2 = 0;
for (let i of arr) {
  result2 += i;
}
console.log(result2); //15

//forEach
result3 = 0;
arr.forEach((i) => {
  result3 += i;
});
console.log(result3); //15

위 작업을 한번에 처리해주는 것이 reduce()이다.
인수를 함수로 받는다. (누적계산값, 현재값) => { return 계산값 };
함수 뒤에는 초기값을 넣어준다. 초기값을 쓰지 않으면 배열의 첫번째 요소가 초기값이 된다.

const arr = [1, 2, 3, 4, 5];

const result = arr.reduce((prev, cur) => {
  return prev + cur;
}, 0);

console.log(result); //15

처음에는 누산값 prev: 0(초기값은 0이므로), 현재값 cur은 1이므로 prev + cur = 1이고 누산값 prev 도 1이 된다.
한바퀴 돈다. 누산값 1에서 현재값 2가 들어와 3이된다. 계속 돌아서 3+3, 6+4, 10+5 과정을 거쳐 15가 나온다.

const arr = [
  { name: "mike", age: 30 },
  { name: "ari", age: 10 },
  { name: "non", age: 27 },
  { name: "gigi", age: 42 },
  { name: "hoingas", age: 18 },
];

//성인을 배열로 반환
const result = arr.reduce((prev, cur) => {
  if (cur.age > 19) {
    prev.push(cur.name);
  }
  return prev;
}, []); // 초기값이 빈 배열, 즉 누산값 []부터 시작한다.

console.log(result);

//나이의 합
const result2 = arr.reduce((prev, cur) => {
  return prev + cur.age;
}, 0);

console.log(result2); //127

//이름이 3글자 이상인 사람
const result3 = arr.reduce((prev, cur) => {
  if (cur.name.length === 3) {
    prev.push(cur.name);
  }
  return prev;
}, []);

console.log(result3); // 'ari', 'non'

reduce()를 통한 다양한 연산
arr.reduceRight() 은 reduce()와 기능은 동일하나 배열 우측부터 연산을 수행한다.

• sum() : 배열의 각각의 요소중에서 콜백함수 true가 리턴되는 것이 있는지 없는지 확인
• every() : 배열의 모든 요소들이 조건을 충족하는지 아닌지 확인

var array = [2, 9, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1   
array.indexOf(2, -3); // 0

• sort(fn)
  배열 재정렬, 배열 자체를 변경하니 주의한다.

const arr = [27, 8, 4, 34];
arr.sort();
console.log(arr); // [27, 34, 4, 8] , 정렬할 때 요소를 문자열로 취급


const arr = [27, 8, 4, 34];
arr.sort((a, b) => {
  // 함수를 인수로 받는다.
  console.log(a, b);
  return a - b; 
  // 음수이면 a가 작은값이므로 a를 앞으로 보낸다. 
  // 0이면 아무것도 하지 않는다.   
  // 양수이면 b가 작은값이므로 b를 앞으로 보낸다.
});

//8 27  // 8, 27, 4, 34
//4 8   // 4, 8, 27, 34
//34 4  // 자리는 바뀌지 않는다.
//34 8  // 자리는 바뀌지 않는다. 
//34 27 // 자리는 바뀌지 않는다. 

console.log(arr); //[4,8,27,34]

_.sortBy(arr)와 같은 유용한 기능을 모아놓은 Lodash 라이브를 주로 사용한다.
공식사이트 https://lodash.com/

다양한 메소드 참조
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

- 함수와 배열

함수를 통해서 배열이 바뀌었을 경우, 그 배열은 함수 밖에서도 유지된다.

const concept = ['arrays', 'can', 'be', 'mutated'];

function changeArr(arr){
  arr[3] = 'MUTATED';
};
changeArr(concept);
console.log(concept); //출력 [ 'arrays', 'can', 'be', 'MUTATED' ]


function removeElement(newArr) {
  newArr.push(2);
};
removeElement(concept);
console.log(concept);  //출력 [ 'arrays', 'can', 'be', 'MUTATED', 2 ]

- Nested Arrays(중첩된 배열)

array 안에 다른 array를 넣을 수 있다.

const numberClusters = [[1, 2], [3, 4], [5, 6]];
const target0 = numberClusters[2];
const target = numberClusters[2][1]; //인덱스 2인 요소 안에서의 인덱스 1요소 반환 
console.log(target0); // [5, 6] 반환
console.log(target); // 6 반환