30일차 복습

배열

*엄밀히 말하자면 자바스크립트의 배열은 배열이 아니다*

배열은 크게 밀집배열과 희소배열로 나눠진다. 다른 언어들에서 우리가 흔히 사용하는 배열은 밀집배열이지만, 자바스크립트에서 배열은 희소배열이다.

 

밀집배열(협의의 배열)

1. 하나의 데이터 타입으로만 이뤄진 배열이다.

2. 메모리에 연속하여 나열된 자료구조다.

3. 요소의 추가, 삭제가 어렵다.

4. 연속적이기에 빠르다.

 

희소배열(광의의 배열)

1. 하나 이상의 자료형을 허락하는 배열이다.

2. 한 자료가 차지하는 메모리 공간이 불규칙(불연속)할 수 있다.

3. 요소의 추가 삭제가 쉽다.

4. 연속적이지 않아 느리다.

 

즉, 대다수의 경우 자바스크립트의 배열은 Key를 Index로 가진 Map 이다.

그렇기에 인덱스 값 대신 문자열을 넣어도 오류가 발생하지 않는다.

정상적으로 콘솔창에 출력되는걸 볼 수 있다

모든 경우 Map인것은 아니지만, 대다수의 경우는 map이다.

이런 식으로 key, value형식으로 배열을 만든 경우, length를 사용할 수 없다.

 

배열의 추가와 삭제

push() : 배열의 가장 뒤에 요소를 추가

pop() : 배열의 가장 뒤의 요소를 반환하고 삭제

shift() : 첫자리 삭제. 모든 요소를 뒤로 한칸씩 미루기에 느림.

unshift() : 첫자리에 추가. 모든 요소를 뒤로 한칸씩 미루기에 느림.

delete.배열[인덱스] : 배열의 인덱스 요소를 삭제한뒤, 그 자리가 비어있게 함.

 

 

 

 

배열의 함수들

1. join();

배열 사이에 입력값을 넣어서 하나의 문자열로 만든다. 만약 어떤 입력값도 받지 않는다면 자동적으로 쉼표( , )를 배열사이에 추가한 문자열 한개를 만든다.

쉼표가 포함된 하나의 문자열

2. split()

문자열을 입력값을 기준으로 잘라, 배열로 만든다. 만약 어떤 입력값도 받지 않으면 크기 1짜리 배열이 된다.

 

3. reverse()

배열의 순서를 역으로 바꾼다.

 

4. splice(a, b, c)

배열을 자른다. a는 자르기 시작하는 인덱스, b는 자르는 크기다. 자르고 남은 자리에 c 요소를 추가한다. c는 필수로 받아야 하는 파라미터가 아니며, 다수의 요소를 넣을수도 있다.

원본의 값은 잘리고 남은 값으로 변한다. 자른 배열을 return값으로 가진다.

 

5. slice(a, b)

원본을 훼손시키지 않고 배열을 자르며, 자른 값을 리턴한다. a는 자르기 시작하는 인덱스, b는 끝 인덱스 +1값이다. 

 

콜백함수를 사용하는 함수들

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),
];

앞으로 나올 함수들은 위의 배열을 예시로 들어서 설명하겠다.

 

 

6. find()

입력값으로 받은 배열의 요소를 모두 순환하여, return 값이 true가 되는지 확인하여, true면 그 값을 반환한다.

예시

{
    const result = students.find(function (student, index) {
        console.log(student, index);
        return student.score === 90;
    });
    console.log("find함수 반환값:" + result);
}

 

7.filter()

return값이 true면 그 값을 반환한다.

{
    // 입력값의 모든 요소를 하나하나 호출하여, return값이 true가 된다면 그 요소를 반환한다. 
    const result = students.filter((students) => students.enrolled);
    console.log(result);
}

화살표 함수, 한줄 함수 중괄호{} 생략, return생략을 사용했다.

 

8. map()

입력값으로 받은 요소를 return값으로 바꾼다.

{
    //     만약 콜백함수가 *2를 한다면, 배열의 모든 요소가 *2가 되어 반환된다.
    const result = students.map((students) => students.score);
    console.log(result);
}

배열의 모든 요소들을 score값 단 하나로 바꾼 것이다.

 

9. some() 과 every() 함수

return값이 true가 되는 요소가 있는지 없는지 판별. true/false로 반환된다.

some() 하나의 값만 true여도 true를 반환.

every() 모든 값이 true여야 true를 반환.

{
    // some 배열 안에 콜백함수의 return값이 true가 되는 요소가 있는지 없는지 판별.
    //      true/false 값으로 나옴
    const result = students.some((students) => students.score < 50);
    console.log(result);
    // every 배열안의 모든 요소가 return 값이 true가 되어야 true값이 나옴.
    const result2 = students.every((students) => students.score < 50);
    console.log(result);
}

 

10. reduce()

다소 어려운 함수다. 반복문 같은 성질을 가지고 있으며, 값을 계속 누적시키고 싶을때 사용한다.

순서를 분리해서 보자.

1. 두개의 파라미터(입력값)을 갖는다. 따로 첫번째 값을 지정해주지 않으면, 이 두개의 입력값은 각각 배열의 첫요소, 두번째 요소가 된다. 

2. 함수의 수행문이 수행된다.

3. return값이 첫 파라미터로 바뀐다.

4. 모든 요소가 수행될때까지 반복된다.

{
    // reduce 배열안의 모든 요소를 호출한 다음, return값을 첫번째 파라미터로 받는다.
    //        값을 계속해서 누적시킬때 사용.
    const result = students.reduce((prev, current) => {
        return prev + current.score; // prev값에 score값을 모두 더한다.
    }, 0); // 첫번째 값을 지정할 수 있다. 이경우는 0;
    console.log(result);
}

배열 끝에서부터 순화하고자 할때는 reducRight()를 사용한다.

 

11.sort()

원본이 정렬이 되지만, 자바와는 다르게 작동한다. 자바스크립트의 sort() 함수는 숫자를 넣더라도 문자열로 인식해서 받기 때문에, 21과 9를 비교시키면 첫자리만 비교한다. 그때문에 둘 중 9가 더 크다고 판단하게 된다. 이를 막기 위해서는 따로 커스텀을 해줘야 한다.

 

sort함수의 구조

1. 두개의 파라미터를 비교한다. (a와 b, a <= b라고 가정하자)

    * 만약 a>b라면 1을 리턴한다.

    * 만약 a==b라면 0을 리턴한다.

    * 만약 a<b라면 -1를 리턴한다.

 

2. 리턴값에 따라 a와 b를 정렬한다.

    * 리턴값이 1이라면 a,b 순으로 정렬한다.

    * 리턴값이 0이라면 그대로 둔다.

    * 리턴값이 -1이라면 b,a 순으로 정렬한다.

 

따라서 커스텀을 한다면 return b-a 처럼 와 같이 return값을 바꿔줘야 한다.

{
    // sort 이전값과 현재 값이 전달이 되는데, 만약 둘을 뺀 값이 마이너스- 값이라면
    // 이전값이 더 앞에 오도록 정렬이 된다.
    const result = students.map((student)=>student.score)
    .sort((a,b) => a - b ); // 오름차순 정렬.
    console.log(result);
}

이 커스텀은 기본과 똑같다고 생각할수도 있으나, a-b의 연산을 한번 해주기 때문에 문자열로 받은 파라미터 값들이 다시 숫자열로 변환된다. 여기서 볼 수 있듯이 2자리수 이상의 수를 정렬하고자 하면 반드시 커스텀해서 사용해주는 것이 좋다.