TIL019_210411

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

TIL

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

๐ŸŠ ๊ฐ์ƒ

๐Ÿ“™ ์—ดํ’ˆํƒ€ ์ฝ”๋”ฉ ์‹œ๊ฐ„ 3hour
๐Ÿ‘๐Ÿผ ๋ฉ˜ํƒˆ ํšŒ๋ณตํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ•จ
๐Ÿ‘Ž๐Ÿผ ๋ฉ˜ํƒˆ ๊ด€๋ฆฌ ์‹คํŒจ

๐Ÿš€ ๋ชฉํ‘œ

  • Udemy์—์„œ Javascript ๊ฐ•์ขŒ ์ˆ˜๊ฐ•ํ•˜๊ธฐ (332/682)
  • ์ปค๋ฐ‹ ์—ฐ์† 30์ผ ๋‹ฌ์„ฑํ•˜๊ธฐ (5/30, 4.11 ์™„๋ฃŒ)
  • ๋“œ๋ฆผ์ฝ”๋”ฉ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ๊ฐ•์˜ ์™„๊ฐ• (6/23)

๐Ÿ“ฃ ๋“œ๋ฆผ์ฝ”๋”ฉ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ๊ฐ•์˜:5-6

์ฐธ๊ณ ๋งํฌ: ๋“œ๋ฆผ์ฝ”๋”ฉ

5. function

javascript function

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํด๋ž˜์Šค๊ฐ€ ์ถ”๊ฐ€๋˜์—ˆ์ง€๋งŒ ์ž๋ฐ”์ฒ˜๋Ÿผ ์ˆœ์ˆ˜ํ•œ objcet oriented laguage๊ฐ€ ์•„๋‹Œ
prototype์„ ๋ฒ ์ด์Šค๋กœ ํ•œ ๊ฐ€์งœ์˜ object oriented language์ด๋‹ค
๋”ฐ๋ผ์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋„ ์ ˆ์ฐจ์  ์–ธ์–ด(procedural language) ์ค‘ ํ•˜๋‚˜์ด๋‹ค

function์„ sub-program์ด๋ผ๊ณ  ๋ถ€๋ฅด๊ธฐ๋„ ํ•œ๋‹ค
function์€ input(parameter)์„ ๋ฐ›์•„์„œ output์œผ๋กœ returnํ•œ๋‹ค

  • fundamental building block in the program
  • subprogram can be used multiple times
  • performs a task or calculates a value

function declaration

function name(param1, param2) { body...return; }
one function === one thing
naming: doSomething, command, verb
e.g. createCardAndPoint -> createCard, createPoint
function is object in JS

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜์—์„œ๋Š” ํƒ€์ž…์ด ๋ช…ํ™•ํ•˜์ง€ ์•Š๋‹ค

-> ์ˆซ์ž๋ฅผ ์จ๋„ ๋ฌธ์ž๋กœ ๋ณ€ํ™˜๋ผ์„œ ์ถœ๋ ฅ
-> typescript๋ฅผ ์“ฐ๋ฉด ์ด๋Ÿฐ ๋ฌธ์ œ ํ•ด๊ฒฐ

// in javascript
"use strict";
function log(message) {
	console.log(message);
    return 0;
}

// in typescript - ํ˜‘์—…์„ ์‰ฝ๊ฒŒ ํ•˜๊ณ  api ํ˜•ํƒœ๋กœ ์ œ๊ณตํ•  ๋•Œ ์œ ์šฉ
function log(message: string): number {
	console.log(message);
    return 0;
}

parameters

primitive parameter: passed by value
ํ•จ์ˆ˜์— ์ „๋‹ฌ๋˜๋Š” ๋งค๊ฐœ์ธ์ž ์ค‘ primitive type์€ ๊ฐ’์ด ๋ฉ”๋ชจ๋ฆฌ์— ๊ทธ๋Œ€๋กœ ์ €์žฅ๋˜์–ด ์žˆ๊ธฐ์— ๊ฐ’์ด ์ „๋‹ฌ๋จ
object parameters : passed by reference
objective type์€ ๋ฉ”๋ชจ๋ฆฌ์— reference๊ฐ€ ์ €์žฅ๋˜๊ธฐ ๋•Œ๋ฌธ์— reference๊ฐ€ ์ „๋‹ฌ๋œ๋‹ค

default parmaters (added in ES6)

function showMessage(message, from='unknown') {
	console.log(`${message}, ${from}`);
}

rest parameters (added in ES6)

... -> rest parameters, ๋ฐฐ์—ด ํ˜•ํƒœ๋กœ ์ „๋‹ฌ๋จ

function printAll(...args) {
	for (let i = 0; i <args.length; i++) {
    	console.log(args[i]);
	}
    
    for (const arg of args) {
    	console.log(arg);
	} //์ด๋Ÿฐ ์‹์œผ๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ๋‹ค
    
    args.forEach(arg) => console.log(arg));
}
printAll('dream','coding','ellie');

function์€ object์˜ ์ผ์ข…์ด๋‹ค
ํ•จ์ˆ˜ ์„ ์–ธ ํ›„ ํ•จ์ˆ˜๋ช…. -> ํ•จ์ˆ˜๊ฐ€ ์˜ค๋ธŒ์ ํŠธ๋กœ ์ „ํ™˜๋˜๊ธฐ ๋•Œ๋ฌธ์— ํ•จ์ˆ˜(์˜ค๋ธŒ์ ํŠธ)์˜ ์†์„ฑ๊ฐ’์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค

local scope

block scope, global scope

closer, lexical environment์€ ๋‹ค์Œ์˜ ๋”ฑ ํ•˜๋‚˜์˜ ๊ฐœ๋…์—์„œ ํŒŒ์ƒ๋œ ๊ฒƒ์ž„

"๋ฐ–์—์„œ๋Š” ์•ˆ์ด ๋ณด์ด์ง€ ์•Š๊ณ  ์•ˆ์—์„œ๋งŒ ๋ฐ–์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค" (ํ‹ดํŠธ๋œ ์œ ๋ฆฌ์ฐฝ)

๋ธ”๋Ÿญ ์•ˆ์—์„œ ๋ณ€์ˆ˜ ์„ ์–ธํ•˜๋ฉด ์ง€์—ญ ๋ณ€์ˆ˜ -> ์•ˆ์—์„œ๋งŒ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค
๋ธ”๋Ÿญ ๋ฐ–์—์„œ๋Š” ๋ธ”๋Ÿญ ์•ˆ์— ์ ‘๊ทผ ๋ชปํ•˜์ง€๋งŒ ๋ธ”๋Ÿญ ์•ˆ์—์„œ๋Š” ๋ธ”๋Ÿญ ๋ฐ–์˜ ๋ณ€์ˆ˜์— ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๋‹ค

return

return ํƒ€์ž…์ด ์—†๋Š” ํ•จ์ˆ˜๋Š” return undefined;๊ฐ€ ๋“ค์–ด๊ฐ€ ์žˆ๋Š” ๊ฒƒ๊ณผ ๊ฐ™๋‹ค

early return, early exit

๋ธ”๋Ÿญ์œผ๋กœ ๋กœ์ง์„ ์ž‘์„ฑํ•˜๋ฉด ๊ฐ€๋…์„ฑ์ด ๋งŽ์ด ๋–จ์–ด์ง„๋‹ค (e.g. if, else)
๋”ฐ๋ผ์„œ ์กฐ๊ฑด์ด ๋งž์ง€ ์•Š์„ ๋•Œ๋Š” return์œผ๋กœ ๋นจ๋ฆฌ ํ•จ์ˆ˜๋ฅผ ์ข…๋ฃŒํ•˜๊ณ 
์กฐ๊ฑด์ด ๋งž์„ ๋•Œ๋งŒ ํ•„์š”ํ•œ ๋กœ์ง๋“ค์„ ์ญ‰ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ฝ”๋“œ๋ฅผ ์งค ๊ฒƒ

//bad
function upgradeUser(user) {
	if (user.point > 10) {
    	//long upgrade logic
	}
}

//good
function upgradeUser(user) {
	if (user.point <= 10) {
    	return;
	}
    //long upgrade logic
}

function expression

first-class function

function are treated like any other variable
can be assigned as a value to variable
can be passed as an argument to other functions
can be returned by another function

function expression

a function declaration can be called earlier than it tis defined. (hoisted)
a function expression is created when the execution reaches it.

anonymous function vs named function

const print = function () {
	console.log('print');
};
const print = function print() {
	console.log('print');
};

print();
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1,3));

ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•จ๊ณผ ๋™์‹œ์— ๋ฐ”๋กœ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๋‹ค
named function is better debugging in debugger's stack traces
recursion : ํ•จ์ˆ˜ ์•ˆ์—์„œ ํ•จ์ˆ˜ ์ž์‹  ์Šค์Šค๋กœ๋ฅผ ๋ถ€๋ฅด๋Š” ๊ฒƒ -> ํ”„๋กœ๊ทธ๋žจ์ด ์ฃฝ์Œ (ํ”ผ๋ณด๋‚˜์น˜๋‚˜ ๋ฐ˜๋ณต๋˜๋Š” ํ‰๊ท ๊ฐ’ ๊ณ„์‚ฐํ•  ๋•Œ๋งŒ) -> ๊ณ„์† ํ•˜๋ฉด call stack์ด ๊ฝ‰ ์ฐจ๊ฒŒ ๋œ๋‹ค

callback function using function expression

function randomeQuiz(answer, printYes, printNo) {
	if (answer === 'love you') {
    	printYes();
	} else {
    	printNo();
	}
}

arrow function

always anonymous

const simplePrint = () => console.log('simplePrint');
const add = (a,b) => a+ b;
// ๋ธ”๋Ÿญ ๋„ฃ์–ด์„œ ์ฒ˜๋ฆฌํ•  ์ˆ˜๋„ ์žˆ๋‹ค (return ์จ์•ผ ํ•จ)
const add = (a,b) => {
	return a+ b;
};    

IIFE

immediately invoked function expression

//ํ•จ์ˆ˜ ํ˜ธ์ถœ ๊ธฐ์กด ๋ฐฉ์‹ 
function hello() {
	console.log('IIFE');
}
hello();
//IIFE ๋ฐฉ์‹ - ์„ ์–ธ๊ณผ ๋™์‹œ์— ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋‹ค
(function hello() {
	console.log('IIFE');
})();

Quiz

function calculate(command, a, b)
command: add, substract, divide, multiply, remainder

calculate(add,2,3)

6. Class ๊ฐ์ฒด์ง€ํ–ฅ์–ธ์–ด

class vs object
object-oriendted

class person{
	name; //property - ์†์„ฑ(field)
    speak(); //function - ํ–‰๋™(method)
}    

property

์–ด๋–ค ๊ฐ’์ด ๋‹ค๋ฅธ ๊ฐ’๊ณผ ์—ฐ๊ด€์„ ๊ฐ€์ง€๊ณ  ์žˆ์„ ๋•Œ
๋ฌธ์ž์—ด.length ์—์„œ length๋ฅผ ํ”„๋กœํผํ‹ฐ๋ผ ํ•œ๋‹ค -

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