본문 바로가기

js

(11)

[JavaScript] HTML에 JS 연결하는 방법 비교 / async VS defer 차이점 🔽 HTML 파싱에 대해서는 아래 포스트를 참고해주세요 🔽[HTTP] 브라우저 렌더링 과정🔗 Browser Rendering(브라우저 렌더링)이란? 사용자의 요청을 서버에 전달하고 그 결과를 화면에 나타내는 과정을 의미한다. 🔗 Parsing(파싱)이란? 브라우저가 코드를 이해하고 사용할 수 있는 devjindev.tistory.com 1. head 안에 불러오는 경우 ⭐☆☆☆ 123456789 ... ... cs JS를 불러오는 동안 HTML 파싱을 멈추고, JS 다 불러오면 나머지 파싱을 진행하기 때문에 사용자에게 페이지가 보여지는 시간이 딜레이된다. 2. body 안(맨 끝)에 불러오는 경우 ⭐⭐☆☆ 123456789 ... ... cs 먼저 HTML을 모두 파싱하여 사용자에게 페이지가 보여진 후,..

[JavaScript] 프로토타입(prototype) 이란 클래스(class)는 객체지향언어에서 빠질 수 없는 개념이다. 자바스크립트도 객체지향언어이다. 하지만 자바스크립트에는 클래스가 없다. 대신 프로토타입이라는 것이 존재한다. 이것이 자바스크립트가 '프로토타입 기반 언어'라고 불리는 이유이다. 🔗 프로토타입(prototype) 프로토타입으로 클래스 구현이 가능하다. 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 기존의 코드를 재사용함으로써 불필요한 중복을 제거한다. 생성자를 이용하여 클래스처럼 사용할 수는 있지만 대부분의 경우 같은 호출을 반복한다던가의 불필요한 행동이 반복되어 효율적인 코드가 되지 못한다. 그래서 프로토타입이라는 빈 객체에 미리 값들을 담아두고 새로 생성한 객체는 그 프로토타입의 값을 가져오는 방식을 갖춰서 클래스의 활용처럼 재사용을 ..

[JavaScript] this란? / call, apply, bind 차이점 🔗 this란? this는 함수 호출 방식에 따라 this에 바인딩할 객체가 동적으로 결정된다. (예외적으로, bind 함수는 호출과 무관에게 묶어서 고정시킬 수 있다.) 호출한 객체 === this 🔗 함수 호출 방식 1. 함수(일반함수, 전역함수, 외부함수, 내부함수(일반 내부함수, 메소드의 내부함수, 콜백함수 등)) 호출 this는 전역객체(window)를 가리킨다. 2. 메소드 호출 this는 해당 메소드의 객체를 가리킨다. 3. 생성자 함수 호출 this는 생성자로 인해 생성된 인스턴스를 가리킨다. 4. call, apply, bind 호출 this가 함수 호출식에 따라 객체를 가리킨다면 call, apply, bind는 함수가 직접 실행문맥을 결정한다. call은 함수를 호출해 실행한다. 함수..

[JavaScript] 호이스팅(Hoisting) 이란? 🔗 호이스팅(Hoisting)이란? 변수 또는 함수 선언 부분이 최상단으로 끌어 올려지는 현상을 의미한다. 변수가 있으면 위치에 상관없이 최상단에서 undefined된 형태로 존재한다. ⭐ 주의 var 변수 선언과 함수 선언문에서만 호이스팅이 일어난다. (let/const 변수 선언, 함수 표현식에서는 발생하지 않는다.) 12345console.log(a); // undefined 출력console.log(b); // error var a = 'hello';const b = 'hello2';cs 12345678910func1(); // hello 출력func2(); // error function func1() { // 함수선언문 console.log("hello");} var func2 = functi..

[JavaScript] 자바스크립트는 '이벤트 기반', '논블로킹' 방식을 사용하고 '싱글 스레드' 언어이다. 자바스크립트는 싱글 스레드 언어이다. 하지만 실제 사용시에는 많은 작업이 동시에 처리되는 멀티 스레드처럼 보이는데 왜 그런 것일까? 자바스크립트는 어떻게 '동시성(Concurrency)'을 지원하는 것일까? 바로 여기서 등장하는 개념이 이벤트 루프이다. 🔗 이벤트 기반(event-driven)이란? 이벤트 기반이란 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식을 의미한다. ▪ 이벤트 루프 이벤트 발생 시 호출할 콜백 함수들을 관리하고, 호출된 콜백 함수의 실행 순서를 결정한다. 모든 이벤트가 종료될 때 까지 이벤트 처리를 위한 작업을 반복하므로 루프라고 불린다. 콜 스택에서 실행 중인 것이 있는지 확인하고, 콜백 큐에 작업이 있는지 확인해서 콜 스택이 비었다면 콜백 큐 내의 작업을 콜 스택으로 ..

[JavaScript] 메모라이제이션(Memoization)이란? 🔗 메모라이제이션(Memoization)이란? 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장하여 그것을 활용함으로써 반복 수행을 제거한다. 프로그램 실행 속도가 빨라진다. 🔎 참고 자료 자바스크립트 메모라이제이션 예제보기 💡 같이 보면 좋을 Post [JavaScript] 자바스크립트는 '이벤트 기반', '논블로킹' 방식을 사용하고 '싱글 스레드' 언어이다. 자바스크립트는 싱글 스레드 언어이다. 하지만 실제 사용시에는 많은 작업이 동시에 처리되는 멀티 스레드처럼 보이는데 왜 그런 것일까? 자바스크립트는 어떻게 '동시성(Concurrency)'을 지원하 devjindev.tistory.com

[JavaScript] 자료형 (Data Type) / 종류, 형변환, typeof 🔗 자료형(Data Type) 종류 숫자형 (Number) : 10진수, 16진수, 실수 모두 해당 문자형 (String) 논리형 (Boolean) : true(참) / false(거짓) undefined : 미정의된 자료형 null : 아무것도 참조하지 않은 자료형 📌 undefined VS null 차이점 공통점 : "값이 없다." undefined 데이터 타입 초기화 되지 않은 기본 초기값 상태 ex) var data1; null 오브젝트(객체) 타입 객체를 담기위한 변수를 초기화 하는 상태 ex) var data = null; (🤷‍♀️) undefined 보다 null 대상 변수가 더 큰 범위인 느낌 🔗 자료형 확인하기 typeof(변수); 🔗 자료형 형변환 문자형 -> 숫자형 Number(변수..

[JavaScript] 연산자(Operator) / 종류 🔗 기본 사칙 연산자 + , - , * , / , % 🔗 문자열 연산자 + : 문자열 합치기 ex) '감' + '자' => '감자' 🔗 복합 대입 연산자 += : 기존 변수 값에 값을 더하기 -= : 기존 변수 값에 값을 빼기 *= : 기존 변수 값에 값을 곱하기 /= : 기존 변수 값에 값을 나누기 %= : 기존 변수 값에 값을 나누기 한 나머지 구하기 ex) num = num + 10; => num += 10; 🔗 증감 연산자 ++ : 1씩 증가 -- : 1씩 감소 🔗 조건 비교 연산자 >= : (좌변이 우변보다) 크거나 같다. : (좌변이 우변보다) 크다.

이전 1 2 다음

티스토리툴바