1. 숫자, 수학

toString()
10진수 -> 2진수/16진수

Math
Math.PI;
3.14..
Math.ceil() : 올림
Math.floor() : 내림
Math.round() : 반올림
// 괄호 안에 변수를 넣는다.

ex) let userRate = 30.1234;
요구사항: 소수점 둘째 자리까지 표현 <- 30.12
Math.round(userRate*100)/100;
but 소수점 자릿수 : toFixed()를 사용하면 훨씬 간편
userRate.toFixed(2); << 30.12
userRate.toFixed(0),userRate.toFixed(6) << 0은 정수만 반환,6은 0을 채워서 반환
하지만toFixed는 반환되는 타입이 문자열 이기 때문에
Number()로 묶어서 작업을 해줘서 정수로 반환되도록 사용 된다.

NaN 같은 경우 isNaN만이 true를 반환
ex) NaN == NaN // false , 자기 자신도 false를 반환

parseInt()는 문자열을 숫자로 바꾸어 준다.
let margin = '10px';
parseInt(margin); //10
Number(margin) // NaN
parseInt는 문자열을 숫자로 바꾸어준다. Number와 다르게 숫자로 시작하며 문자가 혼용이 되있어도 읽을 수 있는데까지 읽고 반환한다.

let red = '11'
console.log(parseInt(red,2)); << 2진수를 10진수로 반환

parseFloat() << 부동소수점 반환

Math.random() // 랜덤 숫자 반환
ex) 1~100 사이 임의의 숫자를 뽑고 싶다면
Math.floor(Math.random()*100)+1

Math.pow(n,m) // 제곱
Math.sqrt(16) //제곱근, 4

문자열 메소드

',",`

• 작은 따옴표와 큰 따옴표는 크게 차이가 없다.
• 백틱은 여러줄을 나타낼수 있으며, ${}를 이용해 변수를 표현하거나 표현식을 사용할 수가 있다.
• length : 문자열 길이
• 문자열도 특정 위치에 접근을 할 수 있지만, 배열과 다르게 한글자 변경이 불가능하다.
• str.indexOf(text) // 포함된 문자열의 위치 반환
• str.slice(n,m)

• n은 시작점, m은 끝 , m은 없으면 문자열 끝까지, 음수면 끝에서부터 셈

• str.substring(n,m) n과m사이 문자열 반환
• str.substr(n,m) n부터 시작, m개를 가져옴
• str.trim() 공백 문자열 제거
• "a".codePointAt(0); //97 "a"의 아스키 코드를 얻을수 있음.
• function hasCola(str){
  if (str.indexOf("콜라") > -1){
  console.log("금칙어가 있습니다.");
  }else {
  console.log("통과");
  }
  }

hasCola("사이다가 짱이야");// else
hasCola("무슨소리 콜라가 최고");//if
hasCola("콜라"); // if

// 콜라가 포함되어있는지만 판단할때는 inclues로 판단가능 (true false)

Array

• arr.splice(n,m) : 특정 요소 지움
• arr.splice(n,m,x) : 특정 요소 지우고 추가
• arr.slice(n,m):n부터m까지 반환
• arr.concat(arr2,arr3 ..) : 합쳐서 새배열 반환
• arr.forEach(fn) : 배열 반복

let users = ['Mike','Tom', 'Jane'];
users.forEach((item, index, arr) => {
// .. Mike 0 users
Tom 1
Jane 2
});

• arr.find(fn)/arr.findIndex(fn)
  ex) let arr = [1,2,3,4,5];
  const result = arr.find((item) => {
  return item % 2 ===0;
  }); // 짝수인 2를 알려준뒤에 종료

• findIndex는 요소의 인덱스 값을 알려준뒤에 종료한다.

• find가 하나만 찾았다면, filter를 사용 하게 되면 값이 존재하는 모든 요소를 반환한다.

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

foreach문과 filter

-forEach는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용합니다.

하지만 for문처럼 index와 조건식, increase를 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있습니다.

• 1. [].forEach(callback, thisArg)

기본적인 forEach의 사용법은 아래와 같습니다.

const arr = [0,1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(element){
console.log(element); // 0 1 2 3 4 5 6 7 8 9 10
});
// 혹은 arrow 함수 가능
arr.forEach(element => console.log(element));
arr 객체의 요소들이 callback 함수에 순서대로 호출되는 모습을 볼 수 있습니다.

2. 홀수 배열 만들어보기

forEach는 return이 없습니다. 즉, callback 함수에 의해서 어떤 결과물을 내놓고 싶으면 함수 밖의 변수를 사용해야합니다.

const arr = [0,1,2,3,4,5,6,7,8,9,10];
const oddArray = [];

arr.forEach(function(element){
if(element%2==1) {
oddArray.push(element);
}
});

console.log(oddArray); // [ 1, 3, 5, 7, 9 ]
위와 같은 방법으로 결과물을 만들어낼 수 있지만, 함수 밖 영역의 참조는 예상치 못한 예외 상황을 발생시킬 수 있으므로 scope관리를 잘 해줘야 합니다.

사실 이런 경우에는 map 함수를 사용하는 것이 좋습니다. map 함수는 다음 글에서 알아보겠습니다.

for문에 비해 좀 더 깔끔하고, 직관적입니다.(index가 2씩 증가한다거나 그런 변칙이 없이 arr내 모든 요소들이 callback을 호출하는 것을 알 수 있습니다.)

3. callback 함수 인자

forEach의 callback 함수에는 배열의 요소 뿐만아니라 index, 전체 배열을 인자로 사용할 수 있습니다.

const arr = [0,1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(element, index, array){
console.log(${array}의 ${index}번째 요소 : ${element});
});
/
0,1,2,3,4,5,6,7,8,9,10의 0번째 요소 : 0
0,1,2,3,4,5,6,7,8,9,10의 1번째 요소 : 1
0,1,2,3,4,5,6,7,8,9,10의 2번째 요소 : 2
0,1,2,3,4,5,6,7,8,9,10의 3번째 요소 : 3
0,1,2,3,4,5,6,7,8,9,10의 4번째 요소 : 4
0,1,2,3,4,5,6,7,8,9,10의 5번째 요소 : 5
0,1,2,3,4,5,6,7,8,9,10의 6번째 요소 : 6
0,1,2,3,4,5,6,7,8,9,10의 7번째 요소 : 7
0,1,2,3,4,5,6,7,8,9,10의 8번째 요소 : 8
0,1,2,3,4,5,6,7,8,9,10의 9번째 요소 : 9
0,1,2,3,4,5,6,7,8,9,10의 10번째 요소 : 10
/
dom 객체에 onclick을 지정할 때 index를 사용하여 arr의 값을 참조하는 방식으로도 사용할 수 있겠습니다.

filter

위의 설명과 같이 element 에는 현재 순회하는 배열의 인자값,
index에는 그 인자값의 인덱스,
array에는 현재 배열이 로그창에 찍히게 됩니다.

그럼 이제 filter란 함수가 어떻게 동작하는지 알았으니 응용을 해보도록 하죠.
위의 소스에 배열이 3이하인 값만 추출해 새 배열을 만들어 보도록 하겠습니다.

결과는 [1,2,3]
아주 간단하죠? 현재 인자값인 element가 3 이하인 것만 리턴을 하면 됩니다.
보통은 아래와 같이 코딩하죠. 조건에 해당하는 callbackFunction을 따로 구현 합니다.

결과는 위와 같습니다.
이처럼 filter 함수를 활용해 배열에서 조건에 해당하는 값만을 추출해 낼 수 있습니다.

map

forEach와 비슷하게 map도 배열의 요소에 대해서 반복문 역할을 하면서,그러나 return이 있어서 forEach문과 다르게 기존 배열을 건드리지 않고, 새로운 배열을 만들어 준다.

• arr.map() << 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

array.map(callbackFunction(currenValue, index, array), thisArg)

-filter, forEach와 같은 구문이다.

callbackFunction, thisArg 두개의 매개변수가 있고
callbackFunction은 currentValue, index, array 3개의 매개변수를 갖는다.

currentValue : 배열 내 현재 값
index : 배열 내 현재 값의 인덱스
array : 현재 배열
thisArg : callbackFunction 내에서 this로 사용될 값

const days = ["Mon", "Tue", "Wed", "Thus", "Fri"];
이러한 변수가 있다고 하자.
이때 모든 값에 숫자를 추가 하고 싶다면 map()함수를 이용하는 것이다. map() 함수는 모든 배열의 값에 Function을 실행하는 Method이다.

즉, days.map(...) 한다는 것은 days에 있는 모든 요일에 Function을 실행하고 Function에서 나온 값을 저장해서 새로운 배열로 만다는 것이다.
days.map()이 해당하는 Function에 주는건 Variable(변수)인데 이건 아무거나 가능하다. 예를들어 day가 될 수도 있다.

const smilmingDays = days.map(day => console.log(day));

여기서 console.log(day)를 Return 하게 되는 것이다.
이렇게 되면 day가 배열의 각각의 값을 가지게 된다.
days.map(...)은 return한 값으로 이루어진 배열을 return한다.

그렇다면 위에서 처럼 console.log()를 리턴하는 대신 string을 return한다면 어떻게 될까?

const days = ["Mon", "Tue", "Wed", "Thus", "Fri"];
const smillingDays = days.map(day => 😃 ${day});

console.log(smillingDays);

결과는 위 방식과 동일하게 나온다.
days.map()이 day라는 Argument를 가지고 addsmile Function을 call한다.
map()함수는 하나의 Argument만 전달하지 않는다. 이외에 다른 많은 Argument도 전달한다. 그 중 하나가 index이다.

• 내가 공부하면서 헷갈렸던 부분
  forEach()와 map()의 차이점

  다른 점을 알아보자.

forEach()가 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행하는 것과 달리,

map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환한다는 특징을 가지고 있다.

그리고, 그 함수는

1. currentValue (배열 원소의 값)

2. index (현재 요소의 인덱스)

3. array (현재 배열)

이 세 개의 인자를 가지고 호출된

다.

배열의 각 원소에 3을 곱하는 코드를 두 메서드의 특징에 맞게 짜본다면, 다음과 같이 구성할 수 있다.

// Example of forEach()

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

arr.forEach(num => {
mulArr.push(num * 3);
});

console.log(mulArr); // [3, 6, 9, 12, 15]
// Example of map()

const arr = [1, 2, 3, 4, 5];
const mulArr = arr.map(num => num * 3);

console.log(mulArr); // [3, 6, 9, 12, 15]

2. 리턴값을 보내지 않는 forEach()

forEach()는 문밖으로 리턴값을 받지 못한다. 아래의 코드를 살펴보자.

let arr = [1,2,3,4,5];
let a = arr.forEach(function(value){
return value;
});
console.log(a); //undefined

이렇게 undefined가 출력된다.

하지만 같은 경우라도 map을 이용하면 다르다.

let arr=[1,2,3,4,5];
let a = arr.map(function(value){
return value +1;
});
console.log(a); // [2,3,4,5,6]

이 경우에는 [2,3,4,5,6]이 들어있는 배열이 출력된다.

map은 리턴값을 출력할 수 있다.

즉, forEach와 map의 가장 큰 차이는 바로 리턴값에 있다.

또한 forEach() 기존의 Ararry를 변경하는 반면, map()은 새로운 Ararry를 반환합니다.

성능면에서는 map이 forEach보다 빠르고 유리하다.

상황에 따라 맞게 사용하면 될 것이다

join, split

배열을 합쳐서 문자열을 사용할때는 join을 사용하면 된다.
let arr = ["안녕","나는","철수야"];
let result = arr.join(" - ") << 특수문자를 합쳐서 중간에 넣어 줄수도 있다.

split("")을 이런식으로 적으면 각 글자마다(띄어쓰기포함)해서 모두 잘라서 배열로 반환 해준다.

Array.isArray << 배열인지 객체인지 구분 가능.
console.log(typeof 객체);
console.log(typeof 배열객체);
이 둘다 모두 콘솔에 Object로 찍히기 때문에 구분이 가지 않으므로 사용한다.