TIL019_210411
🍊 감상
📙 열품타 코딩 시간 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를 프로퍼티라 한다 -
Author And Source
이 문제에 관하여(TIL019_210411), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@keepcalm/TIL019210410저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)