[사전스터디 week3] JavaScript(2)

1. 배열이 필요한 이유와 선언하는 방법

(1) 배열이란

배열이란 여러개의 값을 순차적으로 나열한 자료구조이다. 배열은 요소들의 위치를 나타내는 인덱스와 배열의 크기를 알려주는 length프로퍼티를 갖기때문에 순차적으로 혹은 역순으로 요소에 접근할 수 있을 뿐만 아니라 특정요소를 직접 바꿀 수 있다.
위 특징들을 갖고 있는배열을 이용하면 한 배열에 많은 요소들을 저장할 수 있을 뿐만이 아니라 원하는 요소들에 쉽게 접근할 수 있기 때문에 배열이 필요하고 잘 다룰 줄 아는 것이 중요하다.

(2) 배열의 선언

• 배열 리터럴
  const arr = [1, 2, 3];
  처럼 대괄호로 배열을 선언해준다.
  
• 배열 생성자 함수 Array
  const arr = new Array(10)
  로 함수를 통해 선언할 수 있는데 소괄호 안에서 배열의 길이를 정해준다.
  다음과 같이 정의되지 않은 길이가 10인 배열이 생성된다.
  
• Array.of
  const arr = Array.of(1,2,3);
  Array.of함수의 안에 인수들을 원소로 같는 배열을 생성한다.

2. 배열의 값을 추가, 수정, 삭제하는 방법

(1) 배열의 값을 추가

• '배열.push'사용으로 배열의 맨 뒤에 원소를 추가할 수 있다.
  const arr = [1, 2];
  arr.push(4); // [1, 2, 4];
  
• '배열.unshift'사용으로 배열의 맨 앞에 원소를 추가할 수 있다.
  const arr = [1, 2, 3];
  arr.unshift(0); //[0, 1, 2, 3]
  
• 새로운 변수를 선언하여 원소를 추가하고 기존의 배열을 추가
  const arr = [5, 6];
  const Newarr = [...arr, 7, 8, 9]; const Newarr1 = [1, 2, 3, 4, ...arr];

(2) 배열의 값을 수정

• 원소의 인덱스에 직접 접근하여 값을 수정할 수 있다.
  const arr = [1, 2, 3, 4];
  arr[0] = 10;
  
  

(3) 배열의 값을 삭제

• '배열.shift()'를 사용하여 맨 앞 요소를 삭제할 수 있다.
• '배열.pop()'을 사용하여 맨 뒤 요소를 삭제할 수 있다.
• '배열.splice('지우기 시작할 요소index','지울 요소의 갯수','제거한 위치에 추가할 요소들')으로 배열을 변경할 수 있다.

  const arr = [1, 2, 3, 4, 15, 16, 17, 5, 6, 7];
  arr.splice(4, 3);
  4번째 요소부터 3개를 지움

const arr = [1, 2, 3, 14, 15, 16, 7, 8];
arr.splice(3, 3, 4, 5, 6);
3번째 요소부터 3개를 지우고 4 5 6을 추가함

arr.splice(-3) 인덱스 값을 음수로 지정하여 -3이면 뒤에서 세개를 지운다.
const arr = [1, 2, 3, 14, 15, 16, 7, 8];
arr.splice(-3);

3. 배열의 메서드의 종류와 사용법 (추가, 수정, 삭제하는 메서드 제외)(배열의 이름은 arr으로 임의지정)

(1) length

arr.length로 배열의 요소들이 몇개가 있는지를 확인할 수 있다.
반복문과 함께 사용해서 많이 활용한다.

(2) array.concat

배열이 두개 있을 때 인수로 전달된 배열을 원본배열의 마지막에 추가해서 반환한다.
'원본배열.concat(추가할 배열)'
원본배열을 변경하지 않는다. 고로 값을 추후에 쓰려면 새로운 배열에 저장해두어야 한다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const Newarr = arr1.concat(arr2);

(3) array.slice

지정한 범위의 배열을 복사해 새로운 배열로 반환한다.
'원본배열.slice('복사를 처음 시작할 index','복사를 종료할 다음 index')'
두번째 인자가 6이라면 다섯 번째 인수까지 반환한다. 처음 시작 index가 음수라면 배열의 끝에서부터 참조한다.
원본배열을 변경하지 않는다.

다음과 같이 arr[5]는 반환하지 않고 직전 요소인 arr[4]까지 반환하여 저장한다.

(4) array.filter

filter함수는 콜백함수를 만들어 반환값이 true인 요소들로만 구성된 새로운 배열을 반환한다.
filter함수는 인수로 (요소값, 인덱스, this) 이렇게 세개를 전달한다.

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

const odds= number.filter(aaa => aaa % 2 ==1 );

(5) array.reverse

함수의 배열을 거꾸로 뒤집는다. 이때 원본 배열을 변경한다.
const arr = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
arr.reverse();

(6) array.includes

특정 요소가 포함되어 있는지 확인하여 true 또는 false를 반환한다.
const arr = ['orange', 'grapes', 'apple'];

값을 반환하기 때문에 console.log로 확인해야 결과값이 보인다

arr.includes('grapes'); //true

arr[0].includes('or'); //true(원소들이 다음 문자열을 포함하고 있는지도 사용가능)

arr.includes('banana'); //false

(7) array.indexOf

원본배열에서 인수로 전달된 요소를 검색하여 첫 번째로 검색된 요소의 인덱스를 반환한다.
인수가 없으면 -1을 반환한다.
값을 반환하기 때문에 console.log로 확인해야 결과값이 보인다

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

arr.indexOf(2) // 1

arr.indexOf(5) // -1

(8) 고차 배열에 접근하는 방법

배열안에 한개 이상의 배열이 또 존재하는 배열을 고차배열이라고 한다.

const arr = [[1, 2, 3, 4], [5, 6], [7, 8, [9, 10]]]
기존에 배열에 접근하는 방식으로 접근하면
arr[0]은 [1, 2, 3, 4]
arr[1]은 [5, 6]
arr[2]는 [7, 8, [9, 10]]

다음과 같이 반환한다.
배열 안의 배열의 요소에 접근하려면
arr[0][3] 이런식으로 써주면 arr의 첫번째 배열안의 네번째 요소에 접근 할 수 있다.

(9) array.flat

flat함수는 배열 안의 배열을 평탄화 한다.
함수안의 인자는 평탄화할 깊이를 정한다.
함수의 원본배열을 바꾸지 않는다.

4. 반복문이 필요한 이유와 사용하는 방법

(1) 반복문이 필요한 이유와 사용하는 방법

같은 동작을 하는 코드를 반복문을 통해 효율적인 코드로 작성할 수 있다. 코드의 효율성이 올라가고 유지보수가 쉽다. 이러한 이유로 반복문을 적절한 때에 잘 써주는 것이 매우 중요하다.
for 반복문은 다음과 같이 쓴다.

```
for('counter의 초기상태'; '코드를 실행할 조건'; 'counter의 변화'){
	'수행할 동작'
    };
    
for(i=0; i<10; i++){
	console.log(i)
    };
``` 

밑의 코드의 결과로 0부터 9까지를 출력한다.

(2) 배열과 함께 자주사용하는 이유

배열은 인덱스와 길이 값을 갖고있다. 때문에 for문을 통해 순차적으로 요소에 접근할 수 있다.

5. 배열과 반복문 어려웠던 예제 풀이

(1) 배열 10. filter2

배열안의 객체에 접근해서 필요한 값만 따로 저장하는 문제로
다음 배열에서 level이 'hard'인 것을 찾아 따로 배열로 저장하는 문제.

let courses = [
{ level: 'easy', subject: "English" },
{ level: 'hard', subject: "Mathmatic" },
{ level: 'medium', subject: "Literature" },
{ level: 'hard', subject: "Science" },
{ level: 'medium', subject: "Socialogy" }
];

다음과 같이 배열이 있다.
새로운 배열을 만들고 filter 함수를 통해 객체의 요소에 접근하여 true값을 반환하게 해야하는데 객체의 특정 요소에 접근하는 방법이 매우 어려웠다. 우선 배열안의 객체에 먼저 접근하여 객체 안에서 또 원하는 값을 확인해야 했다.
console.log(courses[1].subject

다음과 같이 두 번째 객체의 과목은 수학임을 알 수 있다.

그럼 새로운 배열을 선언하고 원본배열에 filter함수를 사용하여 레벨이 'hard'인 객체들에만 true값을 나오게 해줘야 한다.
이 객체안에 다시 접근하기 위해서 함수의 인덱스를 받아야해서 filter함수에 인수를 두개를 써야하는데,,, 이걸 몰라서 한참을 헤맸다..

const NewArr = courses.filter((o, i) => courses[i].level == 'hard');

courses의 i번째 인덱스를 갖고 있는 객체의 level값이 'hard'이면 true를 반환하기에 새로운 배열에 저장한다.
console.log(NewArr)을 실행하면

다음과 같이 잘 나온다.

(2) 배열 12. concat의 응용

let pasta = ['tomato', 'basil', 'onion','chicken'];
let pizza = ['tomato', 'cheese', 'onion','olive','beef'];

다음과 같이 재료들이 있다. concat으로 합치고 중복된 요소들을 제거하는 문제였다.
indexOf와 filter함수를 사용하라고 친절하게 설명까지 쭉 써줬지만,, 어떤 원리로 중복이 제거되는지 이해가 잘 되지 않아서 한참 헤맸다.

일단 이해한 원리는 indexOf는 첫번째로 검색한 요소들만 index를 반환한다. 즉 모든 요소를 집어넣어서 indexOf로 확인을 해도 처음 index만 반환하기에 반환한 것들을 바로저장을 해도 두번째 요소들은 반환을 하지 않기에 저장을 할 수가 없다.
filter함수와 동시에 사용을 해서 써보면

const Arr = pasta.concat(pizza);

다음과 같이 나오고 위에서 중복을 제거해주면 된다.

const NewArr = Arr.filter((value, index)=>
arr.indexOf(value)===index);

arr[index]의 index와 arr.indexOf(value)의 값이 같으면 true를 반환하기에 filter함수에서 새로운 배열에 저장을 할 것이다.
다섯 번째 요소를 검사할 때
arr[5]의 인덱스 값은 5이다. 하지만 indexOf("tomato")가 첫번째 토마토를 반환하기에 이 값은 0이 된다. 따라서 뒤의 토마토는 새로운 배열에 저장하지 못 할 것이다.

(3) 배열 15 splice3

다음과 같은 문제다. 문제는 친절하게 배열과 예상되는 출력물까지 주어졌으나 문제를 풀어야 할 script에는 배열하나 주어지지 않고,, 어떠한 배열에나 공통으로 적용되는 함수를 짜야해서 당황스러웠다. ㅎㅎ...

우선 어떠한식으로 풀어야 할지 접근할때 이중배열을 for문으로 어떤식으로 접근하는지 친절하게 알려줬고
if문으로 만약 배열의 몇 번째 요소가 곰팡이라면 제거한다.
splice를 통해 몇번째 요소를 지울 건지 정해야 하는데 곰팡이 하나만 지울 것이므로 두번째 인수는 무조건 1
arr[1][2]를 제거하려면 arr[1].splice[2, 1]을 하면 그 요소가 바로 지워진다.

for(i = 0; i <arr.length; i++){
	for( j = 0; j < arr[i] ; j++{
    	arr[i][j] == '곰팡이' ? arr[i].splice(j, 1) : null ;
        }
        };

단순히 두개만 비교하는 것은 삼항연산자가 if문보다 편해서 삼항연산자를 많이 쓴다.
arr[i][j] == '곰팡이'이면 그 요소를 지워야한다.
arr[i].splice[j, 1]로 지울 수 있다. 원본배열을 직접 변경하므로 따로 배열을 다시 저장해줄 필요는 없다.