자바스크립트 중급 개념 2 - Number, Math, String methods, Array methods, sort, reduce

3. Number, Math

toString()

• 우리가 보통 쓰는 수는 10진수 -> 개발할때 필요 시 2진수/16진수를 사용함
• toString()는 숫자를 문자로 바꿔줌
• 괄호안에 숫자를 쓰면 그 숫자의 진법으로 바꿔줌

let num = 10;

num.toString(); // "10"
num.toString(2); // "1010" - 10의 2진수

let num2 = 255;

num2.toString(16); // "ff"

Math

• 수학과 관련된 프로퍼티와 메소드를 가지고 있는 내장함수

Math.PI; // 3.14159265.589793

Math.ceil() : 올림

let num1 = 5.1;
let num2 = 5.7;

Math.ceil(num1); // 6
Math.ceil(num2); // 6

Math.floor() : 내림

let num1 = 5.1;
let num2 = 5.7;

Math.floor(num1); // 5
Math.floor(num2); // 5

Math.round() : 반올림

let num1 = 5.1;
let num2 = 5.7;

Math.round(num1); // 5
Math.round(num2); // 6

소수점 자릿수 문제

let userRate = 30.1234;

• 요구사항 : 소수점 둘째자리까지 표현 (셋째 자리에서 반올림)
• 100을 곱하고 반올림을 한 뒤, 다시 100을 나누면 됨

Math.round(userRate * 100)/ 100 // 30.12

소수점 자릿수 : toFixed()

• 위 방법 말고 toFixed() 메소드 사용하는 방법도 있음
• 숫자를 인수로 받아 그 숫자만큼 소숫점 이하 개수에 반응함
• 훨씬 간단한 방법임

let userRate = 30.1234;

userRate.toFixed(2); // "30.12"
userRate.toFixed(0); // "30"
userRate.toFixed(6); // "30.123400"

• 인수로 0을 넣어주면 정수부분만 남고, 소수점 개수보다 큰 숫자를 넣으면 0으로 채워줌
• 통계나 집필 작업할때 매우 유용하게 사용됨
• 주의할 점은 toFiexd는 문자열을 반환함
• 그래서 반환 이후 Number를 이용해서 숫자로 변환하는 작업을 많이 함

let userRate = 30.1234;

userRate.toFixed(2); // "30.12"
Number(userRate.toFixed(2)); // 30.12

isNaN()

• NaN인지 아닌지 판단해 줌
• NaN(Not-a-Number)은 JavaScript에서 숫자가 아닌 값을 나타내는 특수한 값
• NaN은 자기 자신과도 똑같지 않다고 판단하기 때문에 isNaN()이 유일한 NaN 판별 방법임

let x = Number('x'); //NaN

x == NaN // false
x === NaN // false
NaN == NaN // false

isNaN(x) // true

parseInt()

• 문자열을 숫자열로 바꿔줌

let margin = '10px';

parseInt(margin); // 10
Number(margin) // NaN

let redColor = 'f3';
parseInt(redColor); // NaN

• Number와 다른 점은 문자가 혼용되어 있어도 동작을 함
• Number는 NaN을 반환하지만 parseInt는 읽을 수 있는 부분까지는 읽고 문자를 만나면 숫자를 반환함
• 그래서 숫자로 시작하지 않으면 parseInt는 NaN을 반환함

• parseInt는 두 번째 인수를 받아서 진수를 지정할 수 있음

let redColor = 'f3';
parseInt(redColor); // NaN

let redColor = 'f3';
parseInt(redColor, 16); // 243

• f로 시작했지만 두 번째 인수의 16을 전달해서 16진수로 바꿈
• 2진수 -> 16진수로 바꿀 수 있음

parseFloat()

• parseInt()와 동일하게 동작하지만, 부동 소수점을 반환함
• parseInt()는 소수점 이하는 무시하고 정수만 반환함

Math.random()

• 0 ~ 1 사이 무작위 숫자 생성
• 만약 1 ~ 100 사이의 임의의 숫자를 뽑고 싶다면 아래와 같이 식을 만들어서 사용하면 됨

Maht.floor(Math.random()*100)+1

• 1을 더하는 이유는 0.xx가 나오는 경우 버림을 했을 때 0이 나올수도 있기 때문에 1부터 100 사이의 숫자를 위해서 1을 더함
• 실행할때마다 다르게 나옴

Math.max() / Math.min()

• 괄호 안의 인수들 중 최대값, 최소값 구할 수 있음

Math.max(1, 4, -1, 5, 10, 9, 5.54); // 10
Math.min(1, 4, -1, 5, 10, 9, 5.54); // -1

Math.abs : 절대값

• abs => absolute의 약자

Math.abs(-1) // 1

Math.pow(n,m) : 제곱

• pow => power의 약자
• n의 m승 값 (거듭제곱 값)

Math.pow(2, 10) // 2의 10승이니까 1024

Math.sqrt() : 제곱근

• sqrt => square root약자

Math.sqrt(16) // 4

정리

• 쇼핑몰, 통계, 지표 등 업무할 때 많이 사용

---

4. String methods

작은 따옴표, 큰 따옴표, 백틱

• ' , " , `
• 작은 따옴표, 큰 따옴표는 큰 차이 없음
• 상황에 맞게 사용하면 됨
• html 코드는 큰 따옴표로된 내용들이 있기 때문에 작은 따옴표로 감싸는게 편함

let html = '<div class="box_title">제목 영역</div>';

• 반면 영어로 된 문장은 작은 따옴표로 된 내용이 많으니까 큰 따옴표로 감싸는게 편함

let desc = "It's sunny day."

• 백틱은 ${}를 이용해 변수를 표현하거나 표현식을 쓸 수 있음
• 백틱은 여러줄을 쓸 수도 있음

let dessc = `안녕하세요.
면접에서 좋은 결과가 있으면 좋겠어요.
열심히 준비하겠습니다.`;

let desc = '안녕하세요.\n면접에서 좋은 결과가 있으면 좋겠어요.\n열심히 준비하겠습니다.'

• 따옴표로 작성하는 것보다 백틱이 훨씬 간편함

length : 문자열 길이

let desc = '안녕하세요.';
desc.length //6

• 배열 길이 구하는 것처럼 문자열 길이도 length로 구할 수 있음
• 보통 회원가입할 때 ID, PW 자릿수 제한 시 사용

특정 위치에 접근

let desc = '안녕하세요.';

desc[2] // '하'

• 배열과 동일하게 문자열도 대괄호와 숫자로 특정 위치에 접근할 수 있음
• 배열과 동일하게 0부터 시작함

let desc = '안녕하세요.';

desc[2] // '하'
desc[4] = "용";
console.log(desc); // 안녕하세요.

• 배열과 다르게 한 글자만 변경하는 것은 허용되지 않음

toUpperCase() / toLowerCase()

let desc = "Hi everyone. Nice to meet you.";

desc.toUpperCase();
"HI EVERYOEN. NICE TO MEET YOU."

desc.toLowerCase();
"hi everyone nice to meet you."

• toUpperCase() : 모든 영문을 대문자로 바꿔줌
• toLowerCase() : 모든 영문을 소문자로 바꿔줌

str.indexOf(text)

• 문자를 인수로 받아 몇 번째에 위치하는지 알려줌
  (문자열 시작 위치 알려줌)
• 0부터 시작됨
• 마침표, 공백 포함
• 만약 찾는 문자가 없다면 -1을 반환함

let desc = "Hi everyone. Nice to meet you.";

desc.indexOf('everyone'); // 3
desc.indexOf('lucky'); // -1

• 포함된 문자가 여러개면 첫 번째 위치만 반환함

if(desc.indexOf('Hi')){
	console.log('Hi가 포함된 문장입니다.')
}

• 위 코드에서 .indexOf('Hi')는 0이고, if에서 0은 false를 의미하기 때문에 console이 출력되지 않음

if(desc.indexOf('Hi') > -1){
	console.log('Hi가 포함된 문장입니다.')
}

• 그래서 항상 -1보다 큰지를 비교하면 됨

str.slice(n, m)

let desc = "abcdefg";

desc.slice(2); // "cdefg"
desc.slice(0, 5); // "abcde"
desc.slice(2, -2); // 인덱스 2에서 끝에서 2번째 위치까지 반환 -> "cde"

• 특정 범위의 문자열만 보기
• n부터 m까지의 문자열을 반환함
• n은 시작점
• m은 없으면 문자열 끝까지, 양수면 그 숫자까지(본인은 불포함), 음수면 끝에서부터 셈

str.substring(n, m)

• n과 m 사이 문자열 반환
• slice와 유사하지만 n, m 위치 바꿔도 동작함
• n부터 m까지가 아니라 n과 m사이임
• n ≤ 추출할 문자 < m
• 음수 허용하지 않음, 음수는 0으로 인식

let desc = "abcdefg";

desc.substring(2, 5); // "cde"
desc.substring(5, 2); // "cde"

str.substr(n, m)

• substring과 비슷하게 생겼지만 동작 방식은 다름
• n부터 시작해서 m 개 가져옴 (m까지 아님)
• 음수는 카운팅 0이 아니라 1부터 함

let desc = "abcdefg";

desc.substr(2, 4); // "cdef"
desc.substr(-4, 2); // "de"

str.trim() : 앞 뒤 공백 제거

let desc = "    coding      "

desc.tirm(); // "coding"

• 보통 사용자로부터 뭔가를 입력받을 때 사용함
• 의도적으로 맨 앞과 맨 뒤에 스페이스를 넣는 경우는 거의 없기 때문

str.repeat(n) : n번 반복

let hello = "hello!";
hello.repeat(3); // "hello!hello!hello!"

문자열 비교

1 < 3 // true
"a" < "c" // true
"a".codePointAt(0); // "a"는 10진법으로 97이니까 97 출력
String.fromCodePoint(97) // "a"

• 알파벳은 a부터 z순으로 커지고, 대분자보다 소문자가 크다고 알아두기

---

예제

예제 1

let list = [
	"01. 여름이었다",
  	"02. 다가올 가을",
  	"03. 어쩌다 겨울",
  	"04. 한 해를 마무리 하며".
  	"05. 새 해를 계획하자"
];

// 만약 숫자를 제외하고 문자만 출력하고 싶다면?
let newList = [];

for(let i = 0; i < list.length; i++){
  	// 인덱스 4부터 끝까지
	newList.push(list[i].slice(4));
}

console.log(newList); // 문자열만 잘 출력됨

예제 2

• if(-1)은 true, if(0)은 false

function hasCola(str){
	if(str.indexOf('콜라')){
    	console.log('금칙어가 있습니다.');
    } else {
    	console.log('통과')
    }
}

hasCola('와 사이다가 최고야!'); // -1 -> true -> 금칙어가 있습니다.
hasCola('무슨소리, 콜라가 최고야'); // 6 -> true -> 금칙어가 있습니다.
hasCola('콜라'); // 0 -> false -> 통과

• 위 코드를 아래와 같이 수정해줘야 함
• 0보다 크면 "콜라"가 있는거니까 -1보다 큰지 체크해주기

function hasCola(str){
	if(str.indexOf('콜라') > -1){
    	console.log('금칙어가 있습니다.');
    } else {
    	console.log('통과')
    }
}

hasCola('와 사이다가 최고야!'); // -1 -> false -> 통과
hasCola('무슨소리, 콜라가 최고야'); // 6 -> true -> 금칙어가 있습니다.
hasCola('콜라'); // 0 -> true -> 금칙어가 있습니다.

예제 3

• includes를 통해 문자열이 포함되었는지 확인

function hasCola(str){
	if(str.includes('콜라')){
    	console.log('금칙어가 있습니다.');
    } else {
    	console.log('통과')
    }
}

hasCola('와 사이다가 최고야!'); // 통과
hasCola('무슨소리, 콜라가 최고야'); // 금칙어가 있습니다.
hasCola('콜라'); // 금칙어가 있습니다.

---

5. Array methods

기본 메소드

• push() : 뒤에 삽입
• pop() : 뒤에 삭제
• unshift() : 앞에 삽입
• shift() : 앞에 삭제

arr.splice(n, m) : 특정 요소 지움

• n: 시작, m: 개수
• n번째 요소부터 m개 지우라는 의미

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2);

console.log(arr); // [1, 4, 5]

arr.splice(n, m, x) : 특정 요소 지우고 추가

• n: 시작, m: 개수, x: 추가
• n번째 요소부터 m개 지우고, 그 자리에 x를 차례로 추가하라는 의미

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 3, 100, 200);

console.log(arr); // [1, 100, 200, 5]

• 두 번째 인수에 0을 넣으면 아무것도 지우지 않고 중간에 새로운 요소를 추가하는 것이 가능함

let arr = ["나는", "happybeen", "입니다"];
arr.splice(1, 0, "대한민국", "개발자");
// 1부터 시작이고 0개 삭제니까 인덱스 1 자리에 들어감

console.log(arr); // ["나는", "대한민국", "개발자", "happybeen", "입니다"]

arr.splice() : 삭제된 요소 반환

• 메소드를 사용할 때 값을 반환하는데, 그 값이 삭제된 요소의 배열임

let arr = [1, 2, 3, 4, 5];
let result = arr.splice(1, 2);

console.log(arr); // [1, 4, 5]
console.log(result) // [2, 3] // 삭제된 두 요소가 result에 들어감

arr.slice(n, m) : n부터 m까지 반환

• 인덱스 n부터 m까지 반환 (m은 불포함)
• m이 없으면 배열 끝까지 반환
• 괄호안에 아무것도 안넣으면 배열이 복사됨

let arr = [1, 2, 3, 4, 5];
arr.slice(1, 4); // [2, 3, 4]

let arr2 = arr.slice();
console.log(arr2); // [1, 2, 3, 4, 5]

arr.concat(arr2, arr3, ...) : 합쳐서 새 배열 반환

• 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열로 반환함

let arr = [1, 2];

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

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

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

arr.forEach(fn) : 배열 반복

• 함수를 인수로 받고, 3개의 매개 변수가 있음
• 첫 번째 : 해당 요소
• 두 번째 : 인덱스
• 세 번째 : 해당 배열 자체를 의미
• 보통 첫 번째, 두 번째만 사용함
• 배열 순회 가능

let users = ["Mike", "Tom", "Jane"];

users.forEach((item, index, arr) => {
	//
});

let arr = ["Mike", "Tom", "Jane"];

users.forEach((name, index) => {
	console.log(`${index + 1}. ${name}`)
});
// 1. Mike 2. Tom 3. Jane

arr.indexOf / arr.lastIndexOf

arr.findIndex(fn)

• 문자열의 indexOf와 사용법 같음
• 발견하면 해당 index를 반환하고, 없으면 -1 반환
• 인수가 두 개인 경우 두 번째 인수는 시작 위치를 의미함

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

arr.indexOf(3); // 2
arr.indexOf(3, 3); // 7 (index 3부터 탐색해서 3을 찾아야 하니까 index 7이 나옴)

arr.lastIndexOf

• 끝에서부터 탐색하고 싶으면 arr.lastIndexOf 사용하기
• 끝에서 첫 번째로 만나는 인덱스값이 반환됨

arr.lastIndexOf(3); // 7

arr.includes() : 포함하는지 확인

• 굳이 인덱스 확인 필요 없고 포함 여부만 알고 싶은 경우 사용
• 배열 내 인수 포함하고 있으면 true, 없으면 false 반환

let arr = [1, 2, 3];

arr.includes(2); // true
arr.includes(8); // false

arr.find(fn) / arr.findIndex(fn)

arr.find(fn)

• indexOf처럼 찾는다는 의미는 동일하지만 더 복잡한 연산이 가능하도록 함수를 매개변수로 가짐
• 짝수 찾기, 성인 찾기 등의 상황에 사용함
• 주의할점 : 첫 번째 true값만 반환하고 끝남. 만약 없으면 undefined 반환

arr.findIndex(fn)

• 해당 index를 반환함
• 없으면 -1 반환

예제

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

const result = arr.find((item) => {
	return item % 2 === 0;
});

console.log(result); // 2

let userList = [
  { name: "Mike", age: 30 },
  { name: "Jane", age: 27 },
  { name: "Tom", age: 10 },
];

const result = userList.find((user)=>{
	if (user.age < 19) {
    	return ture;
    }
  	return false;
});

console.log(result); // {name: "Tom", age: 10}

• 객체가 들어있는 배열의 경우 indexOf로 찾기 어려움
• findIndex를 사용하는 것이 좋음

let userList = [
  { name: "Mike", age: 30 },
  { name: "Jane", age: 27 },
  { name: "Tom", age: 10 },
];

const result = userList.findIndex((user)=>{
	if (user.age < 19) {
    	return ture;
    }
  	return false;
});

console.log(result); // 2

• 주의할점 : 첫 번째 true값만 반환하고 끝남
• 만약 없으면 undefined를 반환함

arr.filter(fn)

• 만족하는 모든 요소를 배열로 반환
• find와 사용법은 동일함
• find는 첫 번째 true값만 반환하고 끝났지만, filter는 조건에 맞는 값들을 찾아서 배열로 만들어서 반환함

let arr = [1, 2, 3, 4, 5, 6];

const result = arr.filter((item) => {
	return item % 2 === 0;
});

console.log(result); // [2, 4, 6]

arr.reverse() : 역순으로 재정렬

• 배열을 역순으로 재정렬

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

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

• 최근 가입된 유저부터 보여주는 경우, 게시판에서 가장 최근에 작성된 순서대로 정렬할 때 자주 사용함

arr.map(fn)

• 함수를 받아 특정 기능을 실행하고, 새로운 배열을 반환하는 메소드

let userList = [
  { name: "Mike", age: 30 },
  { name: "Jane", age: 27 },
  { name: "Tom", age: 10 },
];

let newUserList = userList.map((user, index) => {
	return Object.assign({}, user, {
      	id: index + 1
    	isAdult: user.age > 19,
    });
});

console.log(newUserList);
/* 0: {name: "Mike", age: 30, id: 1, isAdult: true}
	0: {name: "Jane", age: 27, id: 2, isAdult: true}
	0: {name: "Tom", age: 10, id: 3, isAdult: false} */

• newUserList를 만들어도 기존 userList는 변경 없음
• 실무에서 매우 많이 사용하기 때문에 잘 알아두기

join - 배열 합쳐서 문자열 만들기

let arr = ["안녕", "나는", "been이야"];

let result = arr.join();
// 아무것도 전달하지 않으면 쉼표로 구본되어 합쳐짐
// 안녕, 나는, been이야

console.log(result);

split - 문자열을 나눠서 배열로 만들기

const users = "Mike,Jane,Tom,Tony";

const result = users.split(",");

console.log(result); //  ["Mike","Jane","Tom","Tony"]

• 빈 문자열 입력하면 각 글자마다 잘라서 배열로 반환됨 (space 포함)

Array.isArray() - 배열인지 아닌지 확인하기

let user = {
	name: "Mike",
  	age: 30,
};

let userList = ["Mike", "Tom", "Jane"];

console.log(typeof user); // object
console.log(typeof UserList); // object

• 자바스크립트에서 배열은 객체에 속하기 때문에 typeof는 객체라고 알려줌
• 둘 다 object라고 나와서 객체와 배열을 구분하기 어려움
• 이 때 Array.isArray로 구분해주면 됨

console.log(Array.isArray(user)); // false
console.log(Array.isArray(userList)); // true

arr.sort() : 배열 재정렬

• 배열 자체가 변경되니 주의하기

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

arr.sort();

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

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

arr.sort();

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

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

arr.sort();

console.log(arr); // [13, 27, 5, 8]

• 정렬할때 요소를 문자열로 취급하기 때문에 위 코드의 경우 1과 2로 시작하는 13과 27이 앞으로 옴
• 제대로된 정렬을 하기 위해서는 값을 비교해 줄 수 있는 함수를 인수로 받음

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

arr.sort((a, b) => {
	return a - b;
});

console.log(arr);
// 8, 27, 5, 13
// 5, 8, 27, 13
// 5, 8, 13, 27

// [5, 8, 13, 27]

---

Lodash 라이브러리

• 보통은 위와 같은 함수를 만들어서 사용하기 보다는 유용한 기능을 모아놓은 Lodash 같은 라이브러리를 많이 사용함
• Ladash를 사용하면 간단하게 _.sortBy(arr) 이렇게 사용 가능함
• 어떤 로직이 들어가 있는지 신경쓰지 않아도 되고, 숫자, 문자, 객체 등 원하는 기준으로 정렬해줌
• https://lodash.com/

---

arr.reduce()

• 인수로 함수를 받음
• (누적 계산값, 현재값) => { return 계산값 };

// 배열의 모든 수 합치기

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

// for, for of, forEach

let result = 0;
arr.forEach(num => {
	// result = result + num;
  	result += num;
});

console.log(result); // 15

• forEach로 처리한 위 코드를 한 번에 처리해주는게 reduce임
• reduce()는 배열을 돌면서 원하는 작업을 하고 최종 값을 반환함
• 인자로 함수가 들어감\
• 첫 번째 값은 누적된 계산 값, 두 번째 값은 현재값이 들어감
• 초기값은 선택임, 안적으면 첫 번째 값이 들어감

// 배열의 모든 수 합치기

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

// for, for of, forEach

const result = arr.reduce((prev, cur)=> {
	return prev + cur;
}, 0)

console.log(result); // 15

성인들 이름만 배열로 만들기

let userList = [
  { name: "Mike", age: 30 },
  { name: "Jane", age: 27 },
  { name: "Hee", age: 15 },
  { name: "been", age: 14 },
  { name: "Lee", age: 10 },
];

let result = userList.reduce((prev, cur)=>{
	if(cur.age > 19){
    	return prev.push(cur.name);
    }
  	return prev;
},[])

console.log(result); // ["Mike, "Jane"]

나이의 합 구하기

let userList = [
  { name: "Mike", age: 30 },
  { name: "Jane", age: 27 },
  { name: "Hee", age: 15 },
  { name: "been", age: 14 },
  { name: "Lee", age: 10 },
];

let result = userList.reduce((prev, cur)=>{
	return (prev += cur.age);
})

console.log(result); // 96

이름이 세 글자인 사람만 배열로 반환하기

let userList = [
  { name: "Mike", age: 30 },
  { name: "Jane", age: 27 },
  { name: "Hee", age: 15 },
  { name: "been", age: 14 },
  { name: "Lee", age: 10 },
];

let result = userList.reduce((prev, cur)=>{
if (cur.name.length === 3){
return prev.push(cur.name);
}
return prev;
},[]);

console.log(result); // ["Hee", "Lee"]

#### arr.reduceRight()

- reduce와 동일한 기능
- 배열 우측부터 연산을 수행한다는 차이가 있음


---

### 참고

- [코딩앙마 유튜브](https://youtu.be/4_WLS9Lj6n4?si=CKyOr09UuVpJTQ6d)