๐ 09์ฅ ํ์ ๋ณํ๊ณผ ๋จ์ถ ํ๊ฐ
9.1 ํ์ ๋ณํ์ด๋?
์๋ฐ์คํฌ๋ฆฝํธ์ ๋ชจ๋ ๊ฐ์ ํ์ ์ด ์๋ค. ๊ฐ์ ํ์ ์ ๊ฐ๋ฐ์์ ์๋์ ๋ฐ๋ผ ๋ค๋ฅธ ํ์ ์ผ๋ก ๋ณํํ ์ ์๋ค. ๊ฐ๋ฐ์๊ฐ ์๋์ ์ผ๋ก ๊ฐ์ ํ์ ์ ๋ณํํ๋๊ฒ์ ๋ช ์์ ํ์ ๋ณํ ๋๋ ํ์ ์บ์คํ ์ด๋ผ๊ณ ํ๋ค. ๋ฐ๋ฉด ๊ฐ๋ฐ์์ ์๋์๋ ์๊ด์์ด ํํ์์ ํ๊ฐํ๋ ๋์ค์ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ์ํด ์๋ฌต์ ์ผ๋ก ํ์ ์ด ์๋๋ณํ๋๊ธฐ๋ ํ๋๋ฐ ์ด๋ฅผ ์๋ฌต์ ํ์ ๋ณํ ๋๋ ํ์ ๊ฐ์ ๋ณํ์ด๋ผ ํ๋ค.
์์ ๊ฐ์ด๋ ๋ณ๊ฒฝ ๋ถ๊ฐ๋ฅํ ๊ฐ์ด๋ฏ๋ก ๋ช ์์ ํ์ ๋ณํ์ด๋ ์๋ฌต์ ํ์ ๋ณํ์ ์ํด ๋ณ๊ฒฝ๋์ง ์๋๋ค. ํ์ ๋ณํ์ด๋ ๊ธฐ์กด ์์ ๊ฐ์ ์ฌ์ฉํด ๋ค๋ฅธ ํ์ ์ ์๋ก์ด ์์ ๊ฐ์ ์์ฑํ๋๊ฒ์ด๋ค.
9.2 ์๋ฌต์ ํ์ ๋ณํ
9.2.1 ๋ฌธ์์ด ํ์ ์ผ๋ก ๋ณํ
// ์ซ์ ํ์
0 + '' // "0"
-0 + '' // "0"
1+ '' // "1"
-1 + '' // "-1"
NaN + '' // "NaN"
Infinity + '' // "Infinity"
-Infinity + '' // "-Infinity"
// ๋ถ์ธ๋ฆฌ์ธ ํ์
true + '' // "true"
false + '' // "false"
// null ํ์
null + '' // "null"
// undefined ํ์
undefined + '' // "undefined"
// ์ฌ๋ฒ ํ์
(Symbol()) + '' // "TypeError"
// ๊ฐ์ฒด ํ์
({}) + '' // "[object Object]"
Math + '' // "[object Math]"
[] + '' // ""
[10, 20] + '' // "10, 20"
(function(){}) + '' // "function()"
Array + '' // "function Array() {[native code]}"
9.2.2 ์ซ์ ํ์ ์ผ๋ก ๋ณํ
// ์ซ์ ํ์
+'' // 0
+'0' // 0
+'1' // 1
+'string' // NaN
// ๋ถ์ธ๋ฆฌ์ธ ํ์
+true // 1
+false // 0
// null ํ์
+null // 0
// undefined ํ์
+undefined // NaN
// ์ฌ๋ฒ ํ์
+Symbol() // TypeError
// ๊ฐ์ฒด ํ์
+{} // NaN
+[] // 0
+[10, 20] // NaN
+(function(){}) // NaN
9.2.3 ๋ถ๋ฆฌ์ธ ํ์ ์ผ๋ก ๋ณํ
์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ๋ถ์ธ๋ฆฌ์ธ ํ์ ์ด ์๋ ๊ฐ์ Truthy ๊ฐ ๋๋ Falsy ๊ฐ์ผ๋ก ๊ตฌ๋ถํด ๊ฐ๊ฐ true์ false๋ก ์๋ฌต์ ํ์ ๋ณํ ํ๋ค. ๋ค์์ false๋ก ํ๊ฐ๋๋ Falsy ๊ฐ์ด๋ค. Falsy์ Truthy ๊ฐ ์์ ๋๋ํ(!)๋ฅผ ๋ถ์ด์ฃผ๋ฉด ๊ฐ๊ฐ true์ false๋ก ์ ๋ฌ๋๋ค.
- false
- undefined
- null
- 0, -0
- NaN
- โโ(๋น ๋ฌธ์์ด)
9.3 ๋ช ์์ ํ์ ์ ํ
๊ฐ๋ฐ์์ ์๋์ ๋ฐ๋ผ ๋ช ์์ ์ผ๋ก ํ์ ์ ๋ณ๊ฒฝํ๋ ๋ฐฉ๋ฒ์ ํ์ค ๋นํธ์ธ ์์ฑ์ ํจ์๋ฅผ new ์ฐ์ฐ์ ์์ด ํธ์ถํ๋ ๋ฐฉ๋ฒ, ๋นํธ์ธ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ, ์๋ฌต์ ํ์ ๋ณํ ๋ฐฉ๋ฒ์ด ์๋ค.
๐ง ํ์ค ๋นํธ์ธ ์์ฑ์ ํจ์์ ๋นํธ์ธ ๋ฉ์๋
ํ์ค ๋นํธ์ธ ์์ฑ์ ํจ์์ ํ์ค ๋นํธ์ธ ๋ฉ์๋๋ ์๋ฐ์คํฌ๋ฆฝํธ์์ ๊ธฐ๋ณธ ์ ๊ณตํ๋ ํจ์๋ค. ํ์ค ๋นํธ์ธ ์์ฑ์ ํจ์๋ ๊ฐ์ฒด๋ฅผ ์์ฑํ๊ธฐ ์ํ ํจ์์ด๋ฉฐ new ์ฐ์ฐ์์ ํจ๊ป ํธ์ถํ๋ค. ํ์ค ๋นํธ์ธ ๋ฉ์๋๋ ์๋ฐ์คํฌ๋ฆฝํธ์์ ๊ธฐ๋ณธ ์ ๊ณตํ๋ ๋นํธ์ธ ๊ฐ์ฒด์ ๋ฉ์๋๋ค.
9.3.1 ๋ฌธ์์ด ํ์ ์ผ๋ก ๋ณํ
-
String ์์ฑ์ ํจ์๋ฅผ
new
์ฐ์ฐ์ ์์ด ํธ์ถํ๋ ๋ฐฉ๋ฒ// ์ซ์ ํ์ => ๋ฌธ์์ด ํ์ String(1); // "1" String(NaN); // "NaN" String(Infinity); // "Infinity" // ๋ถ์ธ๋ฆฌ์ธ ํ์ => ๋ฌธ์์ด ํ์ String(true) // "true" String(false) // "false"
-
Object.prototype.toString
๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ// ์ซ์ ํ์ => ๋ฌธ์์ด ํ์ (1).toString(); // "1" (NaN).toString(); // "NaN" (Infinity)toString(); // "Infinity" // ๋ถ์ธ๋ฆฌ์ธ ํ์ => ๋ฌธ์์ด ํ์ (true).toString(); // "true" (false).toString(); // "false"
-
๋ฌธ์์ด ์ฐ๊ฒฐ ์ฐ์ฐ์๋ฅผ ์ด์ฉํ๋ ๋ฐฉ๋ฒ
// ์ซ์ ํ์ => ๋ฌธ์์ด ํ์ 1 + '' // "1" NaN + '' // "NaN" Infinity + '' // "Infinity" // ๋ถ์ธ๋ฆฌ์ธ ํ์ => ๋ฌธ์์ด ํ์ true + '' // "true" false + '' // "false"
9.3.2 ์ซ์ ํ์ ์ผ๋ก ๋ณํ
- Number ์์ฑ์ ํจ์๋ฅผ
new
์ฐ์ฐ์ ์์ด ํธ์ถํ๋ ๋ฐฉ๋ฒ// ๋ฌธ์์ด ํ์ => ์ซ์ ํ์ Number('0'); // -> 0 Number('-1'); // -> -1 Number('10.53'); // -> 10.53 // ๋ถ๋ฆฌ์ธ ํ์ => ์ซ์ ํ์ Number(true); // -> 1 Number(false); // -> 0
parseInt
,parseFloat
ํจ์๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ(๋ฌธ์์ด๋ง ์ซ์ ํ์ ์ผ๋ก ๋ณํ ๊ฐ๋ฅ)parseInt('0'); // -> 0 parseInt('-1'); // -> -1 parseFloat('10.53'); // -> 10.53
+
๋จํญ ์ฐ์ ์ฐ์ฐ์๋ฅผ ์ด์ฉํ๋ ๋ฐฉ๋ฒ// ๋ฌธ์์ด ํ์ => ์ซ์ ํ์ +'0'; // -> 0 +'-1'; // -> -1 +'10.53'; // -> 10.53 // ๋ถ๋ฆฌ์ธ ํ์ => ์ซ์ ํ์ +true; // -> 1 +false; // -> 0
*
์ฐ์ ์ฐ์ฐ์๋ฅผ ์ด์ฉํ๋ ๋ฐฉ๋ฒ// ๋ฌธ์์ด ํ์ => ์ซ์ ํ์ '0' * 1; // -> 0 '-1' * 1; // -> -1 '10.53' * 1; // -> 10.53 // ๋ถ๋ฆฌ์ธ ํ์ => ์ซ์ ํ์ true * 1; // -> 1 false * 1; // -> 0
9.3.3 ๋ถ์ธ๋ฆฌ์ธ ํ์ ์ผ๋ก ๋ณํ
- Boolean ์์ฑ์ ํจ์๋ฅผ
new
์ฐ์ฐ์ ์์ด ํธ์ถํ๋ ๋ฐฉ๋ฒ// ๋ฌธ์์ด ํ์ => ๋ถ๋ฆฌ์ธ ํ์ Boolean('x'); // -> true Boolean(''); // -> false Boolean('false'); // -> true // ์ซ์ ํ์ => ๋ถ๋ฆฌ์ธ ํ์ Boolean(0); // -> false Boolean(1); // -> true Boolean(NaN); // -> false Boolean(Infinity); // -> true // null ํ์ => ๋ถ๋ฆฌ์ธ ํ์ Boolean(null); // -> false // undefined ํ์ => ๋ถ๋ฆฌ์ธ ํ์ Boolean(undefined); // -> false // ๊ฐ์ฒด ํ์ => ๋ถ๋ฆฌ์ธ ํ์ Boolean({}); // -> true Boolean([]); // -> true
!
๋ถ์ ๋ ผ๋ฆฌ ์ฐ์ฐ์๋ฅผ ๋ ๋ฒ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ// ๋ฌธ์์ด ํ์ => ๋ถ๋ฆฌ์ธ ํ์ !!'x'; // -> true !!''; // -> false !!'false'; // -> true // ์ซ์ ํ์ => ๋ถ๋ฆฌ์ธ ํ์ !!0; // -> false !!1; // -> true !!NaN; // -> false !!Infinity; // -> true // null ํ์ => ๋ถ๋ฆฌ์ธ ํ์ !!null; // -> false // undefined ํ์ => ๋ถ๋ฆฌ์ธ ํ์ !!undefined; // -> false // ๊ฐ์ฒด ํ์ => ๋ถ๋ฆฌ์ธ ํ์ !!{}; // -> true !![]; // -> true
9.4 ๋จ์ถ ํ๊ฐ
9.4.1 ๋ ผ๋ฆฌ ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ ๋จ์ถํ๊ฐ
๋ ผ๋ฆฌ๊ณฑ(&&) ์ฐ์ฐ์๋ ๋ ๊ฐ์ ํผ์ฐ์ฐ์๊ฐ ๋ชจ๋ true๋ก ํ๊ฐ๋ ๋ true๋ฅผ ๋ฐํํ๋ค. ๋ ผ๋ฆฌ๊ณฑ ์ฐ์ฐ์๋ ์ขํญ์์ ์ฐํญ์ผ๋ก ํ๊ฐ๊ฐ ์งํ๋๋ค. ๋ ผ๋ฆฌ๊ณฑ ์ฐ์ฐ์๋ ๋ ผ๋ฆฌ ์ฐ์ฐ์ ๊ฒฐ๊ณผ๋ฅผ ๊ฒฐ์ ํ๋ ๋ ๋ฒ์งธ ํผ์ฐ์ฐ์, ์ฆ ๋ฌธ์์ด โDogโ๋ฅผ ๊ทธ๋๋ก ๋ฐํํ๋ค.
๋ ผ๋ฆฌํฉ(||) ์ฐ์ฐ์๋ ๋ ๊ฐ์ ํผ์ฐ์ฐ์ ์ค ํ๋๋ง true๋ก ํ๊ฐ ๋์ด๋ true๋ฅผ ๋ฐํํ๋ค. ๋ ผ๋ฆฌํฉ ์ฐ์ฐ์๋ ์ขํญ์์ ์ฐํญ์ผ๋ก ํ๊ฐ๊ฐ ์งํ๋๋ค. ๋ ผ๋ฆฌํฉ ์ฐ์ฐ์๋ ๊ฒฐ๊ณผ๋ฅผ ๊ฒฐ์ ํ ์ฒซ ๋ฒ์งธ ํผ์ฐ์ฐ์, ์ฆ ๋ฌธ์์ด โCatโ ์ ๊ทธ๋๋ก ๋ฐํํ๋ค.
๋ ผ๋ฆฌ๊ณฑ ์ฐ์ฐ์์ ๋ ผ๋ฆฌํฉ ์ฐ์ฐ์๋ ์ด์ฒ๋ผ ๋ ผ๋ฆฌ ์ฐ์ฐ์ ๊ฒฐ๊ณผ๋ฅผ ๊ฒฐ์ ํ๋ ํผ์ฐ์ฐ์๋ฅผ ํ์ ๋ณํํ์ง ์๊ณ ๊ทธ๋๋ก ๋ฐํํ๋ค. ์ด๋ฅผ ๋จ์ถ ํ๊ฐ๋ผ๊ณ ํ๋ค. ๋จ์ถ ํ๊ฐ๋ ํํ์์ ํ๊ฐํ๋ ๋์ค์ ํ๊ฐ๊ฒฐ๊ณผ๊ฐ ํ์ ๋ ๊ฒฝ์ฐ ๋๋จธ์ง ํ๊ฐ ๊ณผ์ ์ ์๋ตํ๋ ๊ฒ์ ๋งํ๋ค. ๋จ์ถํ๊ฐ๋ฅผ ์ฌ์ฉํ๋ฉด if ๋ฌธ์ ๋์ฒดํ ์ ์์ผ๋ฉฐ, ์ผํญ ์กฐ๊ฑด ์ฐ์ฐ์๋ if-else ๋ฌธ์ ๋์ฒดํ ์ ์๋ค.
true || anything // true
false || anything // anything
true && anything // anything
false && anything // false
var done = true;
var message = '';
// if...else ๋ฌธ
if (done) message = '์๋ฃ';
else message = '๋ฏธ์๋ฃ';
console.log(message); // ์๋ฃ
// if...else ๋ฌธ์ ์ผํญ ์กฐ๊ฑด ์ฐ์ฐ์๋ก ๋์ฒด ๊ฐ๋ฅํ๋ค.
message = done ? '์๋ฃ' : '๋ฏธ์๋ฃ';
console.log(message); // ์๋ฃ
9.4.2 ์ต์ ๋ ์ฒด์ด๋ ์ฐ์ฐ์
ES11(ECMAScript2020)์ ๋์ ๋ ์ต์ ๋ ์ฒด์ด๋ ์ฐ์ฐ์ (?.)๋ ์ขํญ์ ํผ์ฐ์ฐ์๊ฐ null ๋๋ undefined์ธ ๊ฒฝ์ฐ undefined๋ฅผ ๋ฐํํ๊ณ , ๊ทธ๋ ์ง ์์ผ๋ฉด ์ฐํญ์ ํ๋กํผํฐ ์ฐธ์กฐ๋ฅผ ์ด์ด๊ฐ๋ค.
var elem = null;
// elem์ด null ๋๋ undefined์ด๋ฉด undefined๋ฅผ ๋ฐํํ๊ณ , ๊ทธ๋ ์ง ์์ผ๋ฉด ์ฐํญ์ ํ๋กํผํฐ ์ฐธ์กฐ๋ฅผ ์ด์ด๊ฐ๋ค.
var value = elem?.value;
console.log(value); // undefined
9.4.3 null ๋ณํฉ ์ฐ์ฐ์
ES11(ECMAScript2020)์ ๋์ ๋ null ๋ณํฉ ์ฐ์ฐ์ ??๋ ์ขํญ์ ํผ์ฐ์ฐ์ null ๋๋ undefined์ธ ๊ฒฝ์ฐ ์ฐํญ์ ํผ์ฐ์ฐ์๋ฅผ ๋ฐํํ๊ณ , ๊ทธ๋ ์ง ์์ผ๋ฉด ์ขํญ์ ํผ์ฐ์ฐ์๋ฅผ ๋ฐํํ๋ค. null ๋ณํฉ ์ฐ์ฐ์ ??๋ ๋ณ์์ ๊ธฐ๋ณธ๊ฐ์ ์ค์ ํ ๋ ์ ์ฉํ๋ค.
// ์ขํญ์ ํผ์ฐ์ฐ์๊ฐ null ๋๋ undefined์ด๋ฉด ์ฐํญ์ ํผ์ฐ์ฐ์๋ฅผ ๋ฐํํ๊ณ ,
// ๊ทธ๋ ์ง ์์ผ๋ฉด ์ขํญ์ ํผ์ฐ์ฐ์๋ฅผ ๋ฐํํ๋ค.
var foo = null ?? 'default string'
console.log(foo); // "default string"
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ 09์ฅ ํ์ ๋ณํ๊ณผ ๋จ์ถ ํ๊ฐ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@chestnut1044/09์ฅ-ํ์ -๋ณํ๊ณผ-๋จ์ถ-ํ๊ฐ์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค