본문 바로가기

언어 Language/자바스크립트 JavaScript9

[JavaScript] 자바스크립트는 뭔가요? 프로토타입 기반 객체지향 프로그래밍 자바스크립트는 뭔가요? 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다. 💡 자바스크립트에서 Class 자바스크립트에서 class는 ES6 에서 도입되었다. ES6 의 클래스가 기존 프로토타입 기반 객체지향 모델을 폐지하고 새로운 객체지향 모델을 제공하는 것은 아니다. 사실 클래스도 함수이며, 기존 프로토타입 기반 패턴의 문법적 설탕이라고 볼 수 있다. 편리함을 제공하기 위해 만든 것이라는 의미이다. 객체 지향 프로그래밍 (OOP, Object Oriented Programming) 객체지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보는 전통적 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합.. 2022. 7. 5.
[JavaScript] 실행 컨텍스트(Execution Context) (Feat. scope, hoisting, this, closure 등등...) 실행 컨텍스트(Execution Context) 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 실행 컨텍스트를 바로 이해하지 못하면 코드 독해가 어려워지며 디버깅도 매우 곤란해 질 것이다. 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념 (ECMAScript 스펙) 실행 가능한 코드가 실행되기 위해 필요한 환경 정보들을 모아놓은 객체 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념 실행 가능한 코드는 다음과 같으며, 일반적으로 실행 가능한 코드는 전역 코드와 함수 내 코드이다. 전역 코드 : 전역 영역에 존재하는 코드 Eval 코드 : eval 함수.. 2022. 6. 17.
[JavaScript] 이벤트 (2) - 다른 이벤트 개념들 (이벤트 객체, 이벤트 전파(버블링, 캡처링), 이벤트 위임) 요약 1. 이벤트 타겟 2. 이벤트 타입 3. 이벤트 객체 4. 이벤트 핸들러 5. 이벤트 전파 6. 이벤트 위임 이벤트 타겟 (event target) 이벤트가 일어날 객체를 의미한다. 이벤트 타입 (event type) 이벤트의 종류를 의미한다. 이벤트의 종류는 이미 약속되어 있다 이벤트 객체 이벤트 핸들러 함수 내부에서, 여러분은 event, evt, 혹은 e와 같은 이름으로 명명된 매개변수(parameter)를 봤을 것입니다. 이것들은 이벤트 객체라고 불리고, 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달됩니다. 예제 function bgChange(e) { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + ra.. 2022. 6. 15.
[JavaScript] 이벤트 (1) - 이벤트(event)의 개념과 사용법 요약 1. 이벤트는 우리가 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)이다. 2. 이벤트가 발생되면 실행되는 코드 블럭을 이벤트 핸들러 또는 이벤트 리스너라고 하며, 이 코드블럭이 이벤트에 응답해서 실행하도록 정의하는 것을 이벤트 핸들러를 등록 했다고 표현한다. 3. 웹 이벤트를 사용하는 방법은 3 가지가 있다. 1) 이벤트 핸들러 프로퍼티 2) 인라인 이벤트 핸들러 (사용 권장x) - html 태그에 이벤트 핸들러(자바스크립트 코드) 가 직접 기술된다는 점이 단점이다. - html 은 정보를 표현하기 위한 수단. 제어와 관련된 것은 javascript 로 분리시키는 것이 좋다. 3) addEventListener() removeEventListener() .. 2022. 6. 14.
[JavaScript] 변수 (선언, 초기화, 할당, let, var, const, 스코프) 변수(Variable) 요약 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름인 식별자를 말합니다. 상수는 변수처럼 이름을 붙인 값이지만, 변수와 달리 상수의 값은 바꿀 수 없습니다. 변수 선언 단계 자바스크립트 엔진은 변수 선언을 선언과 초기화 2단계로 수행합니다. 1. 선언 단계: 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다. 2. 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다. var, let, const 의 공통점 & 차이점 1. var와 let 키워드는 변수를 선언할 때 사용되며, const 키워드는 상수를 선언할 때 사용됩니다. 2. let, const는 블록 레벨.. 2022. 6. 13.
[JavaScript] Event Loop Event Loop 들어가며 JavaScript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있으며, C 또는 Java 등 다른 언어가 가진 모델과는 상당히 다릅니다. 이벤트? 이벤트(event) 는 어떤 사건을 의미합니다. 브라우저에서의 이벤트란 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM 요소와 관련이 있습니다. 이벤트가 발생하는 시점이나 순서를 사전에 인지할 수 없으므로, 일반적인 제어 흐름과는 다른 접근 방식이 필요합니다. 즉, 이벤트가 발생하면 누군가 이를 감지할 수 있어야 하며 그에 대응하는 처리를 호출해 주어야 합니다. 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시에는 통지 해.. 2022. 6. 9.
[JavaScript] 호이스팅(Hoisting)에 대해 알아보자 호이스팅(Hoisting) 먼저, 프로그래밍과 변수 개념을 정리합니다. 프로그래밍은 변수를 통해 값을 저장하고 참조하며 연산자로 값을 연산, 평가하고 조건문과 반복문에 의한 흐름제어로 데이터의 흐름을 제어하고 함수로 재사용이 가능한 구문의 집합을 만들며 객체, 배열 등으로 자료를 구조화하는 것이다. 변수는 값의 위치(주소)를 기억하는 저장소이다. 값의 위치란 값이 위치하고 있는 메모리 상의 주소(address)를 의미한다. 즉, 변수란 값이 위치하고 있는 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 명명한 식별자(identifier)이다. 변수 선언과 할당의 구조 (출처) 변수는 var, let, const 키워드를 사용하여 선언하고 할당 연산자를 사용해 값을 .. 2022. 6. 9.
[JavaScript] 스코프(Scope), 렉시컬 스코프(Lexical Scope), 클로저(closure) 스코프(Scope), 렉시컬 스코프(Lexical Scope), 클로저(Closure) 원래는 클로저 개념을 알아보고자 작성한 포스팅이지만, 이를 이해하기 위해서 여러 개념들을 함께 이해해야 하더군요. 함께 이해해야 하는 개념들을 챙겨서 작성해보겠습니다. 스코프(Scope) 스코프란 식별자(변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙입니다. 자신이 어디서 + 어떻게 선언되었는지에 따라 유효한(다른 코드가 자신을 참조할 수 있는) 범위를 가집니다. 자바스크립트에서 변수를 선언하는 방식은 var, let, const 3가지 입니다. var 는 함수 레벨 스코프를 따르며, 이 말은 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만.. 2022. 6. 9.
[JavaScript] 반복적인 코드 실행 setInterval, clearInterval setInterval() Javascript에서 함수를 주기적으로 반복적으로 실행하고 종료하기 위해서는 setInterval() 을 사용한다. setInterval() 함수는 일정시간 주기로, 반복적으로 함수나 코드를 수행하는 함수이다. setInterval(function, delay millisecond, function parameters) 이 함수는 아래 매개변수를 입력 받습니다. function : 주기적, 반복적으로 실행할 함수 delay millisecond (optional) : 시간 간격 (밀리세컨드 단위) function parameters (optional) : 첫번째 파라미터의 함수에 전달할 파라미터 이 함수는 리턴으로 intervalID 값을 반환합니다. 이 값은 clearInte.. 2022. 6. 3.

티스토리툴바