[javascript] 유용한 객체 메소드 / 숫자 메소드 총정리

 

---

💡
안녕하세요!
오늘은 유용한 객체 메소드들과 숫자메소드들에 대해
알아보는 시간을 가지겠습니다.
📋✍🏻

---

1. 객체 메소드
2. 숫자 메소드

---

1. 객체 메소드🌟

---

 
 
1. 객체 복제
: Object.assign()
 
user라는 객체가 있다고 칩시다. 이 객체를 복제해서 이름이 mimi인 새로운 객체를 만들고 싶어요. 이럴 때에는 어떻게 해야 할까요?
 
const mimi = Object.assign( { }, user );
 
바로 이렇게 적어주면 됩니다. Object()는 javascript에 내장되어 있는 생성자함수라고 생각하시면 됩니다. assign은 여기서 "할당하다"는 의미로 쓰이는 단어인데요, 두 번째 매개변수로 적힌 user를 첫 번째 매개변수인 중괄호 안에 할당해주게 되는 겁니다. 현재 코드에서는 빈 중괄호이기 때문에, 이전 객체 그대로 복제만 하여 만들어진 mimi객체가 생성됩니다.
 
Object.assign() 메소드는  몇 가지 변경사항을 적용하면서 객체를 복제할 수도 있습니다.
 
const
newUser = Object.assign({gender:’male’},user);
이 경우 성별 값만 있는 객체가 user객체를 병합한다고 볼 수 있습니다.
 
만약 병합하려는 key가 기존 key와 같다면, 덮어쓰면 됩니다.
 
# 2개 이상의 객체도 합칠 수 있음.
ex) Object.assign(user,info1,info2);
- user = user + info 1 + info 2
 
 
 

---

 
2. key 배열 반환 / value 배열 반환
:Object.keys() / Object/values()
 
객체에는 key값과 value값이 존재합니다.

const user = {
  name : 'mike',
  age : 30,
  gender:'male',
}

여기서 name, age, gender는 user객체의 key 값들이며, 'mike', 30, 'male'은 user객체의 value값들이죠. 그런데 특정 메소드를 사용하면 이 객체에서 key값들만 뽑아내어 배열로 만들 수도, value값들만 뽑아내어 배열로 만들 수도 있게 됩니다.
 
Object.keys(user); // [ "name", "age", "gender" ]
Object.values(user); // [“mike”,30,”male”]

이렇게 말이죠.
 
 

---

3. [key/value] 배열 반환
: Object.entries()
 
이번에는 key값과 value값을 모두 담은 배열로 반환해 보겠습니다 ! 😮
Object.entries(user) // [  [ "name", "mike", ]  ,  [ ] , ... ];


이처럼 key,value값을 가진 배열을 여러 개 담은 배열의 모습으로 반환할 수도 있습니다.
 
 
4. [key/value] 배열 -> 객체
: Object.fromEntries()
 
2번과 3번에서는 객체에서 특정 값들을 뽑아와 배열로 반환하는 법을 다뤘는데요, 이번에는 반대로 [key/value] 배열을 객체로 반환하는 방법을 알아보겠습니다. 😮💡
 
const result = Object.entries(user); 
result는 현재 user객체의 [key/value]값들을 요소로 가진 배열입니다.
이 result를 다시 객체로 반환해봅시다.
const comeback = Object.fromEntries(result);
 
이로써 comeback 객체는 user객체와 동등한 모습을 한 객체로 거듭나게 되겠죠!
 
 

---

 
2. 숫자 메소드 🌟

---

 
지금부터는 유용한 숫자 메소드들을 알아봅시다.
 
그 전에, 수학과 관련한 다양한 메소드와 속성들이 들어있는, javascript의 내장 생성자 함수인 Math를 먼저 살펴봅시다. 지금부터 제시해드리는 예시들은 모두 자주 쓰이는 것이니 암기하는 것이 좋습니다. 🌟

---

Math.pow(n,m) : 제곱 (n의 m제곱)
Math.PI : 원주율 값 나옴
Math.abs() : 절댓값 나옴
Math.ceil() : 올림
Math.floor() : 내림
Math.round() : 반올림
Math.random() : 0에서 1 사이 무작위 숫자 생성
Math.max() : 최대  //  Math.max(1,2,3,4,5)=5;
Math.min() : 최소
Math.sqrt() : 제곱근

---

 
 
1. toString()
: 숫자를 원하는 진수(문자형) 으로 변환해 주는 메소드입니다. 💁🏻‍♀️
* 매개변수 : 원하는 n진수의 "n"값.

ex) 10진수를 2진수로 변환
2진수를 8진수로 변환, ...
 
이 메소드는 아래와 같이 쓰일 수 있습니다. 
 
let num = 10;
let a = num.toString(2);
console.log(a);
 
십진수에서의 숫자 "10"을 2진수로 바꾼 모습을 출력합니다. 이 때 toString()은 숫자를 반환하되 이는*문자형*인 숫자임을 주의하도록 합시다 !
변환 후 필요하다면 Number()를 통해 숫자로 변환해주는 과정을 사용합시다. 
 
( 바로 다음으로 나올 toFixed() 함수도 마찬가지로 문자형을 반환합니다. ***)
 

---

 
 
2. toFixed() 🔨
: 숫자를 지정된 소수점 자릿수로 반올림하여 문자열로 반환해주는 메소드입니다.
* 매개변수 : 원하는 소수부 정수 개수
 
이 메소드는 아래와 같이 쓰일 수 있습니다.
 
let num = 30.1234;
 
num.toFixed(2); // "30.12"
num.toFixed(0); // "30"
num.toFixed(6); // "30.123400"
 

그러나 이 메소드도 toString()과 마찬가지로, 이후에 숫자의 용도로 사용하고 싶을 경우 Number()를 이용하여 숫자형으로 변환해준 후 사용해야 합니다.
 
 

---

 
 
3. isNaN() 🙅🏻‍♀️
 
NaN : Not a Number
이 메소드는 매개변수로 들어온 인자가 숫자형이 아니면 true, 숫자형이 맞으면 false를 반환합니다.
 
 
isNaN(3) // false (이유 : 3은 숫자이므로 NaN이 아님.)
isNaN(x) // true
 
 
 

---

 
 
4. parseInt()
: 문자형을 숫자형 ( 정수부까지) 으로 변환해주는 메소드입니다.
 
잠시만요, 문자형을 숫자형으로 변환해주는 건 Number()가 이미 해 주는 일이 아니었나요?
맞습니다. 그러나 Number()와의 큰 차이점은 바로, 문자와 숫자가 혼용되어 있어도 숫자 부분만 읽어서 알려준다는 점에 있습니다. 예시코드를 보겠습니다.
 

 
"10px" 에서 10만 골라내어 출력하고 싶을 때, Number는 그 역할을 해 주지 못합니다. 오로지 숫자만을 받는 메소드이기 때문에 NaN이 출력되네요. 반면 parseInt()를 사용하여 출력해보면 숫자 10이 출력됩니다. 이처럼 문자는 무시하고 숫자 부분만 읽어서 알려주는 것입니다.
 
 

 
parseInt 함수가 위와 같이 인수를 두 개 받는 경우, 두 번째로 들어온 인자는 여기서 진수 역할을 합니다. 첫 번째 매개변수 값 자체를 해당 진수로 바꾼 후 이를 10진수로 출력해주는 메소드가 됩니다.
 
 
 

---

 
 
 
5. parseFloat()
: 문자형을 숫자형 ( 소수부까지 ) 으로 변환해주는 메소드입니다. 

위 메소드와 큰 차이가 없으므로 쉽게 이해하실 수 있으실 겁니다.
 

 

---

오늘은 자바스크립트에서의 유용한 객체 메소드와 숫자 메소드들을 알아보았습니다. 오늘도 좋은 하루 보내세요! 🍀

---