JS 동작원리

👀 JS 엔진과 구동 환경자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요하다.Google에서 만든 V8 엔진이 가장 대표적인 예시이다. 자바스크립트 엔진은 Memory Heap과 Call Stack으로 이루어져 있다.Memory Heap : 메모리 할당이 일어나는 곳으로 변수와 함수 같은 객체 등이 담기는 곳이다.Call Stack : 함수를 호출들이 쌓이는 스택이다.자바스크립트 엔진 자체는 싱글 스레드이다. 실제 자바스크립트가 구동되는 환경인 웹 브라우저는 멀티 스레드로 동작하기 때문에 비동기 처리가 가능한 것이다.정확히는 Web API가 멀티 스레드로 동작하는 것이다. 따라서 자바스크립트의 런타임 환경은 위의 그림과 같다.Web APIs : 브라우저에서 제공하는 API들로, 비동기 처리를 ..

• format_list_bulleted JavaScript
• · 2024. 8. 5.
• textsms

[JS]Reduce 함수

코테 준비를 하면서 다른 분들의 코드를 보면 reduce 함수를 사용한 경우를 많이 볼 수 있다. 많은 사람들이 사용하고 유용한 reduce 함수에 대해서 알아보자! ⭐️ reduce 함수란? 배열이나 객체 요소를 순차적으로 순회하며 함수를 실행하고 하나의 결과 값으로 반환해준다. ⭐️ 사용법 arr.reduce(callback, [, initialValue]) reduce 함수는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번 씩 실행하는데, 콜백 함수는 다음의 네 인수를 받습니다(1~4). accumulator(누산기) : 반환 값을 누적하는 곳. initialValue를 제공하는 경우, initialValue이 할당된다. currentValue(현재 값) : 처..

• format_list_bulleted JavaScript
• · 2024. 4. 12.
• textsms

[JS] 유효성 검사

입력조건 1. 이름은 필수로 입력해야 한다. 2. 닉네임은 2~5글자로 구성해야 한다. 3. 이메일 형식을 지켜야 한다. 4. 비밀번호는 영어+숫자+특수문자를 조합해야 한다. 5. 비밀번호와 비밀번호 확인 란에 동일한 문자를 입력해야 한다. 이런 기능을 유효성 검사라고 부른다. HTML 코드 회원 가입 이름

• format_list_bulleted JavaScript
• · 2023. 12. 30.
• textsms

[JS]JavaScript 화살표 함수

일반 함수와 화살표 함수 비교 // 일반 함수 function sum(a, b) { return a + b; } // 화살표 함수 let sum = (a, b) => { return a + b; } // 단순한 리턴문일 경우, 더 심플하게 표현 가능 let sum = (a, b) => a + b; ES6부터 화살표 함수(Arrow Function)이라는 문법이 추가되었다. => 기호를 사용해서 function 키워드 생략 가능! • 화살표 함수 문법 - 화살표 함수 선언 // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생..

• format_list_bulleted JavaScript
• · 2023. 5. 29.
• textsms

JavaScript Closure(+실행 컨텍스트와 스코프 체인을 곁들인..)

클로저를 이해하기 전, 알아야 될 내용이 많다,, 클로저만 봤다가 몇시간을 헤맨지 모르겠다 ㅎ • 실행 컨텍스트와 스코프 체인 메인은 클로저니까 간단하게만 이해해보자. - 실행 컨텍스트(Execution Context) 우리가 작성한 코드가 실행되는 환경으로, 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 글로벌 실행 컨텍스트(Global Execution Context) 코드가 실행되기 전 생성되는 것(전역 실행 컨텍스트) 모든 스크립트 코드는 전역 실행 컨텍스트 안에서 실행됨 프로그램에 단 한개만 존재하고, 실행 컨텍스트의 기본 함수 실행 컨텍스트 (Function Execution Context) 전역 실행 컨텍스트가 생성된 후, 함수가 실행될 때마다 새로운 실행 컨텍스트가 작성됨 함수 내에 존..

• format_list_bulleted JavaScript
• · 2023. 5. 29.
• textsms

JavaScript this

JavaScript에서 this는 다른 언어와 다르게 동작함 다른 언어에서는 일반적으로 this는 자신을 가리키는 참조 변수로 사용됨 JavaScript에서는 this에 바인딩되는 객체는 한가지가 아니라 함수 호출 방식에 따라 달라짐 대부분의 경우, this의 값은 함수를 호출하는 방법에 의해 결정됨 -> this가 사용된 함수가 어디서 어떻게 실행되었는지가 중요!! 누가 this를 불렀는지를 알면 조금 쉬울지도..? 브라우저의 콘솔 창에 this를 호출하면 이런 실행 결과가 나온다 window 객체가 브라우저의 전역 객체이기 때문! - this 바인딩 규칙 함수 실행 시 전역객체(window) 할당 메소드 호출 시 메소드를 소유하고 있는 해당 객체 할당 객체 생성 시 생성된 객체 할당 • 전역에서 사용..

• format_list_bulleted JavaScript
• · 2023. 5. 28.
• textsms