Today's JavaScript

배열

배열 공부하고 코플릿 푸는 날(어제부터 한껏 겁먹었다)
오전부터 뭔가 몸이 안좋은 것 같아서 감기약 먹고 점심에 30분 잤는데
오히려 머리가 잘 돌아가구요???
페어님과 같이 배열 코플릿 푸는데 우리 무슨일이야
막히는 것 같다가도 찾아보고 얘기하면서 풀렸다
이래서 코플릿 푸나봐,,세상 뿌듯 😎🤟🏻
그래도 7번이랑 25번은 못 풀었어서 주말에 다시 풀어봐야겠다!

---

배열

배열을 왜 알아야 할까?

• 변수 하나에 여러개의 데이터를 담으려고
• 다량의 데이터를 하나에 담고 한번에 다룰 수 있다.
  
  

배열이란?

요소(element) : 배열 안에 있는 값, 순서가 있는 값
인덱스(index) : 배열 안 값의 순서로 0부터 번호를 매김
(배열의 최대 길이 : 2의 32승 - 1)

• 배열은 index(순서 정보) 를 가지고 있는 참조자료형
  (조회, 추가, 삭제를 다 할 수 있음)
  ex. arr 라는 배열의 0번째 인덱스의 값은 73

myNumber
[0]  [1]  [2]  [3]  [4]
 73   98   86   61   96

let arr = [73, 98, 86, 61, 96]; // arr 라는 변수에 배열을 담음
arr[3]; // 61;  arr 배열의 인덱스를 조회하는 방법 
arr[3] = 120; // arr 배열의 3번째 인덱스 값 120으로 변경
arr[5]; // undefined
arr[-1]; // undefined; 배열의 index는 0부터 시작
arr; // [73, 98, 86, 120, 96]

• 배열의 type 은 object
  ( typeof 를 사용하면 object 라고 나온다.)
  배열인지 아닌지 확인하기 위해서는 Array.isArray() 로 확인 가능
  isArray 는 메소드(method) 로
  인풋은 내가 검사하고 싶은 객체 뭐든 상관없는데, 결과는 true 아니면 false 가 나옴

• console.table(배열의 변수명 입력)

let arr = ['code', 'coding']
console.table(arr)

콘솔테이블에 배열을 넣으면 인덱스와 값이 보임

(index)	Value
0	'code'
1	'coding'

• Array.from()
  반복 가능한 객체 또는 유사배열 객체를 복사해 새로운 배열 객체를 반환
  두번째 인자에 맵핑할 함수를 지정할 수 있음
  주어진 배열을 복사할 때 각 요소에 지정된 함수를 실행하고 그 결과를 배열로 반환

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

function plusArr(n) {
	return n * 2;
}

let newArr = Array.from(arr, plusArr);

console.log(arr); // [1, 2, 3, 4, 5]
console.log(newArr); // [2, 4, 6, 8, 10]

• Array.of()
  인자의 개수나 데이터 타입에 관계없이 가변적인 인자를 가지는 새로운 배열로 반환

let arr = Array(3) // (3) [empty × 3]
// length: 3

let ofArr = Array.of(3) // [3]
// length: 1

---

이차원 배열

행렬을 배열로 만들때도 이렇게 만들 수
배열을 중첩시켜서 할 수 있음

let arr = [[13, 30], [73, 8], [44, 17]]; // arr 라는 변수에 배열을 담음
arr[1]; // [73, 8]; 
arr[1] [0]; // 73; arr 배열의 1번째 인덱스 값의 0번째 인덱스 값
arr[3]; // undefined
arr.length; // 3; arr 배열에 3개의 값이 들어있어 길이가 3

---

배열 내장 메서드

배열은 내장 메서드를 가지고 있음

• 배열에 사용할 수 있도록 자동으로 생성되어 있는 함수
• dot을 이용해서 변수 가 가지고 있는 속성(property) 에 접근했는데 그 속성(property) 이 함수 라면 그것을 명령(method 메서드) 라고 함.
  명령을 실행할 때는, 함수를 실행하듯 괄호를 열고 닫는 형태로 실행
  메서드들 참고링크
  
  
  

배열의 길이를 알 수 있는 메서드

.length; : 배열이 가지고 있는 길이를 알 수 있음

• 배열은 요소(element) 의 개수 로 배열의 길이를 나타내는 length 속성(property)를 갖는다.

let arr = [73, 98, 86, 61, 96];
arr.length; // 5; arr 배열에 5개의 값이 들어있어 길이가 5

• 빈 배열인지 확인하는 방법은?
  (빈 배열은 falsy 한 값)

arr.length === 0 // true 이면 빈 배열
!arr.length // ture 이면 빈 배열

arr === [] // false
// arr과 임의의 배열 []은 다른 것을 참조하고 있기 때문에
// 이걸로 빈배열인지 확인하는게 아님

원본 배열을 변경하는 내장 메서드(Mutable Method)

대표적인 내장메서드 : push, pop, unshift, shift, splice

• .push() : 요소의 맨 뒤에 원하는 요소를 추가하고, 변경 된 배열의 길이를 리턴
  괄호 안에 추가할 요소를 넣는다.

let arr = [73, 98, 86, 61];
console.log(arr.push(96)); // 5;
// arr 배열 끝에 96이라는 요소 추가하고 변경 된 arr 배열의 길이를 리턴
myNumber; // [73, 98, 86, 61, 96]

• .unshift() : 요소의 맨 앞에 요소를 추가하고, 변경 된 배열의 길이를 리턴
  괄호 안에 추가할 요소를 넣는다.
  unshift는 길이가 짧은 배열에서만 간단하게만 쓰는게 좋음!

let arr = [73, 98, 86, 61, 96];
console.log(arr.unshift(27)); // 6;
// arr 배열 맨 앞에 27이라는 요소 추가하고 변경 된 arr 배열의 길이를 리턴
arr; // [27, 73, 98, 86, 61, 96]

• .pop() : 맨 뒤에 요소를 삭제하고 제거된 요소들을 리턴

let arr = [27, 73, 98, 86, 61, 96];
console.log(arr.pop()); // 96;
// arr 배열 끝에 96이라는 요소를 삭제 하고 삭제한 요소 96을 리턴
arr; // [27, 73, 98, 86, 61]

• .shift() : 맨 앞에 요소를 삭제하고 제거된 요소들을 리턴
  shift는 길이가 짧은 배열에서만 간단하게만 쓰는게 좋음!
  인덱스가 틀어지는 문제가 발생해서 시간지연 발생할 경우가 초래
  (링크드리스트 이용한 큐 구현-> 코딩테스트때 좋음 예시)

let arr = [27, 73, 98, 86, 61];
console.log(arr.shift()); // 27;
// arr 배열 맨 앞에 27이라는 요소를 삭제 하고 삭제한 요소 27을 리턴
arr; // [73, 98, 86, 61]

• .splice(x, y, z) : 배열에서 특정 범위를 삭제하거나 새로운 요소을 추가하고 삭제한 요소를 리턴
  x : 인덱스를 가리키는 값
  y : 삭제할 요소의 갯수
  z : 만약 추가할 요소가 있따면 추가(없어도 됨)

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
console.log(arr.splice(5, 3)); // 5, 6. 7;
// arr 배열에서 5번째 인덱스부터 3개의 삭제한 요소들을 리턴
arr; // [0, 1, 2, 3, 4, 8, 9, 10, 11]

console.log(arr.splice(5, 0, -5, -6, -7)); // [];
// arr 배열에서 5번째 인덱스부터 0개의 요소를 삭제 후 -5, -6, -7을 추가하며, 
// 삭제된 요소가 없으니 빈배열을 리턴
arr; // [0, 1, 2, 3, 4, -5, -6, -7, 8, 9, 10, 11]

console.log(arr.splice(9)); // [9, 10, 11];
// arr 배열에서 9번째 인덱스의 요소부터 뒤의 요소들을 전부 삭제하고
// 삭제한 요소들을 리턴
arr; // [0, 1, 2, 3, 4, -5, -6, -7, 8]

원본 배열을 변경하지 않는 메서드(IMMutable Method)

대표적인 내장메서드 : slice, concat, join

• .slice(x,y) : 잘라내기 보다 복사 붙여넣기로 이해하는게 더 좋음
  괄호 안에 x (복사될 시작인덱스) 에서 y(복사될 끝 인덱스 앞) 까지의 수를 입력하며
  입력 받은 x와 y 까지의 새로운 배열을 만들어 새로운 배열을 리턴

let arr = [27, 73, 98, 86, 61, 96];
console.log(arr.slice(0, 4)); // [27, 73, 98, 86];
// 0번째 27요소부터 4번째 전 86요소까지의 새로운 배열을 생성 후 리턴
console.log(arr.slice()); // [27, 73, 98, 86, 61, 96];
// 전체를 복사하고 싶으면 아무것도 넣지않으면 됨
console.log(arr.slice(-2)); // [61, 96]; arr.length-2 와 똑같음
// arr 배열에서 뒤에서 2개의 요소를 자른 새로운 배열을 생성 후 리턴

let arr1 = arr.slice();
arr; // [27, 73, 98, 86, 61, 96];
arr; // [27, 73, 98, 86, 61, 96];

• .concat() : 배열 맨 끝에 요소를 추가한 배열을 새로 생성 후 리턴
  괄호 안에 추가할 요소를 넣는다.

let arr = [27, 73, 98, 86, 61, 96];
console.log(arr.concat(3)); // [27, 73, 98, 86, 61, 96, 3];
// arr에 요소 맨끝에 3요소를 추가 한 새로운 배열을 생성 후 리턴
arr;  // [27, 73, 98, 86, 61, 96];

let arr2 = arr.concat(3);
arr; // [27, 73, 98, 86, 61, 96];
arr2; // [27, 73, 98, 86, 61, 96, 3];

• .join() : 배열의 모든 값들을 연결한 문자를 리턴
  각각의 요소들 사이에 () 안에 파라미터로 입력된 구분자(separator)가 들어가게 됨.

let arr = ['apple', 'banana', 'melon'];

console.log(arr.join()); // apple,banana,melon
// 아무것도 입력하지 않으면 default로 ','가 들어간 문자열로 출력
console.log(arr.join('-')); // apple-banana-melon
// 파라미터로 '-'가 전달되어서 - 로 연결된 문자열 출력
console.log(arr.join('')); // applebanana melon
// 비어있는 파라미터로 구분자 없이 연결된 문자열 출력

그 외의 메서드

• .indexOf()
  배열 안에 인덱스 정보와 존재유무를 파악할 수 있음(includes 보다 범용성이 높음)
  배열 안에 엘리먼트가 몇번째에 존재하는지 알고싶다면?
  찾고자 하는 엘리먼트가 배열에 있는지 알고싶다면?
  배열 안에 특정 엘리먼트가 있는지 없는지 확인할 때
  존재 여부를 확인 하기 위해서는 -1만 아니면 됨

let word = ['kim', 'park', 'lee'];
word.indexOf('part'); // 1; 찾고자 하는 엘리먼트의 인덱스
word.indexOf('lee'); // 2
word.indexOf('없는단어') // -1; 찾고자 하는 엘리먼트가 없다면 나오는 인덱스

// 'kim' 이라는 엘리먼트가 word 배열에 있다면 -1 이 아니라 true
word.indexOf('kim') !== -1 // ture;

// '없는단어' 이라는 엘리먼트가 word 배열에 없다면 -1 이니까 false
word.indexOf('없는단어') !== -1 // false;

// 이걸 이용해서 유틸리티 함수를 만들 수 있음
// hasElement(배열, 찾으려는엘리먼트) ; true or false
// 특정한 배열에 찾고자 하는 어떤 엘리먼트가 있는지 없는지를 true 나 false 로 반환해주는 애
function hasElement(arr, element) {
  return arr.indexOf(element) !== -1;
}

or

function hasElement(arr, element) {
  let isPresent = arr.indexOf(element) !== -1;
  return isPresent;
}

hasElement (words, 'kim'); // true
hasElement (words, '없는것'); // false

• .split()
  string 메서드이지만 배열을 리턴. 문자열을 배열로 전환할 때 유용

let str = 'split is string method'

console.log(str.split(' '))
// 'split', 'is', 'string', 'method'
// ' ' 따옴표 안에 있는 띄어쓰기를 기준으로 구분해서 배열로 반환

console.log(str.split(''));
// 's', 'p', 'l', 'i', 't', ' ', 'i', ....
// 모든 문자열(띄어쓰기 포함)을 배열로 변환

• .includes()
  그냥 있는지 없는지 확인하기 위해서는 내장된 메소드가 있음
  자체로 boolean 값인 true, false 나옴
  그런데 브라우저 호환성에서 인터넷익스플로러에서 사용할 수 없음
  
  

• .find()
  주어진 판별함수를 만족하는 첫번째 요소의 값을 반환
  만약 반환할 값이 없으면 undefined 반환

let arr = ['hello', 'wow', 'hi', 'friend'];
let key = arr.find((a) => a.length < 4);

console.log(key) // 'wow'

• .findIndex()
  주어진 판별함수를 만족하는 첫번째 요소의 인덱스 반환
  만약 반환할 요소 없으면 -1 반환

let arr = ['hello', 'wow', 'hi', 'friend'];
let key = arr.findIndex((a) => a.length < 4);

console.log(key) // 1 // 'wow'의 index는 1

• .sort()
  배열을 정렬한 다음 정렬된 해당 배열을 반환

let arr = [4, 5, 1, 8, 10];
let str = ['f','a','t'];
let arrStr = [4, 9, 50, 5, 'f', 'ff', 'a']

arr.sort() // [1, 10, 4, 5, 8]
arr.sort((a,b) => a - b) // [1, 4, 5, 8, 10]
str.sort() // ['a', 'f', 't']
arrStr.sort() // [4, 5, 50, 9, 'd', 'f', 'ff']
arrStr.sort((a,b) => a - b) // [4, 5, 9, 50, 'd', 'f', 'ff']

• .fill()
  배열을 지정한 값으로 채워 원본 배열을 수정(필수 인자 : 채울 값)
  .fill(변경할 값, 시작 index, 끝index-1)

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

arr.fill(10) // [10, 10, 10, 10, 10]
arr.fill(10, 3) // [1, 2, 3, 10, 10]
arr.fill(10, 1, 3) // [1, 10, 10, 4, 5]

아래 배열 메서드를 더 공부해보자!

• reduce, filter, map, forEach, reverse
  forEach, reduce, map로 배열 중복 값 갯수 구하기
  filter로 배열 중복 제거해보기
  
  
  

---

배열의 반복문

배열은 순서정보(index)를 가지고 있기 때문에 반복문을 사용하기 좋은 자료형
배열의 길이와 인덱스를 활용해 배열 내부에 있는 모든 요소를 순회

for...of 의 el 은 for문의 arr[i] 와 같다 // el === arr[i]

• 배열의 모든 요소를 순회할 때는 for...of문이 더 간결하고 편리
• 반복문 내부에서 index를 사용해야 할 때는 for...of문 불편

for문

가장 기본적인 반복문으로 배열의 값을 출력

ex. 반복문을 이용해 배열의 요소(element)를 한번씩 출력하려면?
배열 arr의 n번째 인덱스를 출력하자

console.log(arr[i])

조건

• 숫자(i)는 0부터 시작; let i = 0
• 숫자(i)를 언제까지 반복할까?
  -> 배열의 길이보다 작을때까지; i < arr.length
• 숫자(i)은 1씩 증가한다; i++ (증감연산자)

let arr = [73, 98, 86, 61];
for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]);
} // 73; 98; 86; 61;

for...of

for...of 는 배열을 포함한 iterable 객체를 순회하는 반복문으로
for...of 는 배열의 element 값을 참조할 수 있음

• 배열의 모든 요소를 순회하고 싶을 때 사용
• 반복문 내부에서 index를 사용해야 할 때는 for...of문 불편

let arr = [73, 98, 86, 61];
for (let el in arr) {
	console.log(el);
} // 73; 98; 86; 61;

---