본문 바로가기

HTML&CSS&Javascript 📚/JS40

[JS Deep Dive] 19장 프로토타입 1. 객체지향 프로그래밍 자바스크립트는 명령형imperative, 함수형functional, 프로토타입 기반prototype-based 객체지향 프로그래밍OOP Obejct Oriented Programming을 지원하는 멀티 패러다임 프로그래밍 언어다. C++과 Java와 같은 클래스 기반 객체지향 프로그래밍 언어의 특징인 클래스, 상속, 캡슐화를 위한 키워드인 public / private / protected 등이 없어서 자바스크립트는 객체지향 언어가 아니라고 오해하는 경우가 있다. 하지만 자바스크립트는 클래스 기반 객체지향 프로그래밍보다 효율적이며 더 강력한 객체지향 능력을 가지고 있는 프로토타입 기반의 객체지향 프로그래밍 언어이다. ⭐️ 클래스(Class) : ES6에서 클래스가 도입되었지만 사.. 2023. 11. 23.
[Clean Code] JS 클린코드 예시 - 1 1. 직관적인 함수명을 사용하고, 불필요한 변수는 최소화한다. 2. 임시변수 사용을 최소화한다. 3. 함수의 '명령'과 '조회'는 확실히 구분한다. 함수명이 ‘get(Getter, fetch, localStorage, getItem)’ 과 ‘generator(new Date(), createElement) ’의 역할은 명백하게 다르다. 이 차이를 구분해서 함수를 만드는 것이 좋다. 4. var 사용을 지양한다 / use strict를 사용한다 / 선언을 최상단으로 모은다 5. 매개변수의 순서와 경계를 사용자의 입장에서 설정한다. 매개변수의 순서와 경계(left/right, prev/next, min/max, start/end, before/after, lat/lon, req/res, res/rej, fr.. 2023. 11. 20.
[JS Deep Dive] 16장 프로퍼티 어트리뷰트 1) 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method)다. const o = {}; // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다. o.[[Prototype]] // -> Uncaught SyntaxError: Unexpected token '[' // 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. o.__proto__ // -> Object.prototype ECAMScript 사양에 등장하는 이중 대괄호 [[...]]로 감싼 이름들이 내부 슬롯과 내부.. 2023. 9. 29.
[JS Deep Dive] 7장 연산자 연산자(operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 또한 피연산자는(operand) 값으로 평가될 수 있는 표현식 이어야 한다. // 산술 연산자 5 * 4 // -> 20 // 문자열 연결 연산자 'My name is ' + 'Lee' // -> 'My name is Lee' // 할당 연산자 color = 'red' // -> 'red' // 비교 연산자 3 > 5 // -> false // 논리 연산자 true && false // -> false // 타입 연산자 typeof 'Hi' // -> string 그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다. 7.1 산술.. 2023. 8. 24.
[Node.js] Pug란 ? javascript를 사용하여, HTML을 렌더링해주는 템플릿 엔진 Pug 사용이유 HTML을 간단하게 표현해서 가독성이 좋다. 마크업 문법보다 코드량이 적어 생산성이 좋아진다. JS 연산 결과를 쉽게 보여줄 수 있다. 정적인 부분과 동적인 부분을 따로 할 수 있다. Pug 작성법 html에서 기호가 제외된다. 요소와 같은 줄에 있는 것을 태그로 감싼다. 태그에 속성을 넣을때 괄호()를 사용한다. - 태그(속성=값) 태그뒤에 .을 붙혀 클래스를 추가할 수 있다 - 태그 .class 태그뒤에 #을 붙혀 id를 추가할 수 있다 - 태그 #id 들여쓰기로 부모요소와 자식요소를 나눈다. Pug의 3가지 장점 상속(block & extends) 파일 분할(include) 블럭 재사용(Mixins) 2023. 8. 22.
[JS Deep Dive] 6장 데이터타입 0) 데이터 타입(Data Type) 데이터 타입은 '값의 종류'를 말한다. 자바스크립트의 모든 값은 데이터 타입을 가진다.(ES6는 총 7개의 데이터 타입을 제공) 데이터 타입은 크게 원시 타입(Primitive Type)과 객체 타입(Object/Reference Type)으로 분류할 수 있다. 1) 숫자 타입 // 모두 숫자 타입이다. var integer = 10; // 정수 var double = 10.12; // 실수 var negative = -20; // 음의 정수 C나 java의 경우 숫자도 int, long, float, double 등 과 같은 다양한 숫자 타입을 제공한다. 하지만 자바스크립트는 독특하게 하나의 숫자 타입만 존재한다. var binary = 0b01000001; // .. 2023. 8. 20.

티스토리툴바