TIL018_210409

keepcalmยท2021๋…„ 4์›” 9์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
18/33
post-thumbnail

๐ŸŠ ๊ฐ์ƒ

๊ณ„์† udemy ๊ฐ•์˜๋งŒ ์ซ“์•„๊ฐ€๋‹ค๋ณด๋‹ˆ ๋ฌธ๋ฒ•์ ์ธ ๋ถ€๋ถ„์—์„œ ๋†“์น˜๋Š” ๊ฒŒ ๋งŽ์•˜๋‹ค
๊ฐ์ฒด์™€ ํด๋ž˜์Šค๋„ ์ œ๋Œ€๋กœ ๊ตฌ๋ถ„ ๋ชปํ•˜๊ณ  ํ•จ์ˆ˜์™€ ๋ฉ”์„œ๋“œ ์˜ˆ์ œ๋งŒ ๋”ฐ๋ผ ํ•จ...
๊ฒŒ๋‹ค๊ฐ€ ๊ณ„์† ์˜์–ด๋กœ ๊ฐ•์˜ ๋“ฃ๋‹ค ๋ณด๋‹ˆ ํ™•์‹คํ•˜๊ฒŒ ์ดํ•ดํ•˜์ง€ ๋ชปํ•˜๊ณ  ๋„˜๊ธฐ๋Š” ๋ถ€๋ถ„๋„ ์žˆ์—ˆ์Œ

๋‹น๋ถ„๊ฐ„์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ• ๊ณต๋ถ€ + udemy ๊ฐ•์˜ ๋ณต์Šต + ๊ธฐ๋ณธ ๊ฐœ๋ฐœ ์ƒ์‹์— ๋Œ€ํ•ด ์–ด๋Š์ •๋„ ๊ณต๋ถ€ํ•˜๊ณ  ๋‚œ ํ›„ ๋‹ค์‹œ udemy ๊ฐ•์˜๋กœ ๋Œ์•„๊ฐ€๋ ค ํ•œ๋‹ค.
๋‹คํ–‰ํžˆ ์ข‹์€ ๊ฐ•์˜๊ฐ€ ๋งŽ์•„์„œ ์ดํ•ด๊ฐ€ ๋„ˆ๋ฌด ์ž˜ ๋จ~

๐Ÿ“™ ์—ดํ’ˆํƒ€ ์ฝ”๋”ฉ ์‹œ๊ฐ„ 9hour
๐Ÿ‘๐Ÿผ -
๐Ÿ‘Ž๐Ÿผ -

๐Ÿš€ ๋ชฉํ‘œ

  • Udemy์—์„œ Javascript ๊ฐ•์ขŒ ์ˆ˜๊ฐ•ํ•˜๊ธฐ (332/682)
  • ์ปค๋ฐ‹ ์—ฐ์† 30์ผ ๋‹ฌ์„ฑํ•˜๊ธฐ (3/30, 4.09 ์™„๋ฃŒ)

[๋งํฌ ๋ชฉ๋ก]
Web Developer Bootcamp 2021

๐Ÿ“ฃ The Web Developer Bootcamp 2021: 26.3-26.7

26-7. โญ๏ธโญ๏ธโญ๏ธ Score keeper

winningScoreSelect.addEventListener("change", function () {
  winningScore = parseInt(this.value);
  reset();
});
//์ฒซ๋ฒˆ์งธ ๋ฉ”์„œ๋“œ
//this is the callback
//passing this anonymous function as a callback and excute reset inside

resetButton.addEventListener("click", reset);
//๋‘๋ฒˆ์งธ ๋ฉ”์„œ๋“œ
//not executing, passing a reference
//it will execute reset when time is come
//passing as callback

function reset() {
  isGameOver = false;
  p1Score = 0;
  p2Score = 0;
  p1Display.textContent = 0;
  p2Display.textContent = 0;
  p1Display.classList.remove("winner", "loser");
  p2Display.classList.remove("winner", "loser");
}

์˜๋ฌธ์ 

  1. ์–ด์ฐจํ”ผ ์ฒซ๋ฒˆ์งธ ๋ฉ”์„œ๋“œ์™€ ๋‘๋ฒˆ์งธ ๋ฉ”์„œ๋“œ ๋‘˜ ๋‹ค reset ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋Š” ๊ฒƒ์€ ๋˜‘๊ฐ™์€๋ฐ, ์™œ ํ•˜๋‚˜๋Š” ๊ด„ํ˜ธ๋ฅผ ์“ฐ๊ณ , ๋‹ค๋ฅธ ํ•˜๋‚˜๋Š” ์“ฐ๋ฉด ์•ˆ ๋˜๋Š”๊ฐ€
  • ์ฐธ๊ณ ๋งํฌ: ์œ ๋ฐ๋ฏธ
    When you write yyy(), the function is executed at that instant instead of being called on click. So we just pass the definition and eventListener calls it when ever that event is fired. If you add () while writing function inside .addEventListener then it'll call that function without waiting for the event to happen.
    -> ์ฒซ๋ฒˆ์งธ ๋ฉ”์„œ๋“œ๋Š” ()๋ฅผ ์จ๋„ ๋ฐ”๋กœ ์‹คํ–‰๋˜๋Š” ๊ฒŒ ์•„๋‹ˆ๋ผ changeํ–ˆ์„ ๋•Œ ์‹คํ–‰๋˜๋Š” ๊ฒƒ ์•„๋‹Œ๊ฐ€? ์ฒซ๋ฒˆ์งธ ๋‘๋ฒˆ์งธ ๋‘˜ ๋‹ค ๋ฐ”๋กœ ์‹คํ–‰๋˜์ง€ ์•Š๊ณ  ์ด๋ฒคํŠธ ํƒ€์ž… ์ž…๋ ฅ๋์„ ๋•Œ ์‹คํ–‰๋˜์ง€ ์•Š๋‚˜??
    -> ์ฒซ๋ฒˆ์งธ ๋ฉ”์„œ๋“œ์—์„œ ์ต๋ช…ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๊ฒŒ ์•„๋‹ˆ๋ผ ์„ ์–ธํ•˜๋Š” ๊ฒƒ์ธ๊ฐ€? ํ•˜์ง€๋งŒ ์ต๋ช…ํ•จ์ˆ˜๋Š” ์ฆ‰์‹œ ์‹คํ–‰์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ ์„ ์–ธํ•œ๋‹ค๋Š”๋ฐ?
  1. ํ˜น์‹œ ์ฒซ๋ฒˆ์งธ ๋ฉ”์„œ๋“œ๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑํ•ด๋„ ๋˜‘๊ฐ™์ด ์‹คํ–‰๋˜๋Š”๊ฐ€?
winningScoreSelect.addEventListener("change", changeScore);

function changeScore() {
  winningScore = parseInt(this.value);
  reset();
};  

-> ์‹คํ–‰์ด ๋œ๋‹ค... ์ฒซ๋ฒˆ์งธ ๋ฉ”์„œ๋“œ์—์„œ ์ต๋ช…ํ•จ์ˆ˜๋Š” ํ˜ธ์ถœ์ด ์•„๋‹Œ ์„ ์–ธํ•˜๋Š” ๊ฒƒ.
-> ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ•จ์ˆ˜๋„ ์˜ค๋ธŒ์ ํŠธ๋ผ๋ฉด, ์ฒซ๋ฒˆ์งธ ๋ฉ”์„œ๋“œ์˜ ์ต๋ช…ํ•จ์ˆ˜์™€ reset ํ•จ์ˆ˜๋Š” ๋ชจ๋‘ ์„ ์–ธ๋  ๋•Œ reference์— ์ €์žฅ๋˜๋Š” ๊ฒƒ..?

-> ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ํ•จ์ˆ˜ ์ž์ฒด๊ฐ€ 1๊ธ‰ ๊ฐ์ฒด, ๊ฐ’์œผ๋กœ ์ทจ๊ธ‰๋˜์–ด ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ๋„ ์ „๋‹ฌ๋  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด, reset์ด ๋‘๋ฒˆ์งธ ๋ฉ”์„œ๋“œ์—์„œ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ์ „๋‹ฌ๋์„ ๋•Œ,reset()์€ addEventListener()๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋“ฑ๋ก๋œ click ์ด๋ฒคํŠธ์— ๋Œ€ํ•œ ๋ฆฌ์Šค๋„ˆ์ด๋‹ค.

์ดํ•ดํ•œ ๊ฒฐ๊ณผ

-> ํ•จ์ˆ˜ ํ‘œํ˜„์‹์— ๋Œ€ํ•œ ์ดํ•ด ๋ถ€์กฑ์œผ๋กœ ์ƒ๊ธด ์ผ

์ฒซ๋ฒˆ์งธ ๋ฉ”์„œ๋“œ์—์„œ ์ต๋ช…ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•ด์„œ ๋ณ€์ˆ˜๋ฅผ ํ• ๋‹นํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ํ•จ์ˆ˜ ํ‘œํ˜„์‹ ๋ฐฉ์‹์œผ๋กœ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜๊ณ  ์žˆ๋‹ค.
๋”ฐ๋ผ์„œ ์ฒซ๋ฒˆ์งธ ๋ฉ”์„œ๋“œ ๋‘๋ฒˆ์งธ ๋ฉ”์„œ๋“œ ๋ชจ๋‘ ๋ฆฌ์Šค๋„ˆ์— ํ•จ์ˆ˜ ์‹คํ–‰์ด ์•„๋‹Œ ํ•จ์ˆ˜๋ฅผ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ์ „๋‹ฌํ•˜๊ณ  ์žˆ๋‹ค. ์ด๋ ‡๊ฒŒ ์ธ์ž๋กœ ๋„˜๊ฒจ์ง€๋Š” ํ•จ์ˆ˜๋ฅผ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.
์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” ์Šคํฌ๋ฆฝํŠธ์˜ ์–ด๋Š ๋ถ€๋ถ„์—์„œ๋ผ๋„ ์ •์˜๋  ์ˆ˜ ์žˆ๋‹ค. ํ•จ์ˆ˜๋ฅผ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋กœ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ, ํ•จ์ˆ˜์˜ ์ด๋ฆ„๋งŒ ์ธ์ž๋กœ ๋„˜๊ฒจ์ฃผ๋ฉด ๋œ๋‹ค.
ํ•จ์ˆ˜์˜ ์ธ์ž๋กœ ์ „๋‹ฌ๋œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” ์›ํ•˜๋Š” ์‹œ์ ์— ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค

๐Ÿ“ฃ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•

parameter์™€ argument

๋งค๊ฐœ๋ณ€์ˆ˜(parameter)

ํ•จ์ˆ˜์˜ ์ •์˜ ๋ถ€๋ถ„์— ๋‚˜์—ด๋ผ ์žˆ๋Š” ๋ณ€์ˆ˜(variable)
ํ•จ์ˆ˜์˜ ์ •์˜

def plus(a,b):
	return a+b;  //-> a, b

์ „๋‹ฌ์ธ์ž(argument)

ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ ์ „๋‹ฌ๋˜๋Š” ์‹ค์ œ ๊ฐ’(value)
ํ•จ์ˆ˜์˜ ํ˜ธ์ถœ

result = plus(1,2) //-> 1, 2

๊ฐ์ฒด ์ง€ํ–ฅ class ๋ฌธ๋ฒ•

<script>
var a = { name: 'kim' }
var b = { name: 'jang' }//object ์ž๋ฃŒํ˜•
//๋น„์Šทํ•œ object๊ฐ€ ์žˆ์„ ๊ฒฝ์šฐ class๋ฅผ ๋งŒ๋“ ๋‹ค / class๋Š” object๋ฅผ ๋ฝ‘์•„๋‚ด๋Š” ๊ธฐ๊ณ„

function ๊ธฐ๊ณ„(){ //์˜ˆ์ „ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์—๋Š” ํด๋ž˜์Šค๊ฐ€ ์—†์—ˆ์œผ๋‚˜ function์œผ๋กœ ํด๋ž˜์Šค ๋งŒ๋“ค์–ด๋ƒ„
	this.name = 'kim'; //object ์ƒ์„ฑ ๊ธฐ๊ณ„ = constructor ๋ผ๊ณ  ํ•œ๋‹ค
}    
var a = new ๊ธฐ๊ณ„(); //object ์ƒ์„ฑ ํ•œ์ค„ ์ปท
//this๋Š” ๊ธฐ๊ณ„๋กœ๋ถ€ํ„ฐ ์ƒ์„ฑ๋˜๋Š” ์˜ค๋ธŒ์ ํŠธ (instance๋ผ๊ณ  ํ•˜๊ธฐ๋„)
</script>

//ํŒŒ๋ผ๋ฏธํ„ฐ ํ™œ์šฉ๋ฒ•
function ๊ธฐ๊ณ„(i){
	this.name = i;
}
var a = new ๊ธฐ๊ณ„(kim);

//์ตœ๊ทผ class ๋ฌธ๋ฒ•
class ๊ธฐ๊ณ„ {
	constructor(i){
    	this.name = i;
}     
new ๊ธฐ๊ณ„();

SPA

single page application - react, angular, vue.js / node.js(๋ฐฑ์—”๋“œ)

async์™€ defer

head ์•ˆ์˜ script


์‹œ๊ฐ„ ์˜ค๋ž˜ ๊ฑธ๋ฆผ

body ์•ˆ์˜ script


์ฝ˜ํ…์ธ  ๋นจ๋ฆฌ ๋ณด๊ธด ํ•˜๋‚˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์˜์กด ํŽ˜์ด์ง€์— ์•ˆ ์ข‹์Œ

head + async


async๋Š” boolean ํƒ€์ž…์˜ ์†์„ฑ๊ฐ’์ด๊ธฐ ๋•Œ๋ฌธ์— ์„ ์–ธํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋„ true๊ฐ€ ๋œ๋‹ค / ๋ณ‘๋ ฌ
์‹œ๊ฐ„ ์ ๊ฒŒ ๊ฑธ๋ฆฌ๋‚˜ js ์‹คํ–‰๋˜๊ณ  ์žˆ๋Š”๋ฐ html ๋‚ด์—์„œ ์›ํ•˜๋Š” ์š”์†Œ๊ฐ€ ์ •์˜๋ผ ์žˆ์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ๋‹ค
์ •์˜๋œ ์Šคํฌ๋ฆฝํŠธ ์ˆœ์„œ์— ์ƒ๊ด€์—†์ด ๋‹ค์šด๋กœ๋“œ ๋จผ์ € ๋œ, fetching๋œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋จผ์ € ์‹คํ–‰, excuteํ•œ๋‹ค
-> ์ˆœ์„œ์— ์˜์กด์ ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ฌธ์ œ๊ฐ€ ๋จ

head + defer

<head>
	<script defer src="main.js"></script>
</head>


defer์„ ๊ฐ€์žฅ ์ข‹์€ ์˜ต์…˜
์Šคํฌ๋ฆฝํŠธ ์ˆœ์„œ๋Œ€๋กœ ์‹คํ–‰๋œ๋‹ค

'use strict';

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์“ธ ๋•Œ๋Š” ์„ ์–ธํ•  ํ•„์š” ์—†์Œ
added in es 5

  1. ์„ ์–ธ๋˜์ง€ ์•Š์€ ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ํ• ๋‹น ๋ชปํ•˜๊ฒŒ ํ•จ
  2. ๊ธฐ์กด์˜ ์กด์žฌํ•˜๋Š” ํ”„๋กœํ† ํƒ€์ž… ๋ณ€๊ฒฝ์„ ๋ง‰์Œ
a=6; //strict ๋ชจ๋“œ ์•„๋‹ ๋•Œ์—๋Š” ํ—ˆ์šฉ
let a;
a = 6; //strict ๋ชจ๋“œ์—์„œ๋Š” ๋ฐ˜๋“œ์‹œ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋งŒ ๊ฐ’ ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•จ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ์ดํ„ฐ ํƒ€์ž…

์ž…๋ ฅ - ์—ฐ์‚ฐ - ์ถœ๋ ฅ

  1. cpu์— ์ตœ์ ํ™”๋œ ๋กœ์ง, ์—ฐ์‚ฐ ์งœ๊ธฐ
  2. ๋ฉ”๋ชจ๋ฆฌ์˜ ์‚ฌ์šฉ์„ ์ตœ์†Œํ™”ํ•˜๊ณ  ๋ฉ”๋ชจ๋ฆฌ ๋ฆญ ๋ฐฉ์ง€

variable - rw(read/write)

๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ๋Š” ๊ฐ’
๋ณ€์ˆ˜๋Š” ๋ฉ”๋ชจ๋ฆฌ์˜ ๊ฐ’์„ ์ฝ๊ณ  ์“ฐ๋Š” ๊ฒŒ ๊ฐ€๋Šฅํ•˜๋‹ค
let ํ‚ค์›Œ๋“œ (added in es6)

let name = 'ellie'; //let ์ด๋ผ๋Š” keyword๋กœ name์ด๋ผ๋Š” variable๋ณ€์ˆ˜๋ฅผ ์„ ์–ธdeclarationํ•˜๋‹ค
name = 'hello';//name์ด๋ผ๋Š” ๋ณ€์ˆ˜์— hello๋ผ๋Š” ๊ฐ’์„ ํ• ๋‹นํ•œ๋‹ค

์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๋งˆ๋‹ค ์“ธ ์ˆ˜ ์žˆ๋Š” ๋ฉ”๋ชจ๋ฆฌ๊ฐ€ ํ• ๋‹น๋œ๋‹ค - ํ……ํ…… ๋นˆ ๋ฐ•์Šค๋ผ๊ณ  ์ƒ๊ฐํ•˜์ž

let name -> ๋ฉ”๋ชจ๋ฆฌ ํ•œ ์นธ์„ ์“ธ ์ˆ˜ ์žˆ๋Š” ํฌ์ธํ„ฐ๊ฐ€ ์ƒ๊ธฐ๊ฒŒ ๋˜๋Š” ๊ฒƒ
let name = 'ellie'; //๋ฉ”๋ชจ๋ฆฌ์— ellie๋ผ๋Š” ๊ฐ’์„ ์ €์žฅํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜๋Š” ๊ฒƒ
name = 'hello'; //๋‹ค๋ฅธ ๊ฐ’์„ ๋„ฃ์–ด์„œ ์ €์žฅํ•  ์ˆ˜ ์žˆ๋‹ค

block scope

{
//์ด ๋ธ”๋ก ๋ฐ–์—์„œ๋Š” ๋ธ”๋ก ์•ˆ์˜ ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋‹ค
}
//๋ธ”๋ก ๋ฐ–์—์„œ ์ •์˜ํ•ด์„œ ์“ฐ๋Š” ๋ณ€์ˆ˜๋Š” global scope์ด๋‹ค, ์–ด๋Š ๊ณณ์—์„œ๋‚˜ ์ ‘๊ทผ ๊ฐ€๋Šฅ
//global value๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์‹œ์ž‘๋ถ€ํ„ฐ ๋๊นŒ์ง€ ๊ณ„์† ๋ฉ”๋ชจ๋ฆฌ ์•ˆ์— ํƒ‘์žฌ๋ผ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ตœ์†Œํ•œ์œผ๋กœ ์“ฐ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•  ์ˆ˜ ์žˆ๋Š” ํ‚ค์›Œ๋“œ๋Š” ๋‹จ ํ•˜๋‚˜, let - mutable
๋Œ€๋ถ€๋ถ„์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ๋Š” ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  ๋‚˜์„œ ๊ฐ’์„ ํ• ๋‹นํ•˜๋Š” ๊ฒŒ ์ •์ƒ์ 

var์€ ์“ฐ์ง€ ๋งˆ! - ์“ฐ๋ฉด ์•ˆ ๋˜๋Š” ์ด์œ 

  1. var์—์„œ๋Š” ๋ณ€์ˆ˜ ์„ ์–ธํ•˜๊ธฐ ์ „์— ๊ฐ’์„ ํ• ๋‹นํ•  ์ˆ˜ ์žˆ์Œ, ๊ฐ’์„ ํ• ๋‹น ์ „์— ์ถœ๋ ฅํ•  ์ˆ˜๋„ ์žˆ์Œ -> ๋น„์ •์ƒ์ , ์ด๊ฒƒ์„ var hoisting์ด๋ผ๊ณ  ํ•œ๋‹ค
  2. var์€ block scope์ด ์—†๋‹ค
  • hoisting
    ์–ด๋””์— ์„ ์–ธํ–ˆ๋ƒ์— ์ƒ๊ด€์—†์ด ํ•ญ์ƒ ์ œ์ผ ์œ„๋กœ ์„ ์–ธ์„ ๋Œ์–ด์˜ฌ๋ ค ์ฃผ๋Š” ๊ฒƒ
    move declaration from bottom to top

constant - r(read only)

ํ•œ ๋ฒˆ ํ• ๋‹นํ•˜๋ฉด ๊ฐ’์ด ์ ˆ๋Œ€ ๋ฐ”๋€Œ์ง€ ์•Š๋Š”๋‹ค
constant๋Š” ์ฝ๊ธฐ๋งŒ ๊ฐ€๋Šฅํ•˜๊ณ  ๋‹ค๋ฅธ ๊ฐ’์„ ์“ฐ๋Š” ๊ฒƒ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค

favor immutable data type always for a few resons:

  1. security (ํ•ด์ปค ๊ณต๊ฒฉ)
  2. thread safety (ํ•œ ๊ฐ€์ง€์˜ ํ”„๋กœ์„ธ์Šค ํ• ๋‹น, ๊ทธ ์•ˆ์˜ ๋‹ค์–‘ํ•œ ์Šค๋ ˆ๋“œ ๋Œ์•„๊ฐ€๋ฉฐ ๋™์‹œ์— ๋ณ€์ˆ˜์— ์ ‘๊ทผ ํ›„ ๊ฐ’ ๋ณ€๊ฒฝ)
  3. reduce human mistakes

ํฌ์ธํ„ฐ๊ฐ€ ์ž ๊ธฐ๋Š” ๊ฒƒ

immutable data type๊ณผ mutable data type

immutable data type: primitive type, frozen object(object.freeze())
-> 'ellie'๋ผ๋Š” ์ŠคํŠธ๋ง ์ž์ฒด๋ฅผ ๋‹ค๋ฅธ ์ŠคํŠธ๋ง์œผ๋กœ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ, ํ•˜์ง€๋งŒ ์ŠคํŠธ๋ง ๋ฐ์ดํ„ฐ ์ž์ฒด๋ฅผ 'ellee'์‹์œผ๋กœ ๋ณ€๊ฒฝ์€ ๋ถˆ๊ฐ€๋Šฅํ•จ
mutable data type: all objects by default are mutable in JS
-> object, array๋Š” mutable data type

variable types

primitive type (๋” ์ด์ƒ ์ž‘์€ ๋‹จ์œ„๋กœ ๋‚˜๋ˆ ์งˆ ์ˆ˜ ์—†๋Š” ํ•œ ๊ฐ€์ง€ ํƒ€์ž…, single item, number, string, boolean, null, undefiend, symbol)
-> ๊ฐ’ value ์ž์ฒด๊ฐ€ ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅ๋œ๋‹ค

objective type (single item๋“ค์„ ๋ฌถ์–ด์„œ ํ•œ ๋ฐ•์Šค๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ๊ฒƒ, box container, function, first-class function)
-> object๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” reference๊ฐ€ ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅ๋œ๋‹ค

first-class function์ด๋ž€ : function๋„ ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐ ํƒ€์ž…์ฒ˜๋Ÿผ ๋ณ€์ˆ˜์— ํ• ๋‹น์ด ๊ฐ€๋Šฅํ•œ ๊ฒƒ, ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ํ•จ์ˆ˜์— parameter๋งค๊ฐœ์ธ์ž๋กœ์จ ์ „๋‹ฌ๋  ์ˆ˜ ์žˆ์Œ, ํ•จ์ˆ˜์—์„œ function์„ returnํ•  ์ˆ˜๋„ ์žˆ์Œ

c์–ธ์–ด์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…๊ณผ ๋น„๊ตํ•ด๋ณด์ž

c์–ธ์–ด๋Š” ๋กœ์šฐ ๋ ˆ๋ฒจ์˜ ์–ธ์–ด๋กœ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ฉ”๋ชจ๋ฆฌ ๊ด€๋ฆฌ๋ฅผ ํ•  ์ˆ˜ ์žˆ๋Š” ์–ธ๋งค๋‹ˆ์ง€๋“œ ์–ธ์–ด
-> short, int, long, float, double

์ž๋ฐ”์—๋„ byte, short, long, int, float, double ๋“ฑ์˜ number data type์ด ์žˆ์Œ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” number ์ด๋ผ๊ณ  data type์„ ์„ ์–ธํ•˜์ง€ ์•Š์•„๋„ type์ด dynamicํ•˜๊ฒŒ ๊ฒฐ์ •๋œ๋‹ค
integer(์ •์ˆ˜)์™€ decimal number(์†Œ์ˆ˜) ๋ชจ๋‘ ์ƒ๊ด€์—†์ด number type์œผ๋กœ ํ• ๋‹น๋œ๋‹ค

ํŠน์ˆ˜ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ number ๊ฐ’(special numeric values)

const infinity = 1 / 0; // Infinity
const negativeInfinity = -1 / 0; // -Infinity
const nAn = 'not a number' / 2; // NaN 
//validํ•œ ๊ฐ’์ธ์ง€ ํ™•์ธํ•˜๊ณ  ์—ฐ์‚ฐํ•˜๋„๋ก ํ•˜์ž

bigInt

const bigInt = 1232343423n;

string

const helloBob = `hi ${brendon}`; //template literals(string)

boolean

false: 0, null, undefined, NaN, ''
true: any other value

null ๊ณผ undefined

null์€ empty value ๋ผ๊ณ  ์ง€์ •ํ•˜๋Š” ๊ฒƒ
undefined๋Š” ์„ ์–ธ๋์ง€๋งŒ ๊ฐ’์ด ์ง€์ •๋ผ์ง€ ์•Š์€ ๊ฒƒ (let x; or let x=undefined;)

symbol

๋งต์ด๋‚˜ ๋‹ค๋ฅธ ์ž๋ฃŒ ๊ตฌ์กฐ์—์„œ ๊ณ ์œ ํ•œ ์‹๋ณ„์ž๊ฐ€ ํ•„์š”ํ•˜๊ฑฐ๋‚˜ ๋™์‹œ ๋‹ค๋ฐœ์ ์œผ๋กœ ์ผ์–ด๋‚  ์ˆ˜ ์žˆ๋Š” ์ฝ”๋“œ์—์„œ ์šฐ์„ ์ˆœ์œ„๋ฅผ ์ฃผ๊ณ  ์‹ถ์„ ๋•Œ ๊ณ ์œ ํ•œ ์‹๋ณ„์ž๊ฐ€ ํ•„์š”ํ•  ๋•Œ ์“ฐ์ด๋Š” ๊ฒƒ
create unique identifiers for objects
๋™์ผํ•œ string์„ ์ž‘์„ฑํ–ˆ์–ด๋„ ๊ณ ์œ ํ•˜๊ฒŒ ์ฃผ์–ด์ง

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2); //false
cos

dynamic typing : dynamically typed language

c๋‚˜ jave์–ธ์–ด๋Š” statically typed language๋ผ๊ณ  ํ•œ๋‹ค
-> ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•  ๋•Œ ์–ด๋–ค ํƒ€์ž…์ธ์ง€ ๊ฒฐ์ •ํ•ด์„œ ํƒ€์ž…๋„ ๊ฐ™์ด ์„ ์–ธํ•œ๋‹ค

javascript -> ์„ ์–ธํ•  ๋•Œ ํƒ€์ž…์„ ์„ ์–ธํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ runtime, ํ”„๋กœ๊ทธ๋žจ์ด ๋™์ž‘ํ•  ๋•Œ ํ• ๋‹น๋œ ๊ฐ’์— ๋”ฐ๋ผ์„œ ํƒ€์ž…์ด ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ๋‹ค
-> ๊ทœ๋ชจ๊ฐ€ ํฐ ํ”„๋กœ๊ทธ๋žจ ์งค ๋•Œ๋Š” ๋ฌธ์ œ๊ฐ€ ๋  ์ˆ˜ ์žˆ์Œ

let text = 'hello';
console.log(text.charAt(0)); //h //์ธ๋ฑ์Šค์— ์œ„์น˜ํ•˜๋Š” ์œ ๋‹ˆ์ฝ”๋“œ ๋‹จ์ผ๋ฌธ์ž ๋ฐ˜ํ™˜
console.log(`${text}, ${typeOf text}`); // hello, string //value, type ๋ฐ˜ํ™˜
text=1; 
console.log(`${text}, ${typeOf text}`); // 1, number
text = '7' + 5 //
console.log(`${text}, ${typeOf text}`); // 75, string
text = '8' / '2' ; 
console.log(`${text}, ${typeOf text}`); // 4, number
console.log(text.charAt(0)); //error

object

๋ฌผ๊ฑด๊ณผ ๋ฌผ์ฒด๋ฅผ ๋Œ€ํ‘œํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐ•์Šค ํ˜•ํƒœ

const ellie = {name: 'ellie', age: 20};
ellie.age=21;

ellie๋ผ๋Š” ์˜ค๋ธŒ์ ํŠธ ์•ˆ์— name ๊ณผ age๋ผ๋Š” ๋ณ€์ˆ˜๊ฐ€ ์กด์žฌํ•˜๊ณ  ๊ฐ๊ฐ ๋ฉ”๋ชจ๋ฆฌ์˜ ๊ฐ’์ด ํ• ๋‹น๋จ

operator(์—ฐ์‚ฐ)

String concatenation (๋ฌธ์ž์—ด ๊ฒฐํ•ฉ)

console.log('my'+' cat'); //my cat
console.log('1'+2); //12
console.log(`string literals: 1+2 = ${1+2}`); //string literals: 1+2 = 3
console.log('ellie\'s \n \t book'); //ํŠน์ˆ˜ ๋ฌธ์ž์—ด \n์ค„๋ฐ”๊ฟˆ \tํƒญ

Numeric operators

  • add
  • substract
    / divide
  • multiply
    % remainder
    ** exponentiation

Increment and decrement operators

let counter = 2;
const preIncrement = ++counter;
//counter = counter + 1;
//preIncrement = counter;
console.log(`${preIncrement}, ${counter}); //3,3
const postIncrement = counter++;
//postIncrement = counter;
//counter = counter + 1;
console.log(`${preIncrement}, ${counter}); //3,4

-> preDecrement๋„ ๊ฐ™์€ ์›๋ฆฌ

Assignment operators (ํ• ๋‹นํ•˜๋Š” ์˜คํผ๋ ˆ์ดํ„ฐ)

x+=y; //x=x+y;

Comparison operators (๋น„๊ตํ•˜๋Š” ์˜คํผ๋ ˆ์ดํ„ฐ)

<=, >=, <, >

Logical operator

|| (or) -> finds the first truthy value, true ๋‹ค์Œ ๊ฐ’์ด ๋‚˜์˜ค์ง€ ์•Š์Œ
๋”ฐ๋ผ์„œ simpleํ•œ value๋Š” ์•ž์— ๋‘๋Š” ๊ฒƒ์ด ์ข‹๋‹ค

&& (and) -> finds the first falsy value, false ๋‹ค์Œ ๊ฐ’์ด ๋‚˜์˜ค์ง€ ์•Š์Œ
๋”ฐ๋ผ์„œ heavyํ•œ operation์ผ ์ˆ˜๋ก ์ œ์ผ ๋’ค์—์„œ ์ฒดํฌํ•œ๋‹ค
๊ฐ„ํŽธํ•˜๊ฒŒ null์ฒดํฌ๋ฅผ ํ•  ๋•Œ๋„ ์“ฐ์ธ๋‹ค
often used to compress long if-statement
nullableObject && nullableObject.something (nullObject๊ฐ€ null์ด ์•„๋‹ ๋•Œ๋งŒ something์ด๋ผ๋Š” value๋ฅผ ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค)
if (nullableObject !== null) { nullableObject.something; }

! (not)

Equality operator

const stringFive = '5';
const numberFive = 5;

// == loose equality, with type conversion
console.log(stringFive==numberFive); //true
console.log(stringFive!=numberFive); //false

// === strict equality, no type conversion
console.log(stringFive===numberFive); //false
console.log(stringFive!==numberFive); //true

//object equality by reference
const ellie1 = {name: 'ellie};
const ellie2 = {name: 'ellie};
const ellie3 = ellie1;
console.log(ellie1 == ellie2); //false, referene๊ฐ€ ๋‹ค๋ฅด๋‹ค
console.log(ellie1 === ellie2); //false, refernce ๊ฐ’์ด ๋‹ค๋ฅด๋‹ค
console.log(ellie1 === ellie3); //true, ๊ฐ™์€ referene

//equality puzzle
console.log(0==false); //t
console.log(0===false); //f
console.log(''==false); //t
console.log(''===false); //f
console.log(null==undefined); //f๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์ง€๋งŒ t
console.log(null===undefined); //f

Conditional operator : if

if, else if, else

Ternary operator : ?

๊ฐ„๋‹จํ•  ๋•Œ๋งŒ ์“ฐ๊ธฐ, nestingํ•  ๋•Œ๋Š” if๋‚˜ switch ์“ฐ๊ธฐ
condition ? value1 : value2; //value1์€ true์ผ ๋•Œ, value2๋Š” false์ผ ๋•Œ

console.log(name==='ellie'? 'yes':'no');

Switch statement

multiple if checks
enum-like value checks
multiple type checks in TS

break; ์“ฐ์ง€ ์•Š์œผ๋ฉด ๋‹ค์Œ ๊ฒƒ ๋‹ค ๋‚˜์˜ด

const browser = 'IE';
switch (browser) {
	case 'IE':
    	console.log('go away');
        break;
    case 'Chrome':
    case 'Firefox':
    	console.log('love you');
        break;
    default:
    	console.log('same all');
        break;
}

While loop & do while loop

๋ฐ˜๋ณต๋ฌธ, statement๊ฐ€ false๊ฐ€ ๋‚˜์˜ค๊ธฐ ์ „๊นŒ์ง€ ๋ฌดํ•œ๋Œ€๋กœ ํ•œ๋‹ค
while loop, while the condition is truthy, body code is executed

do while loop, body code is executed first, then check the condition.

let i = 3;
while (i>0) {	
	console.log(`${i}`);
    i--;
} //3 //2 //1
do {
	console.log(`${i}`);
    i--;
} while (i>0); //0    

For loop

for(begin; condition; step)

for (i=3; i>0; i--) {
	console.log(`${i}`);
}
// incline variable declaration, for loop ์•ˆ์—์„œ ์ง€์—ญ ๋ณ€์ˆ˜ ์„ ์–ธ ๊ฐ€๋Šฅ
for (let i=3; i>0; i--) {
	console.log(`${i}`);
}

Nested loop

-> ๋˜๋„๋ก์ด๋ฉด ํ”ผํ•˜๋Š” ๊ฒŒ ์ข‹๋‹ค

loop๋ฅผ ๋๋‚ด๋Š” keyword: break์™€ continue

break: ๋ฃจํ”„๋ฅผ ์™„์ „ํžˆ ๋๋ƒ„
continue: ์ง€๊ธˆ ๊ฒƒ๋งŒ ์Šคํ‚ตํ•˜๊ณ  ๋‹ค์Œ ์Šคํ…์œผ๋กœ ๋„˜์–ด๊ฐ„๋‹ค

for (let i=0; i<=10; i++) {
	if (i%2===1) {  
    	continue;
    } else {
    console.log(i);
    }
}

for (let i=0; i<=10; i++) {
	if (i===9) { //i > 8
    	break;
    } else {
    console.log(i);
    }
};	

0๊ฐœ์˜ ๋Œ“๊ธ€