์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- Gatsby
- REACT
- ์ฝ๋ฉํ ์คํธ
- Props
- CSS
- ๋ธ๋ก๊ทธ
- history api
- float
- ํ๋ก ํธ์๋
- ์๋ฐ์คํฌ๋ฆฝํธ
- useEffect
- ๋ฐ๋ธ์ฝ์ค
- position
- useRef
- fetch API
- ์๊ณ ๋ฆฌ์ฆ
- ํ๋ก๊ทธ๋๋จธ์ค
- ๋ฐ๋ธ์ฝ์ค3๊ธฐ
- Flex
- Today
- Total
Daehyunii's Dev-blog
21์ฅ ๋นํธ์ธ ๊ฐ์ฒด ๋ณธ๋ฌธ
21์ฅ ๋นํธ์ธ ๊ฐ์ฒด
Daehyunii 2022. 7. 18. 14:1821.1 ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด์ ๋ถ๋ฅ
์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด๋ ๋ค์๊ณผ ๊ฐ์ด ํฌ๊ฒ 3๊ฐ์ ๊ฐ์ฒด๋ก ๋ถ๋ฅํ ์ ์๋ค.
- ํ์ค ๋นํธ์ธ ๊ฐ์ฒด : ECMAscript ์ฌ์์ ์ ์๋ ๊ฐ์ฒด๋ฅผ ๋งํ๋ฉฐ ์๋ฐ์คํฌ๋ฆฝํธ ์คํ ํ๊ฒฝ๊ณผ ๊ด๊ณ์์ด ์ธ์ ๋ ์ฌ์ฉํ ์ ์๋ค.
ํ์ค ๋นํธ์ธ ๊ฐ์ฒด๋ ์ ์ญ ๊ฐ์ฒด์ ํ๋กํผํฐ๋ก์ ์ ๊ณต๋๋ค. ๋ฐ๋ผ์ ๋ณ๋์ ์ ์ธ ์์ด ์ ์ญ ๋ณ์์ฒ๋ผ ์ธ์ ๋ ์ฐธ์กฐํ ์ ์๋ค.
- ํธ์คํธ ๊ฐ์ฒด : ECMAscript ์ฌ์์ ์ ์๋์ด ์์ง ์์ง๋ง ์๋ฐ์คํฌ๋ฆฝํธ ์คํ ํ๊ฒฝ(ex๋ธ๋ผ์ฐ์ ๋๋ Node.js)์์ ์ถ๊ฐ๋ก ์ ๊ณตํ๋ ๊ฐ์ฒด๋ฅผ ๋งํ๋ค.
- ์ฌ์ฉ์ ์ ์ ๊ฐ์ฒด : ํ์ค ๋นํธ์ธ ๊ฐ์ฒด์ ํธ์คํธ ๊ฐ์ฒด์ฒ๋ผ ๊ธฐ๋ณธ ์ ๊ณต๋๋ ๊ฐ์ฒด๊ฐ ์๋ ์ฌ์ฉ์๊ฐ ์ง์ ์ ์ํ ๊ฐ์ฒด๋ฅผ ๋งํ๋ค.
21.2 ํ์ค ๋นํธ์ธ ๊ฐ์ฒด
์๋ฐ์คํฌ๋ฆฝํธ๋ Object, String, Number, Boolean, Function, Array, RegExp, Promise, Date ๋ฑ 40์ฌ ๊ฐ์ ํ์ค ๋นํธ์ธ ๊ฐ์ฒด๋ฅผ ์ ๊ณตํ๋ค. ๊ทธ ์ค Math, Reflect, Json์ ์ ์ธํ ํ์ค ๋นํธ์ธ ๊ฐ์ฒด๋ ๋ชจ๋ ์ธ์คํด์ค๋ฅผ ์์ฑํ ์ ์๋ ์์ฑ์ ํจ์ ๊ฐ์ฒด๋ค. ์์ฑ์ ํจ์ ๊ฐ์ฒด์ธ ํ์ค ๋นํธ์ธ ๊ฐ์ฒด๋ ํ๋กํ ํ์ ๋ฉ์๋์ ์ ์ ๋ฉ์๋๋ฅผ ์ ๊ณตํ๊ณ ์์ฑ์ ํจ์ ๊ฐ์ฒด๊ฐ ์๋ ํ์ค ๋นํธ์ธ ๊ฐ์ฒด๋ ์ ์ ๋ฉ์๋๋ง ์ ๊ณตํ๋ค.(์์ฑ์ ํจ์๊ฐ ์๋๋ฏ๋ก prototype ํ๋กํผํฐ๋ฅผ ๊ฐ์ง ์์ผ๋๊น)
//๋นํธ์ธ ๊ฐ์ฒด์ธ ์์ฑ์ ํจ์๋ฅผ ํตํ ๊ฐ์ฒด ์์ฑ
const strObj = new String('lee');
console.log(strObj);
const number = new Number(123);
console.log(number);
const bool = new Boolean(true);
console.log(bool);
const func = new Function('x','return x * x');
console.log(func(3));
const arr = new Array(1,2,3,4,5);
console.log(arr);
const date = new Date();
console.log(date);
21.3 ์์๊ฐ๊ณผ ๋ํผ ๊ฐ์ฒด
๋ฌธ์์ด์ด๋ ์ซ์, ๋ถ๋ฆฌ์ธ ๋ฑ์ ์์๊ฐ์ด ์๋๋ฐ๋ ๋ฌธ์์ด, ์ซ์, ๋ถ๋ฆฌ์ธ ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ String, Number, Boolean ๋ฑ์ ํ์ค ๋นํธ์ธ ์์ฑ์ ํจ์๊ฐ ์กด์ฌํ๋ ์ด์ ๋ ์์๊ฐ์ ๊ฐ์ฒด๊ฐ ์๋๋ฏ๋ก ํ๋กํผํฐ๋ ๋ฉ์๋๋ฅผ ๊ฐ์ง ์ ์์์๋ ๋ถ๊ตฌํ๊ณ ๋ง์น ๊ฐ์ฒด์ฒ๋ผ ๋์ํ ์ ์๋ค๋๋ฐ ๊ทธ ์ด์ ๊ฐ ์๋ค.
//์์ ํ์
์ธ ๋ฌธ์์ด์ด ํ๋กํผํฐ์ ๋ฉ์๋๋ฅผ ๊ฐ๊ณ ์๋ ๊ฐ์ฒด์ฒ๋ผ ๋์ํ๋ค.
const string = 'hello'
console.log(string.length); // 5
console.log(string.toUpperCase()); // HELLO
์ด๋ ์์๊ฐ์ธ ๋ฌธ์์ด, ์ซ์, ๋ถ๋ฆฌ์ธ ๊ฐ์ ๊ฒฝ์ฐ ์ด๋ค ์์๊ฐ์ ๋ํด ๋ง์น ๊ฐ์ฒด์ฒ๋ผ ๋ง์นํ ํ๊ธฐ๋ฒ(๋๊ดํธ ํ๊ธฐ๋ฒ)์ผ๋ก ์ ๊ทผํ๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ด ์ผ์์ ์ผ๋ก ์์๊ฐ์ ์ฐ๊ด๋ ๊ฐ์ฒด๋ก ๋ณํํด ์ฃผ๊ธฐ ๋๋ฌธ์ด๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋ ๊ฒ ์์ฑ๋ ๊ฐ์ฒด๋ฅผ ํตํด ํ๋กํผํฐ์ ์ ๊ทผํ๊ฑฐ๋ ๋ฉ์๋๋ฅผ ํธ์ถํ๊ณ ๋ค์ ์์๊ฐ์ผ๋ก ๋๋๋ฆฐ๋ค. ์ด๋ฌํ ์์ ๊ฐ์ฒด๋ฅผ ๋ํผ ๊ฐ์ฒด๋ผ ํ๋ค. ์์๊ฐ์ ์์ฑ๋ ๋ํผ ๊ฐ์ฒด์ [[์์๊ฐData]] ๋ด๋ถ ์ฌ๋กฏ์ ํ ๋น๋๊ณ , ํ๋กํผํฐ ์ ๊ทผ ๋๋ ๋ฉ์๋ ํธ์ถ ํ ๋ค์ ์์๊ฐ์ ๋ฐํํ๋ค. ๊ทธ ํ ๋ํผ ๊ฐ์ฒด๋ ๊ฐ๋น์ง ์ปฌ๋ ์ ์ ๋์์ด ๋๋ค.
//๋ฌธ์์ด ๋ํผ ๊ฐ์ฒด
const s = 'hello';
s.name = 'lee';
console.log(s.name); // undefined ์๋ ํ๋กํผํฐ๋๊น
console.log(s); // hello
์ซ์ ๊ฐ๋ ๋ง์ฐฌ๊ฐ์ง๋ค.
// ์ซ์ ๋ํผ ๊ฐ์ฒด
const num = 1.5;
console.log(num.toFixed()); // ๋ํผ๊ฐ์ฒด๋ก ํ์ฉํ๊ณ ๋ค์ ์์๊ฐ์ผ๋ก ๋๋๋ฆผ
console.log(typeof num, num); // number 1.5
๋ถ๋ฆฌ์ธ ๊ฐ๋ ๋ฌธ์์ด์ด๋ ์ซ์์ ๋ง์ฐฌ๊ฐ์ง์ด์ง๋ง ๋ถ๋ฆฌ์ธ ๊ฐ์ผ๋ก ๋ฉ์๋๋ฅผ ํธ์ถํ๋ ๊ฒฝ์ฐ๋ ์์ผ๋ฏ๋ก ์ ์ฉํ์ง๋ ์๋ค. ์ฃผ์ํด์ผ ํ ์ ์ null๊ณผ undefined ์์๊ฐ์ ๋ํผ ๊ฐ์ฒด๋ฅผ ์์ฑํ์ง ์๋๋ค. ๋ฐ๋ผ์ null๊ณผ undefined ๊ฐ์ ๊ฐ์ฒด์ฒ๋ผ ์ฌ์ฉํ๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ๋ค.
21.4 ์ ์ญ ๊ฐ์ฒด
์ ์ญ ๊ฐ์ฒด๋ ์ฝ๋๊ฐ ์คํ๋๊ธฐ ์ด์ ๋จ๊ณ์ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ์ํด ์ด๋ค ๊ฐ์ฒด๋ณด๋ค๋ ๋จผ์ ์์ฑ๋๋ ํน์ํ ๊ฐ์ฒด์ด๋ฉฐ, ์ด๋ค ๊ฐ์ฒด์๋ ์ํ์ง ์๋ ์ต์์ ๊ฐ์ฒด๋ค. ์ ์ญ ๊ฐ์ฒด๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ๊ฒฝ์ ๋ฐ๋ผ ์ง์นญํ๋ ์ด๋ฆ์ด ์ ๊ฐ๊ฐ์ด๋ค. ๋ธ๋ผ์ฐ์ ํ๊ฒฝ์์๋ window๊ฐ ์ ์ญ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํค์ง๋ง Node.js ํ๊ฒฝ์์๋ global์ด ์ ์ญ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํจ๋ค.
์ ์ญ ๊ฐ์ฒด์ ํ๋กํผํฐ
1. ํ์ค ๋นํธ์ธ ๊ฐ์ฒด(Object, String, Number ๋ฑ)
2. ํ๊ฒฝ์ ๋ฐ๋ฅธ ํธ์คํธ ๊ฐ์ฒด
3. var ํค์๋๋ก ์ ์ธํ ์ ์ญ ๋ณ์
4. ์ ์ญ ํจ์
5. ์๋ฌต์ ์ ์ญ
์ ์ญ ๊ฐ์ฒด๋ ๊ณ์ธต์ ๊ตฌ์กฐ์ ์ด๋ค ๊ฐ์ฒด์๋ ์ํ์ง ์์ ๋ชจ๋ ๋นํธ์ธ ๊ฐ์ฒด์ ์ต์์ ๊ฐ์ฒด๋ค. ์ ์ญ ๊ฐ์ฒด์ ํน์ง์ ์ ์ญ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฐ์๊ฐ ์๋์ ์ผ๋ก ์์ฑํ ์ ์๋ค. ๋ค์ ๋งํด, ์ ์ญ ๊ฐ์ฒด๋ฅผ ์์ฑํ ์ ์๋ ์์ฑ์ ํจ์๋ ์ ๊ณต๋์ง ์๋๋ค. ๋ํ ํ๋กํผํฐ๋ฅผ ์ฐธ์กฐํ ๋ window๋ฅผ ์๋ตํ ์ ์๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์๋ฌต์ ์ ์ญ์ด๋ผ๋ ๊ฐ๋ ๋ ์๊ธธ ์ ์๋ค. ๋ ์ ์ญ ๊ฐ์ฒด๋ ๋ช ๊ฐ์ง ํ๋กํผํฐ์ ๋ฉ์๋๋ฅผ ๊ฐ์ง๊ณ ์๋ค. ์ ์ญ ๊ฐ์ฒด์ ํ๋กํผํฐ์ ๋ฉ์๋๋ ์ ์ญ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํค๋ ์๋ณ์, ์ฆ window๋ global์ ์๋ตํ์ฌ ์ฐธ์กฐ/ํธ์ถํ ์ ์์ผ๋ฏ๋ก ์ ์ญ ๋ณ์์ ์ ์ญ ํจ์์ฒ๋ผ ์ฌ์ฉํ ์ ์๋ฐ.
21.4.1 ๋นํธ์ธ ์ ์ญ ํ๋กํผํฐ
๋นํธ์ธ ์ ์ญ ํ๋กํผํฐ๋ ์ ์ญ ๊ฐ์ฒด์ ํ๋กํผํฐ๋ฅผ ๋งํ๋ค.
Infinity ํ๋กํผํฐ : ์ซ์๊ฐ Infinity๋ฅผ ๊ฐ๋๋ค.
NaN ํ๋กํผํฐ : ์ซ์๊ฐ NaN์ ๊ฐ๋๋ค. ( NaN ํ๋กํผํฐ๋ Number.NaN ํ๋กํผํฐ์ ๊ฐ๋ค.)
undefined ํ๋กํผํฐ : ์์ ํ์ undefined๋ฅผ ๊ฐ์ผ๋ก ๊ฐ๋๋ค.
21.4.2 ๋นํธ์ธ ์ ์ญ ํจ์
๋นํธ์ธ ์ ์ญ ํจ์๋ ์ ์ญ ๊ฐ์ฒด์ ๋ฉ์๋๋ค.
isFinite ๋ฉ์๋
์ ๋ฌ๋ฐ์ ์ธ์๊ฐ ์ ์์ ์ธ ์ ํ์์ธ์ง ๊ฒ์ฌํ์ฌ ์ ํ์์ด๋ฉด true, ๋ฌดํ์์ด๋ฉด false๋ฅผ ๋ฐํํ๋ค. ์ ๋ฌ๋ฐ์ ์ธ์์ ํ์ ์ด ์ซ์๊ฐ ์๋ ๊ฒฝ์ฐ, ์ซ์๋ก ํ์ ์ ๋ณํํ ํ ๊ฒ์ฌ๋ฅผ ์ํํ๋ค.(์๋ฌต์ ํ์ ๋ณํ)
console.log(isFinite(0)); // true
console.log(isFinite('10')); // true (์๋ฌต์ ํ์
๋ณํ ํ ํ๊ฐ)
console.log(isFinite(Infinity)); // false
//์ธ์๊ฐ NaN์ผ๋ก ํ๊ฐ๋๋ ๊ฒฝ์ฐ false๋ฅผ ๋ฐํํ๋ค.
console.log(isFinite(NaN)); // false
isNaN ๋ฉ์๋
์ ๋ฌ ๋ฐ์ ์ธ์๊ฐ NaN์ธ์ง ๊ฒ์ฌํ์ฌ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ถ๋ฆฌ์ธ ํ์ ์ผ๋ก ๋ฐํํ๋ค. ์ ๋ฌ๋ฐ์ ์ธ์์ ํ์ ์ด ์ซ์๊ฐ ์๋ ๊ฒฝ์ฐ ์ซ์ ํ์ ์ผ๋ก ๋ณํ ํ ๊ฒ์ฌ๋ฅผ ์ํํ๋ค.(์๋ฌต์ ํ์ ๋ณํ)
console.log(isNaN(0)); // false
console.log(isNaN(NaN)); // true
console.log(isNaN('hello')); // true
console.log(isNaN('10')); // false
console.log(isNaN('')); // false
parseFloat ๋ฉ์๋
์ ๋ฌ๋ฐ์ ๋ฌธ์์ด ์ธ์๋ฅผ ๋ถ๋ ์์์ ์ซ์, ์ฆ ์ค์๋ก ํด์ํ์ฌ ๋ฐํํ๋ค. ๋ฉ์๋์ ํน์ง์ ์ฝ๋๋ฅผ ๋ณด๋ฉด์ ์ง์ ์ดํดํ๋๊ฒ์ด ์ค๋ช ์ ๋ฃ๋๊ฒ๋ณด๋ค ๋น ๋ฅธ๊ฒ ๊ฐ๋ค.
console.log(parseFloat('10.22')); // 10.22
console.log(parseFloat('10.0')); // 10
console.log(parseFloat('34 52 66')); // 34
console.log(parseFloat('he 22')); // NaN
console.log(parseFloat('22 he')); // 22
console.log(parseFloat(' 22 ')); // 22
parseInt ๋ฉ์๋
์ ๋ฌ๋ฐ์ ๋ฌธ์์ด ์ธ์๋ฅผ ์ ์๋ก ํด์ํ์ฌ ๋ฐํํ๋ค. ์ ๋ฌ๋ฐ์ ์ธ์๊ฐ ๋ฌธ์์ด์ด ์๋๋ฉด ๋ฌธ์์ด๋ก ๋ณํํ ๋ค์ ์ ์๋ก ํด์ํ์ฌ ๋ฐํํ๋ค.(์๋ฌต์ ํ์ ๋ณํ)
console.log(parseInt('10')); // 10
console.log(parseInt('10.22')); // 10
console.log(parseInt(10)); // 10
console.log(parseInt(10.22)); // 10
21.4.3 ์๋ฌต์ ์ ์ญ
์๋ฌต์ ์ ์ญ์ด๋ ๋ณ์์ ์ ์ธ ์์ด ์๋ณ์๋ฅผ ๋ง๋ค์ด ๊ฐ์ ํ ๋นํ๋ ๊ฒฝ์ฐ, ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ์ํด ์ ์ญ ๊ฐ์ฒด์ ํ๋กํผํฐ๋ก ๋์ ์์ฑ๋๋ ๊ฒ์ ๋งํ๋ค. ์ฆ, window๋ ์๋ต์ด ๊ฐ๋ฅํ๋ฏ๋ก ๋ณ์ ์ ์ธ ์์ด ์๋ณ์์ ๊ฐ์ ํ ๋นํ๋ ๊ฒฝ์ฐ window์ ํ๋กํผํฐ๋ก ์์ฑ์ด ๋๋ค. ๋ฐ๋ผ์ ์๋ฌต์ ์ ์ญ์ ๋ณ์๊ฐ ์๋๊ธฐ ๋๋ฌธ์ ํธ์ด์คํ ์ด ๋ฐ์ํ์ง ์๋๋ค. ๋ํ ํ๋กํผํฐ์ด๋ฏ๋ก delete ์ฐ์ฐ์๋ก ์ญ์ ํ ์ ์๋ค. ์ฃผ์ํด์ผ ํ ์ ์ var ํค์๋๋ก ์ ์ญ ๋ณ์๋ ํ๋กํผํฐ์ด์ง๋ง delete ์ฐ์ฐ์๋ก ์ญ์ ํ ์ ์๋ค.
// var ํค์๋๋ก ์ ์ญ ๋ณ์ ์ ์ธ(window๊ฐ์ฒด์ ํ๋กํผํฐ์)
var x = 10;
console.log(x); // 10
delete window.x;
console.log(x); // 10
// ์๋ฌต์ ์ ์ญ
y = 20;
console.log(window.y); // 20
console.log(y); // 20
delete y
console.log(y); // ReferenceError ๋ฐ์
'๐ Language & CS knowledge > JavaScript (๋ชจ๋์๋ฐ์คํฌ๋ฆฝํธ Deep Dive)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
23์ฅ ์คํ ์ปจํ ์คํธ (0) | 2022.07.20 |
---|---|
22์ฅ this (0) | 2022.07.19 |
20์ฅ strict mode (0) | 2022.07.16 |
19์ฅ ํ๋กํ ํ์ (0) | 2022.07.13 |
18์ฅ ํจ์์ ์ผ๊ธ ๊ฐ์ฒด (0) | 2022.07.12 |