🍊 감상

📙 열품타 코딩 시간 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를 프로퍼티라 한다 -