[JavaScript] 형변환 / object의 복사 / function / for-in / for-of / Number / 진법 표기 / String

📌  Recap

제로베이스 네카라쿠배 JavaScript 강의를 완강하고, 복습하기 위해 정리해본다.

[참고] 표준 내장 객체 :  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects

표준 내장 객체 - JavaScript | MDN

 

• 2021-09-30 / Initial Posting

---

💛 형변환 

title	des	code	result
String()	Data type을 String으로	String(123);	"123"
Number()	Data type을 Number로	Number("");             Number("123");          Number("hello");        Number("hello123");     Number(true);           Number(false);          Number(null);           Number(undefined);	0 123 NaN NaN 1 0 0 NaN
Boolean()	Data type을 Boolean으로	Boolean("123"); Boolean("hello"); Boolean("0"); Boolean(""); Boolean(0); Boolean(123); Boolean(NaN); Boolean(null); Boolean(undefined);	true true true false false true false false false
parseInt()	Data type을 정수(Integer)으로 명시적 형변환	parseInt(123.456);	123
parseFloat()	Data type을 실수(Float)으로 명시적 형변환	parseFloat(123.456);	123.456

 

💛  기타

title	description	code	result
typeof	Data type 확인하는 연산자	typeof undefined; typeof 123; typeof 3.14; typeof 100n; typeof "hi"; typeof console.log; typeof null; typeof Math; typeof Symbol("id");	undefined number number bigInt string function object object symbol
...	전개 연산자 (spread operator)	let obj = {num:5}; let arr = [1,2,3]; console.log({ ...obj }); console.log([ ...arr ]); console.log(...obj); console.log(...arr);	{num:5} [1,2,3] ERROR 1 2 3
조건식 ? true 실행문 : false 실행문	삼항 연산자	age = 10; msg = age>19 ? "O" :  "X" ;	X
Object.getownPropertyDescriptors(obj)	객체의 상세 내용을 확인

 

💛 Object 의 복사 : 얕은 복사와 깊은 복사  

title	description	code	result
Object.assign({}, obj)	object의 얕은 복사 방법 중 하나	Object.assing({}, obj);
JSON.parse(obj)	object → string으로 형변환하는 메서드
JSON.stringify(str)	string → object 으로 현변환하는 메서드
	깊은 복사	JSON.stringify(JSON.parse(obj));

 

💛  Fucntion 선언 및 호출

title	description	code	result
함수 선언식	호이스팅에 영향을 받는다	function func(a,b) { };
함수 표현식	익명함수를 변수에 저장해 사용  호이스팅에 영향을 받지 않는다	let func = function(a,b) { };
화살표 함수	ES6에서 추가된 문법 https://mzl.la/3kRpcti	let func = (a,b) -> { };
func()	일반적인 함수 호출 방법	function sum(a,b) { return a+b; } sum(10, 4);	14
func.apply(this, arr)	this를 binding하는 방법 중 하나
	- apply()로 특정 객체를 매개변수로 전달하면, 함수의 내부에서 받아온 객체를 this를 사용해 접근할 수 있다 - java script의 함수는 각자 자신만의 this를 정의하는데, 기본적으로 this는 window를 의미한다 - 기본적으로는 this는 함수의 명령문이 실행되는 범위를 의미하기때문에 기본값이 window이다 - 상황에 따라서 this를 원하는 객체로 변경해 사용하고자할 때 this를 binding해준다 - apply()는 this를 binding하는 방법 중 하나이며, apply()의 첫번째 인자가 this로 정의된다 [참고1] https://wooooooak.github.io/javascript/2018/12/08/call,apply,bind/ [참고2] https://www.youtube.com/watch?v=jA9Mp0VJoQc

 

💛  for 문

title	description	code	result
for-in	key-value 형태를 반복 수행하기위한 반복문
for-of	Iterator 속성을 가진 객체를 위한 반복문

 

💛  Number : 상수 값 속성(property)

title	description	code	result
Number.MAX_VALUE	지수표기법으로 표현되는 양수 중 최대값		1.7976931348623157e+308
Number.MIN_VALUE	지수표기법으로 표현되는 양수 중 최소값		5e-324
Number.MAX_SAFE_INTEGER	안전하게 표기되는 최대값(양수)		9007199254740991
Number.MIN_SAVE_INTEGER	안전하게 표기되는 최소값(음수)		-9007199254740991
Number.POSITIVE_INFINITY	무한대 양수값		Infinity
Number.NEGATIVE_INFINITY	무한대 음수값		-Infinity
Number.NaN	Not a Number		NaN

 

💛  Number : 메서드

title	description	code	result
num.toString()	Data type을 String으로	let n = 1e-6; typeof n.toString();	string
num.toFixed()	소수점 이하 길이를 제한	12.345678.toFixed(3);	12.345
num.toPrecision()	정수와 소수의 자리수를 합한 길이로 제한	12.345678.toPrecision(3);	12.3
Number.isNaN()	값이 NaN인지 확인	Number.isNaN(NaN); Number.isNaN(123);	true false
Number.isFinite()	정상적인 유한수인지 확인	Number.isFinite("hi"); Number.isFinite(Infinity); Number.isFinite(123);	false false true
Number.parseInt()	정수로 형변환	Number.parsInt("1.25px");  Number.parsInt("1.25em");  Number.parsInt("text123"); Number.parsInt("0f", 16);	1 1 NaN 15
Number.parseFloat()	실수로 형변환	Number.parseFloat("1.25em");	1.25
	- parseInt() 와 pareFloat()는 px, em 과 같은 단위를 함께 사용하는 경우 형변환이 가능하다 - 단위가 아닌 문자열로 함께 사용되지 않는 경우는 NaN을 반환한다 - 다른 진법 표기를 사용한 경우 두번째 인자에 n진법임을 명시한다

 

💛  진법 표기 

title	description	code	result
15	10진법 표기	console.log(15);	15
0x0f	16진법 표기를 위해 0x 를 붙인다	console.log(0x0f);	15
0o17	8진법 표기를 위해 0o 를 붙인다	console.log(0o17);	15
0b1111	2진법 표기를 위해 0b 를 붙인다	console.log(0b1111);	15

 

💛  String : 문자열 접근, 검색 메서드 

title	description	code	result
str.charAt(idx)	문자열 내 문자에 index를 사용해 접근 str[idx] 과 같은 결과를  반환	let str = "hello worlD! 뿅"; str.charAt(1); str[1];	e e
str.charCodeAt(idx)	문자열 내 문자에 index를 사용해 접근 해당 문자의  아스키 코드 값을 반환	str.charCodAt(1);	101
str.indexOf(substr, idx)	idx이후 범위에서 substr을 찾아 index 반환 (idx에 해당하는 문자 포함)	str.indexOf('l', 3);	3
str.lastIndexOf(substr, idx)	idx기준 역방향으로 substr을 찾아 index 반환 (idx에 해당하는 문자 포함)	str.lastIndexOf('l', 2);	2
str.includes(substr, idx)	idx이후 문자열에 substr 포함 여부 확인  (idx에 해당하는 문자 포함하지 않음)	str.includes('lo', 3); str.includes('lo', 5);	true false
str.startsWith(substr, idx)	idx이후 문자열이 substr으로 시작하는지 확인 (idx에 해당하는 문자 포함)	str.startsWith('wo', 3); str.startsWith('wo', 6);	fasle true
str.endsWith(substr, idx)	idx이전 문자열이 substr으로 끝나는지 확인  (idx에 해당하는 문자 포함하지 않음)	str.endsWith('lo', 4); str.endsWith('lo', 5);	false true
	- 문자열 검색 메서드는 대소문자를 구분해서 검색한다 - substr : 부분 문자열을 의미 - 두번째 매개변수인 문자 탐색 시작 지점을 의미하는 index는 생략가능하다 - 매개변수로 전달한 idx에 해당하는 문자의 포함 여부에 주의하자
str.toUpperCase()	문자열의 영문을 모두 대문자로 치환	str.toUpperCase();	HELLO WORLD! 뿅
str.toLowerCase()	문자열의 영문을 모두 소문자로 치환	str.toLowerCase();	hello world! 뿅

 

💛  String : 문자열 추출 메서드(method)

title	description	code	result
str.slice(start, end)	start~end 범위에 해당하는 문자열 추출	let str = "hello, world!!!" str.slice(0, 5); str.slice(4); str.slice(-4); str.slice(6,2);	hello o, world d!!! (빈 문자열)
str.substring(start, end)	start~end 범위에 해당하는 문자열 추출	str.substring(0, 5); str.substring(4); str.substring(-4); str.substring(6, 2);	hello o, world d!!!
	slice()와 substring()의 차이점 - slice()는 end > start 의 경우 빈 문자열을 반환 - substring()은 내부적으로 대소를 판단해 start, end을 재설정해 문자열을 반환
str.substr(start, length)	start 부터 length만큼의 글자를 추출한다	str.substr(3,3); str.substr(-1,5); str.substr(-2,5);	lo, ! !!

 

💛  String : 문자열 치환/분할 메서드(method)

title	description	code	result
str.replace(a, b)	처음만나는 문자열을 치환해 반환한다  정규 표현식을 사용할 수 있다 - /치환문자열/ g(전체) - /치환문자열/ g(전체) i(대소문자구분x)	let str = "heLlo wolrd"; let res1, res2, res3,res4; res1 = str.replace("heLlo", "hi"); res2 = str.replace(/l/g, "@"); res3 = str.replace(/l/gi, "@");	hi world heL@o world he@@o world
str.splite(sep,limit)	문자열을 정해진 구분자를 기준으로 분할 배열의 형태로 반환한다	let str1 = "nice to meet you"; let res1 = str.split(" "); let str2 = "hello"; let res2 = str.split(""); let res3 = str.split("", 3);	['nice', 'to', 'meet', 'you'] ['h', 'e', 'l', 'l', 'o'] ['h', 'e', 'l']

 

💛  String  : 그 외

title	description	code	result
str.length	문자열의 길이를 확인	let str = "hello world"; str.length;	11
str.concat(str2)	인자로 넘긴 문자열을 기존 문자열 뒤에 합친다	str.concat("!!!");	hello world!!!
str.trim()	문자열 양쪽 끝 공백을 삭제한다	let str = " a b c "; console.log(`${str}, ${str.length}`); str = str.trim(); console.log(`${str}, ${str.length}`);	a b c , 7 a b c, 5