❏ Javascript - 내장 객체(built-in Object) ➋

⊹⠀𝙹𝚂

❏ Javascript - 내장 객체(built-in Object) ➋

김_코드 2022. 11. 12. 15:39

안녕하세요!

저번 시간에는 자바스크립트의 내장 객체 중 object객체와 string객체에 대해서 알아보았습니다.

그럼 이번시간에는 내장 객체 중 Number객체와 Array객체에 대해서 알아보겠습니다!

( *˘╰╯˘*)

3. Number객체

Number객체는 숫자를 다룰 때 유용한 프로퍼티와 함수를 제공하는 레퍼 객체입니다.

레퍼 객체는 원시 타입의 값을 감싸는 형태의 객체입니다. 자바스크립트에서는 정수와 실수를 따로 구분하지 않고 모든 수를 하나의 실수 하나로 표현하며 64비트 부동 소수점 수로 저장됩니다.

- toString()

숫자형 데이터를 문자형 데이터로 변환해주는 함수입니다.

let a = 123; // 숫자형 데이터
a.toString(); // 문자형 데이터
(123).toString(); //문자형 데이터

먼저 변수 a에 숫자 데이터 123을 할당합니다.

그리고 a를 typeof로 어떤 객체데이터 인지 알아봅니다.

그럼 이번엔 toString으로 숫자 데이터를 문자 데이터로 변환시켜보겠습니다.

a변수가 typeof로 어떤 객체데이터로 변환되었는지 확인해볼까요?

- toFixed()

소수점 몇 번째까지 보여줄지를 정하는 함수이며, 파라미터로 소수점 자릿수를 이용합니다.

지정된 소수점 자릿수에 대한 반올림 값을 반환합니다.

let a = 17.5366;
a.toFixed(0);
a.toFixed(4);

- parselnt()

전역 함수로서 파라미터의 수를 정수로 반환하는 함수입니다. 문자열의 시작이 숫자형이면 숫자 데이터로 반환합니다.

전역 함수는 정의 영역의 각 요소가 모든 요소에 대하여 정의되어 있도록 하는 함수를 말합니다.

parseInt("-10");
parseInt("-12");
parseInt("10");
parseInt("14.56");
parseInt("10 20 30");
parseInt("10 days");

문자열이 먼저 있는 파라미터는 어떻게 반환될까요?

- parseFloat()

전역 함수로서 부동소수점으로 반환하는 함수입니다.

parseFloat("10");
parseFloat("12.33");
parseFloat("10 20 30");
parseFloat("10 days");
parseFloat("days 10");

- Number 객체의 프로퍼티

property	설명
Number.MAX_VALUE	자바스크립트에서 다룰 수 있는 최대의 수
Number.MIN_VALUE	자바스크립트에서 다룰 수 있는 가장 작은 수
Number.POSITIVE_INFINITY	infinity
Number.NEGAITIVE_INFINITY	-infinity
Number,NaN	Not-a-Number

4. Array 객체

- toString()

배열 안의 모든 문자를 쉼표(,)를 이용해 모두 결합하여 하나의 문자열로 반환하는 함수입니다.

let fruits = ["banana", "lemon", "apple", "mango"];
console.log(fruits.toString());

- join()

배열 안의 모든 문자를 파라미터로 지정한 문자를 이용하여 모두 결합하여 하나의 문자열로 반환하는 함수입니다.

let fruits = ["banana", "lemon", "apple", "mango"];
console.log(fruits.join('&'));

- pop()

배열에서 마지막 데이터를 제거하고, 마지막 데이터를 반환하는 함수입니다.

저는 망고를 싫어하니 망고를 제거해보겠습니다.

(∩｀-´ )⊃━☆ﾟ.*･｡ﾟ

let fruits = ["banana", "lemon", "apple", "mango"];
let x = fruits.pop();

console.log(fruits);
console.log(x);

- push()

배열에 새로운 요소(데이터, 객체 등)를 추가하는 함수입니다.

그럼 망고가 없으니 키위를 fruits배열에 추가하겠습니다!

(∩｀-´ )⊃━☆ﾟ.*･｡ﾟ

let fruits = ["banana", "lemon", "apple"];
console.log(fruits.push("kiwi"));

- unshift()

배열의 맨 앞에 요소를 추가하고, 배열의 길이를 반환하는 함수입니다.

let fruits = ["banana", "lemon", "apple","kiwi"];
console.log(fruits.unshift("cherry"));

- 배열 요소 변경

배열의 요소를 변경하는 방법입니다. 해당되는 인덱스로 접근하여 새로운 요소를 할당합니다.

let fruits = ['cherry', 'banana', 'lemon', 'apple', 'kiwi'];
fruits [0] = "kiwi";

- splice()

새로운 요소를 특정 위치에 추가하는 함수입니다. 추가 시에는 기존 요소를 삭제할 수 있습니다.

각 파라미터탕 해당되는 내용이 있습니다.

let fruits = ['cherry', 'banana', 'lemon', 'apple', 'kiwi'];
fruits.splice(2, 0,"coconut","tomato");

그럼 삭제도 해볼까요??

인덱스 2번 자리에 레몬이 삭제되고 코코넛과 토마토가 들어간 것을 확인할 수 있었습니다.

- sort() , reverse()

배열의 문자형 데이터가 있는 경우 오름차순과 내림차순으로 정렬하는 함수입니다.

sort() - 오름차순

let fruits = ['cherry', 'banana', 'lemon', 'apple', 'kiwi'];
fruits.sort();
console.log(fruits);

reverse() - 내림차순

let fruits = ['cherry', 'banana', 'lemon', 'apple', 'kiwi'];
fruits.sort();
fruits.reverse();
console.log(fruits);

sort함수와 reverse함수는 배열 안의 문자형 데이터를 정렬하는 함수입니다.

만약 그대로 사용하게 된다면 어떻게 될까요?

오름차순도 아닌 마음대로 수가 섞여있습니다.

만약 숫자형 데이터를 정렬하고 싶다면 아래와 같은 정렬 함수를 사용해야 합니다.

let a = [40, -18, 25, 140, 55, 0];
a.sort(function(x, y){return x - y});
console.log(a);

정렬 함수를 사용하니 오름차순으로 정렬이 되는 것을 확인할 수 있었습니다.

- filter() ★★★

배열에서 특정 조건을 만족하는 배열의 요소만을 찾아 새로운 배열로 반환하는 함수이며, 배열을 다룰 때 가장 많이 사용하는 내장 함수입니다.

let fruits = ['cherry', 'banana', 'lemon', 'apple', 'kiwi'];
let result = fruits.filter(function(fruit)
	{return fruit.length > 4;}
);

filter함수에는 특정 조건을 체크할 callback 함수를 매개변수로 전달합니다. callback함수는 배열의 각 요소를 시험할 함수이며 시험을 통과(true)하면 요소를 그대로 유지하고, false라면 버리게 됩니다. 즉 true인 요소만을 찾아냅니다.

✎연습 예제

이번에 어느 학급에서 등급시험을 진행했습니다.

미아는 80점, 존은 98점, 밥은 76점, 샐리는 71점, 애니는 83점을 받았습니다.

75점 미만은 재시험을 봐야 하며 그럼 누가 시험에서 불합격일까요?

먼저 학급 인원과 시험 점수를 배열로 나타냅니다.

let tests = [{
    name: "mia",
    point: 80
},
{
    name: "john",
    point: 98
},
{
    name: "bob",
    point: 76
},{
    name: "selly",
    point: 71
},{
    name: "annie",
    point: 83
}
];

이번에 배운 filter함수를 사용하여 코드를 만들어 봅니다.

75점을 넘은 사람들만 출력이 되도록 합시다.

let pass = tests.filter(function(test)
{return test.point > 75;}
);

그럼 결과를 확인해볼까요?

샐리는 75점을 넘지 못했기 때문에 재시험을 봐야 합니다.

나머지 친구들의 점수는 기준값에 부합(true)했기에 출력이 되었지만 샐리의 점수는 부합되지 않았기에(false) 요소가 버려짐으로 출력되지 않았습니다.

- map()

배열 데이터가 Object형일 때, 배열에 담긴 Object를 새로운 형태의 Object로 변환해서 배열로 반환하는 함수입니다.

let userList = [{
    firstName: "mia",
    lastName: "kim",
    email: "kkk@gmail.com"
},{
    firstName: "park",
    lastName: "john",
    email: "jjj@gmail.com"
},{
    firstName: "selly",
    lastName: "lee",
    email: "lll@gmail.com"
},{
    firstName: "annie",
    lastName: "choi",
    email: "ccc@gmail.com"
}];

let userList2 = userList.map(function (user){
    return {
        fullName: user.lastName + user.firstName,
        firstName: user.firstName,
        lastName: user.lastName,
        email: user.email
    }
});

- reduce

배열에 담긴 데이터를 하나씩 순회하며 callback 함수의 실행 값을 누적하여 결과값을 반환하는 함수입니다.

let points = [40, 65, 76, 6, 26, 54];
let sum = points.reduce(function(total, currentValue){
    return total = currentValue;
}, 0);

console.log(sum);

callback 함수는 주로 2개의 매개변수를 사용하며 아래와 같은 4개의 매개변수를 가질 수 있습니다.

accumulator(누적 값)
currentValue(현재 배열의 요소)
currrntIndex(인덱스 번호)
arr(배열)

이렇게도 많은 내장 객체가 있었지만 끝이 아니라는 점입니다...

다음 시간에는 마지막으로 나머지 내장 객체들에 대해서 알아보겠습니다!

오늘도 읽어주셔서 감사합니다.

(ᵔᵕᵔ)