[TIL] 230128 유용한 함수

유용한 함수

1. 래퍼 객체 Warpper Object

javascript

UNFOLDED

// 래퍼 객체 (Warpper Object)
// 원시값을 필요에 따라 관련된 빌트인 객체로 변환한다.
const number = 123;
// number 원시 타입을 감싸고 Number 객체로 감싸진다.
console.log(number.toString()); // Number 객체 타입
console.log(number); //원시 타입
 
const txt = 'text';
console.log(txt); // string 원시 타입
console.log(txt.length); // String 객체 타입
console.log(txt.trim());

2. 글로벌 객체 Global Object

javascript

UNFOLDED

//전역적으로 사용 가능한 글로벌 객체
console.log(globalThis);
console.log(Infinity);
console.log(NaN);
console.log(null);
console.log(undefined);
 
// Node에서의 THIS : 현재 모듈에 있는 정보를 출력한다.
// JS에서는 대체적으로 전역객체를 가르킴
console.log(this);
 
/*=====함수 속성======*/
//https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference#%ED%95%A8%EC%88%98_%EC%86%8D%EC%84%B1
 
// eval: 문자열 형태로 자바스크립트 코드를 작성하면 이것을 평가해 값으로 출력 가능하다.
eval('const num = 2; console.log(num)'); //2
 
// isFinite: 숫자가 유한한지 아닌지를 반펼할 수 있는 내장객체
console.log(isFinite(1)); //true
console.log(isFinite(Infinity)); //false
 
// parseInt: 문자열 안에 있는 숫자를 정수로 변환해줌 (실수를 정수로)
console.log(parseInt('42.22')); //42
// parseFloat: 문자열 이긴하지만 그안에 숫자가 있다면 정수로 바꿔줌
console.log(parseFloat('42.22')); //42.22
 
// URL (URL, Uniform Resource Indentifier 개념)
// 아스키 문자로만 구성되어야 한다.
// 한글이나 특수문자는 이스케이프 처리 해야 한다.
const URL = 'https://한글URL.com';
const encoded = encodeURI(URL); //이스케이프 처리
console.log(encoded); //https://%ED%95%9C%EA%B8%80URL.com
 
const decoded = decodeURI(encoded);
console.log(decoded); //https://한글URL.com
 
// 전체 URL이 아닌 부분적인 것은 컴포넌트를 사용
const part = '한글URL.com';
console.log(encodeURIComponent(part)); //%ED%95%9C%EA%B8%80URL.com

3. Boolean

javascript

UNFOLDED

let boolean = new Boolean(true);
console.log(boolean.valueOf());
 
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
/**
 * 거짓
 * 0
 * -0
 * NaN
 * undefined
 * null
 * ''
 */
const bNoParam = new Boolean();
const bZero = new Boolean(0);
const bNull = new Boolean(null);
const bEmptyString = new Boolean('');
const bfalse = new Boolean(false);
 
/**
 * 참
 * 1
 * -1
 * '0'
 * 'false
 * []
 * {}
 */
const btrue = new Boolean(true);
const btrueString = new Boolean('true');
const bfalseString = new Boolean('false');
const bSuLin = new Boolean('Su Lin');
const bArrayProto = new Boolean([]);
const bObjProto = new Boolean({});

4. Numbers

javascript

UNFOLDED

//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
 
const num1 = 123;
const num2 = new Number(123);
 
console.log(typeof num1); //number 원시 타입
console.log(typeof num2); //object 객체 타입
 
console.log(Number.MAX_VALUE); //정수에서 쓸수 있는 최고의 값 (불안정)
console.log(Number.MIN_VALUE); //정수에서 쓸수 있는 최소의 값 (불안정)
console.log(Number.MAX_SAFE_INTEGER); //정수에서 쓸수 있는 최고의 값 (안정)
console.log(Number.MIN_SAFE_INTEGER); //정수에서 쓸수 있는 최소의 값 (안정)
console.log(Number.NaN); //정수가 NaN인지 확인
console.log(Number.POSITIVE_INFINITY); //정수의 최대값
console.log(Number.NEGATIVE_INFINITY); //정수의 최소값
 
// 언제 사용하는가?
if (num1 < Number.MAX_SAFE_INTEGER) {
    console.log(`${num1}이 정수에서 쓸 수 있는 최고값 보다 작습니다.`);
}
 
if (Number.isNaN(num1) == false) {
    console.log(`${num1}은 정수 입니다.`);
} else {
    console.log(`${num1}은 숫자가 아닙니다`);
}
 
// 지수표기법 (매우 크거나 작은 숫자를 표기할 때 사용, 10의 n승으로 표기)
const num3 = 102;
console.log(num3.toExponential()); //1.02e+2
 
// 반올림 하여 문자열로 변환
const num4 = 1234.12;
console.log(num4.toFixed()); //'1234'
console.log(num4.toString()); //'1234.12'
console.log(parseInt(num4)); //1234
console.log(parseFloat(num4)); //1234.12
 
console.log(num4.toLocaleString('zh-Hans-CN-u-nu-hanidec')); //一,二三四.一二
console.log(num4.toLocaleString('ko-KR', { style: 'currency', currency: 'KRW' })); //₩1,234
 
//원하는 자릿수 까지 유효하도록 반올림
console.log(num4.toPrecision(2)); //'1.2e+3' 지수형식으로 자동 변환
console.log(num4.toPrecision(5)); //1234.1
 
if (Number.EPSILON > 0 && Number.EPSILON < 1) {
    console.log(Number.EPSILON); //0과 1사이에서 나타낼 수 있는 가장 작은 숫자.
}
 
const num5 = 0.1 + 0.2 - 0.2;
console.log(num5); //0.10000000000000003   JS에서 2진수로 변경하면서 계산을 해서 작은 오차가 생길 수 있다.
 
let isEqual = (original, expected) => {
    //Math,abs() 으로 값이 -가 되지 않도록 해준다.
    return Math.abs(original - expected) < Number.EPSILON; //값이 미묘한 차이로 똑같다면 이런식으로 표현할 수 있다.
};
console.log(isEqual(num5, 0.1)); //true;

5. String

javascript

UNFOLDED

//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
 
const textObj = new String('Hello World!');
const text = 'Hello World!';
 
console.log(textObj); //[String: 'Hello World!']
console.log(text); //Hello World!
 
console.log(text[0]); //H
console.log(text[1]); //e
console.log(text.charAt(4)); //o
console.log(text.length); //12
console.log(text.indexOf('l')); //2 번째 (앞에서부터 제일 가까운것)
console.log(text.lastIndexOf('l')); //9 번째 (뒤에서부터 제일 가까운것)
console.log(text.includes('W')); //true (문자열 안에 W가 존재하는지) - 대소문자 구별
console.log(text.includes('Q')); //false (문자열 안에 Q가 존재 하지 않아 false)
 
console.log(text.startsWith('H')); //true (첫 시작 문자가 맞다면 true값 반환) - 대소문자 구별
console.log(text.endsWith('W')); //false (마지막 문자가 맞다면 true값 반환) - 대소문자 구별
 
console.log(text.toUpperCase()); //HELLO WORLD!
console.log(text.toLowerCase()); //hello world!
 
const space = '     span        ';
console.log(space.trim()); //공백 제거
 
console.log(text.substring(0, 3)); //Hel (0부터 3개 출력)
console.log(text.slice(2)); //llo world!
console.log(text.slice(-2)); //d! (뒤에서부터 2개 제거)
console.log(text.replace('l', 'o')); //Hello World!
 
//⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
const longText = '안녕하세요, 서근 개발 노트 입니다.';
console.log(longText.split(' ')); //[ '안녕하세요,', '서근', '개발', '노트', '입니다.' ]
console.log(longText.split(' ', 2)); //[ '안녕하세요,', '서근' ]
console.log(longText.split(',', 2)); //[ '안녕하세요', ' 서근 개발 노트 입니다.' ]

6. Math

javascript

UNFOLDED

//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
 
//Math
//static properties, methods
 
console.log(Math.E); // 오일러의 상수, 자연로그의 밑에서 사용하는 값
console.log(Math.PI); // 원주율 PT값
 
// static methods
console.log(Math.abs(-10)); //10 (절대값을 만들 수 있다.)
// 소수점 이하를 올림
console.log(Math.ceil(10.5)); //11
// 소수점 이하를 내림
console.log(Math.floor(10.5)); //10
// 소수점 이하를 반올림
console.log(Math.round(10.3)); //10
console.log(Math.round(10.8)); //11
// 정수만 반환
console.log(Math.trunc(10.3)); //10
 
/*=====⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️*/
// 최대, 최솟값 찾기
console.log(Math.max(1, 2, 6)); //6
console.log(Math.min(1, 2, 6)); //1
// 거듭 제곱
console.log(Math.pow(2, 3)); //8
// 제곱근
console.log(Math.sqrt(9)); //3*3 고로 3
 
//⭐️ 랜덤한 값을 반환
console.log(Math.random()); // 0.0 ~ 1.0
 
//⭐️ 1~10
console.log(Math.floor(Math.random() * 10 + 1)); // 1 ~ 10);