TIL018_210409

19022 단어 JavaScriptJavaScript

🍊 감상

계속 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);
    }
};
astropy+astroquery로 SDSS 데이터 그리기
Tesseract 트레이닝 라이브러리 연구 과정 중의 문제점과 해결 방안

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage