DAY - 15

공부 저장소·2021년 6월 24일

js 자바스크립트

WILT [ What I Learn Today ]

목록 보기

15/17

내장 객체 #3

Array 객체 #2

arr.sort(fn)

배열을 재정렬 한다.
값을 반환만 하는 것이 아닌 배열 자체를 변경한다.
인수로 함수를 받을 수 있다.

한 자릿수의 정수들

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

arr.sort();	// [1, 2, 3, 4, 5]

문자열

const arr = ["b","a","e","c","d"];

arr.sort();	// ["a", "b", "c", "d", "e"]

두 자릿수 이상의 정수들 - 올바르지 않은 사용법

const arr = [27,8,5,13];

arr.sort();	// [13, 27, 5, 8]
//정렬 시 숫자 또한 문자형으로 취급하기 때문에 가장 앞에 있는 숫자로만 정렬이 된 것.

두 자릿수 이상의 정수들 - 올바른 사용법 (오름차순)

const arr = [27,8,5,13];

arr.sort((a,b)=>{	// 함수를 인수로 받아 정렬 시 특정한 로직을 수행하도록 함.
    return a-b;
});		// [5, 8, 13, 27] - 오름차순으로 정렬된 모습
//arr.sort((a,b)=>a-b);와 동일

두 자릿수 이상의 정수들 - 올바른 사용법 (내림차순)

const arr = [27,8,5,13];

arr.sort((a,b)=>{	// 함수를 인수로 받아 정렬 시 특정한 로직을 수행하도록 함.
    return b-a;
});		// [27, 13, 8, 5] - 내림차순으로 정렬된 모습
arr.sort((a,b)=>b-a);

arr.reduce(fn)

함수를 인자로 받아 배열을 돌며 특정한 동작을 시행하여 누적하는 계산을 시행한 값을 반환한다.

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

const result = arr.reduce((prev, cur)=>{	// 해당 함수는 누적하는 값(prev), 배열을 도는 값(cur)으로 받아
    return prev + cur;	// 특정 동작(현재는 누적하여 더하기)를 시행한 값을 반환한다.
},0);	// 누적 값의 초기 값 (현재는 0)

다른 예시로 객체에서 성인 나이만 찾아서 배열 형태로 반환값을 다른 변수에 할당하는 모습)

const arr = [
    {name : "Mike", age : 15},
    {name : "Julie", age : 26},
    {name : "Sam", age : 29},
    {name : "Jake", age : 30},
    {name : "Harry", age : 10},
];

const result = arr.reduce((prev, cur)=>{
    if(cur.age>19){	// 현재 도는 위치의 .age가 19보다 크다면
        prev.push(cur.name); // 최종적으로 반환 할 배열에 삽입
    }

    return prev;	// 배열을 다 돌았다면 누적된 값을 반환
},[]);			// 초기 값은 빈 배열

// result의 값은 ["Julie", "Sam", "Jake"]

arr.reduceRight(fn)

arr.reduce()와 같지만 배열을 도는 순서가 좌측(앞)이 아닌 우측(뒤)부터라는 차이점만 존재한다.

const arr = ["요","하세","안녕"];

const result = arr.reduceRight((prev, cur)=>prev + cur,[]);

// "안녕하세요"

구조 분해 할당

우선 말 그대로 구조를 분해하여 그 값을 할당하는 것으로
객체, 배열 등을 분해하여 값을 다른 변수에 각각 할당한다.

const before = ["첫번째 값", "두번째 값", "세번째 값"];

const [after1, after2, after3] = before;
//const after1 = before[0];
//const after2 = before[1];
//const after3 = before[2]; 와 같은 로직

console.log(after1);	// "첫번째 값"
console.log(after2);	// "두번째 값"
console.log(after3);	// "세번째 값"

str.split()을 응용한 구조 분해 할당

const before = "첫번째 값-두번째 값-세번째 값";

const [after1, after2,after3] = before.split("-");
// before 문자열을 "-"을 기준으로 분해하여 after1,2,3에 구조 분해 할당

console.log(after1);	// "첫번째 값"
console.log(after2);	// "두번째 값"
console.log(after3);	// "세번째 값"

할당하는 갯수가 맞지 않을 때

위치가 맞물리지 않는 값은 undefined 값을 받는다.

const [a, b, c] = [1, 2];

console.log(a);	// 1
console.log(b);	// 2
console.log(c);	// undefined

이러한 문제는 기본 값(초기 값)을 설정 해주면 해결이 가능하다.

const [a, b, c=0] = [1, 2];

console.log(a);	// 1
console.log(b);	// 2
console.log(c);	// 0

필요하지 않은 값을 무시

할당받는 변수 명을 비워두면 해결이 가능하다.

const [a, , c] = [1, 2, 3];

console.log(a);	// 1
console.log(c);	// 3

값 서로 바꾸기

보통 두 변수 간의 값을 바꿀 때는 한 값을 잃어버리기 때문에 중간에 임시 변수를 하나 만들어 교환해야 했지만 구조 분해에서는 간단히 값 변경이 가능하다.

let a = 1;
let b = 2;

[a,b] = [b,a];

console.log(a);	// 2
console.log(b);	// 1

객체 구조 분해 할당

다른 점은 할당 받을 변수를 객체 처럼 { }로 감싸주면 된다.

const user = {
    name : "Mike",
    age : 26,
};

const {name, age} = user;

console.log(name);
console.log(age);

분해하여 할당받는 변수 명은 객체의 프로퍼티 값에 보통 맞춰야 하지만
할당받는 변수 명을 바꿀 때는 해당 문법과 같이 바꾸면 다른 변수 명에 프로퍼티의 값을 할당받을 수 있다.

const user = {
    name : "Mike",
    age : 26,
};

let {name : userName, age : userAge} = user;
//name 프로퍼티의 값을 userName 변수에 할당
//age 프로퍼티의 값을 userAge 변수에 할당

console.log(userName);	// "Mike"
console.log(userAge);	// 26

객체 구조 분해 할당 - 기본 값 주기

객체 또한 배열 처럼 구조 분해 할당 시에 기본 값(초기 값)을 정해줄 수 있다.

const user = {
    name : "Mike",
    age : 26,
};

const {name, age, gender="male"} = user;	// user 객체에 gender 위치의 세번쨰 프로퍼티 값은 존재하지 않지만 기본값("male")을 주어 분해하여 할당 되지 않아도 값을 존재한다.

console.log(name);	// "Mike"
console.log(age);	// 26
console.log(gender);	// "male"