이것저것 일기
article thumbnail
이벤트루프의 여러가지 큐
frontend/Javascript 2023. 2. 8. 05:43

** 아래의 내용은 브라우저의 이벤트루프를 이야기 한다. 브라우저 안에서는 다양한 프로세스들이 있다. 그 중 Render thread안에 있는 main thread에서 자바스크립트들이 실행되고 화면이 렌더링이 된다. 이렇게 다양한 일을 처리하기 위해서 우선순위를 정해서 처리하는데 이를 이벤트 루프라고한다. 기본적인 이벤트루프는 다음과 같다. call stack이 비워질때까지 실행하고 비워지면 이벤트 루프에 따라 queue에 쌓여잇는 일들이 처리된다. http요청이나 settimeout같은 시간이 걸리는 요청은 다른 스레드에서 처리되고 끝나면 콜백함수를 queue에 넣어줌 queue에는 3개가 있다 1. taskqueue(macrotaskqueue) settimeout ,setinterval,eventdi..

article thumbnail
1.6 객체 프로퍼티 설정
frontend/Javascript 2023. 1. 24. 19:51

객체의프로퍼티의 속성 = value + flag flag writable – true이면 값을 수정할 수 있습니다. 그렇지 않다면 읽기만 가능합니다. enumerable – true이면 반복문을 사용해 나열할 수 있습니다. 그렇지 않다면 반복문을 사용해 나열할 수 없습니다. configurable – true이면 프로퍼티 삭제나 플래그 수정이 가능합니다. 그렇지 않다면 프로퍼티 삭제와 플래그 수정이 불가능합니다 configurable 플래그를 수정할 수 없음 enumerable 플래그를 수정할 수 없음. writable: false의 값을 true로 바꿀 수 없음(true를 false로 변경하는 것은 가능함). 접근자 프로퍼티 get/set을 변경할 수 없음(새롭게 만드는 것은 가능함). 일반적으로 모두..

article thumbnail
1.5 함수 심화학습
frontend/Javascript 2023. 1. 16. 20:06

재귀 자기 자신을 호출하는 함수 재귀 호출의 최대 개수(재귀 깊이)를 제한하고 있다. function pow(x, n) { let result = 1; for (let i = 0; i < n; i++) { result *= x; } return result; } function pow(x, n) { return (n == 1) ? x : (x * pow(x, n - 1)); } 반복문으로도 표현 가능하지만 , 재귀를 이용하면 훨신 더 간결하고 유지보수가 쉬운 코드를 만들 수 있을 때가 있다. 하지만 반복문은 메모리를 더 적게 사용하고 재귀는 메모리를 더 많이 잡아먹는다 재귀의 동작 실행 컨텍스트 : 해당 함수의 실행 절차, 변수의 현재값, this의 값등 의 함수 실행에대한 세부 정보를 담고 있는 내부 ..

article thumbnail
1.4 자료구조와 자료형
frontend/Javascript 2023. 1. 9. 17:57

원시값의 객체화 원시값 : 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined 그러나 ! javascript에서 원시 값에서도 객체처럼 프로퍼티나 메서드를 호출 가능. //예시 let str ="hi"; console.log(str.toUpperCase()); 원시값인데 왜 가능한가 ? javascript는 원시형들에는 각각의 래퍼 객체가 존재한다. (null,undefined 제외) 래퍼 객체는 편리한 이용을 위해 각 원시형들에게 유용한 프로퍼티들이 내장되어 있다. 원시값의 프로퍼티에 접근시 래퍼 객체라는 객체가 생성된다. 실행 후 이 객체는 파괴된다. let str = "Hello"; str.test = 5; // (*) ..

article thumbnail
1.3.2 가비지 컬렉션
frontend/Javascript 2023. 1. 2. 20:43

사용하지 않는 메모리를 자동으로 해제하는 것 javascript의 메모리 관리 기준 도달이 가능한 값인가? 생성부터 도달 가능한 값 현재 함수의 지역 변수와 매개변수 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 전역 변수 기타 등등 가비지 컬랙터는 도달할 수 없는 객체를 삭제한다. 예제 1) // user엔 객체 참조 값이 저장됩니다. let user = { name: "John" }; user = null; //객체랑 연결해제 -> 객체 삭제됨. 예제 2) function marry(man, woman) { woman.husband = man; man.wife = woman; return { father: man, mother: woman } } let family = marry({ na..

1.3.1 객체란?
frontend/Javascript 2023. 1. 2. 19:47

다양한 데이터를 담을 수 있는 자료형 { key : value} 형태로 이루어짐. 객체 생성과 읽기,수정, 삭제 /****생성****/ let a = new Object(); // '객체 생성자' 문법 let b = {}; // '객체 리터럴' 문법 let user = { name: "John", age: 30, "likes birds": true // 복수의 단어는 따옴표로 묶어야 합니다. }; /****읽기****/ console.log(user.name); console.log(user["name"]);//대괄호법은 대괄호안에 변수를 넣어 접근할 수 있고 여러 단어일때도 사용가능 let key = "name" console.log(user[key]); /****수정****/ user.name="ke..

1.2.8 javascript ) 함수와 화살표함수
frontend/Javascript 2022. 12. 26. 20:28

함수 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차 함수 선언문 일반적으로 함수를 선언하는 방식 function이라는 키워드를 가지고 생성함 반환하는 값을 가지고 싶을 시 return이라는 키워드를 가지고 값을 반환할 수 있음 빈 return값이거나 return이 없을 때는 undefined를 반환함. 함수 선언문방식으로 선언 시 함수가 해당 스코프 맨위로 호이스팅되어서 함수를 위에서도 바로 호출할 수 있음. //함수가 위로호이스팅되어서 바로 사용가능 alert(이름()); // 5 function 이름() { let a=3; let b=2; return a+b;//값 반환 a=8;//이미 값이 반환 되었기 때문에 수행안됨 } 매개변수,인자 매개 변수를 이용하여 함수 안에 값을 전달할..

1.2.5 javascript ) 비교연산자와 논리연산자
frontend/Javascript 2022. 12. 26. 19:42

비교연산자 비교연산잔는 참과 거짓 불린형을 반환한다. 보다 큼·작음: a > b, a = b, a && > || || (OR) 하나라도 참인지 판별하는 논리 연산자. 여러개 평가시 앞에 참이 나오면 뒤는 평가하지 않는다. 이를 단락평가라 한다. 불린 형끼리의 비교 하나만 참이여도 true가 반환된다. let hour = 9; alert(hour 18)//true alert( false || false ); // false alert( false || true ); // true alert( true || true ); // true 다른 자료형과의 비교 첫번째 truthy(불린으로 변환하면 true가 되는 값을 truthy라고 한다) 값..

1.2.4 javascript ) 기본연산자
frontend/Javascript 2022. 12. 26. 00:24

기본연산자 ' + ' 이항 연산자 숫자+숫자 일반적인 덧샘연산 숫자+문자 숫자를 문자로 형변환함. 4 + 5 + "px" = "9px" 단항 연산자 값 앞에 +를 붙이면 숫자형으로 변환 이항 연산자 보다 먼저 실행됨. // 숫자형이 아닌 피연산자는 숫자형으로 변화합니다. alert( +true ); // 1 alert( +"" ); // 0 let apples = "2"; let oranges = "3"; // 이항 덧셈 연산자가 적용되기 전에, 두 피연산자는 숫자형으로 변화합니다. alert( +apples + +oranges ); // 5 ++연산자 변수를 1씩 증가함. let a = 1, b = 1; let c = ++a; //2 전위형이라고 한다. let d = b++; //1 후위형이라고 한다 ..

1.2.3 javascript ) 자료형과 형 변환
frontend/Javascript 2022. 12. 26. 00:24

javascript의 자료형 javascript에서는 자료의 타입은 있지만 값의 타입은 언제든 바꿀 수 있는 동적 타입 숫자형 일반적인 숫자 , Infinity(무한), -Infinity, NaN(계산과정중 에러가 발생햇을 때의 반환 값.) +-2^53이 한계이다. 수학연산이 안전하다. 5/0같은 연산때문에 에러를 내며 죽지 않고 NaN을 반환하며 연산이 종료된다. 숫자형으로 변환 Number(value)를 이용하면 숫자형으로 변환가능하다 (true -> 1, false -> 0, null-> 0) parseInt,parseFloat등으로 정수,부동점으로 변환 가능하다. BigInt 숫자형의 한계(+-2^53)보다 더 크거나 작은 숫자를 다룰때 씀. 정수 뒤에 n을 붙이면 BigInt로 간주한다. 문자형..