일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 문자열 인터폴레이션
- 리엑트블로거
- 5.3.8 Modifying Queries
- 스프링 데이타 JPA
- 가상컴퓨터마법사
- 객체의키값만 찾기
- @Moditying @Query
- 객체를 배열로
- 레디스 확인
- 우분투 시간 변경
- 코딩 어?
- ubuntu타임존
- Robo3T 글씨키우기
- sql 문자열 패턴 검색
- 시퀄 문법
- js 문자열을 문자배열로
- 객체의 밸류값만 찾기
- ${변수}
- sql like연산자
- Robo3T 폰트변경
- 프론트엔드 스쿨
- ...점점점문법
- 배열을 객체로
- indexOf()
- Robo3T 폰트 키우기
- 깃 토큰 만료
- search()
- findIndex()
- lastIndexOf()
- Robo3T 글씨체 변경
- Today
- Total
목록프론트/모던 자바스크립트 Deep Dive 책 스터디 (19)
코딩기록
37장 Set과 Map 37-1. Set Set 객체는 중복되지 않는 유일한 값들의 집합. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있음.이러한 Set 객체 특성은 수학적 집합의 특성과 일치함. Set은 수학적 집합을 구현하기 위한 자료구조임. 따라서 Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있음. 1). Set 객체의 생성 Set 객체는 Set 생성자 함수로 생성함. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성됨. [예제 37-01] const set = new Set(); console.log(set); // Set(0) {} Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성함. 이때 이터러블의 중복된 값은 Set..
31장 RegExp 31-1. 정규 표현식이란?정규 표현식(regular expression)은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어.문자열을 대상으로 패턴 매칭기능을 제공. 패턴 매칭 기능이랑 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말함. [예제 31-01] // 사용자로부터 입력받은 휴대폰 전화번호 const tel = '010-1234-567팔'; // 정규 표현식 리터럴로 휴대폰 전화번호 패턴을 정의한다. const regExp = /^\d{3}-\d{4}-\d{4}$/; // tel이 휴대폰 전화번호 패턴에 매칭하는지 테스트(확인)한다. regExp.test(tel); // -> false만약..
27장 배열 27-1. 배열이란? 배열 리터럴로 생성한 예제 [예제 27-01] const arr = ['apple', 'banana', 'orange'];자바스크립트의 모든 값은 배열의 요소가 될 수 있음. 모든 값 = 원시값, 객체, 함수, 배열 등 자바스크립트에서 값으로 인정하는 모든 것.요소(element): 배열이 가지고 있는 값.인덱스(index): 배열에서 자신의 위치를 나타내는 0 이상의 정수. 배열의 요소에 접근할 때 사용. [] 대괄호 표기법: 요소에 접근할 때 사용. 대괄호 내에 접근하고 싶은 요소의 인덱스를 지정. [예제 27-02] arr[0] // -> 'apple' arr[1] // -> 'banana' arr[2] // -> 'orange'length..
22장 빌트인 객체 22-1. this 키워드객체는 상태(state)를 나타내는 프로퍼티와 동작(behavior)을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조.동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 함.이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 함. 자바스크립트는 this라는 특수한 식별자를 제공. 객체 리터럴 방식으로 생성한 객체는 메서드 내부에서 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조 가능. getDiameter 메서드 내에서 메서드 자신이 속한 객체를 가리키는 식별자 circle을 참조하고 있음.이 참조 표현식이 평가되는 시점은 getD..
21장 빌트인 객체 21-1. 자바스크립트 객체의 분류자바스크립트 객체는 다음과 같이 크게 3개의 객체로 분류. 표준 빌트인 객체 (Standard built-in objects/ navite objects/ global objects)애플리케이션 전역의 공통 기능을 제공.표준 빌트인 객체는 ECMAScript 사양에 정의된 객체이므로 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)과 관계없이 언제나 사용 가능.표준 빌트인 객체는 전역 객체의 프로퍼티로서 제공.따라서 별도의 선언 없이 전역 변수처럼 언제나 참조 가능.호스트 객체 (host objects) 호스트 객체는 ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행환경(브라우저 또는 Node.js 환경)에서 추가로 제공하는 ..
20장 strict mode 20-1. strict mode란? [예제 20-01] function foo() { x = 10; } foo(); console.log(x); // ?[예제 20-01] 코드 흐름foo함수 내에서 선언하지 않은 x 변수에 값 10을 할당.이때 x 변수를 찾아야 x에 값을 할당할 수 있기 때문에 자바스크립트 엔진은 x 변수가 어디에서 선언되었는지 스코프 체인을 통해 검색하기 시작함.자바스크립트 엔진은 먼저 foo 함수의 스코프에서 x 변수의 선언을 검색함.foo 함수의 스코프에는 x 변수의 선언이 없으므로 검색에 실패할 것이고, 자바스크립트 엔진은 x 변수를 검색하기 위해 foo 함수 컨텍스트의 상위 스코프(여기선 전역 스코프)에서 x 변수의 선..
19장 프로토타입proto- '최초의', '원래의'의 뜻을 나타냄prototype- 원형 자바스크립트는 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 프로그래밍(OOP; Object Oriented Programming)을 지원하는 멀티 패러다임 프로그래밍 언어.자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체.원시 타입(primitve type)의 값을 제외한 나머지 값들(함수, 배열, 정규 표현식 등)은 모두 객체. 19-1. 객체지향 프로그래밍객체지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단..
18장 함수와 일급 객체18-1. 일급 객체다음 조건을 만족하는 객체를 일급 객체라 함.무명의 리터럴로 생성할 수 있다. (런타임에 생성이 가능하다.) => 무명 리터럴이 의미하는 것은 함수 표현식을 뜻함. 일급 객체란 값으로 표현될 수 있기 때문에 함수 표현식으로 사용이 가능하다.변수나 자료구조(객체, 배열)에 저장할 수 있다.함수의 매개변수에 전달할 수 있다.함수의 반환값으로 사용할 수 있다. [예제 18-01] // 1. 함수는 무명의 리터럴로 생성할 수 있음. // 2. 함수는 변수에 저장할 수 있음. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당됨. const increase = function (num) { return ++num;..
17장 생성자 함수에 의한 객체 생성17-1. Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성해서 반환.빈 객체를 생성한 이후 프러퍼티 또는 메서드를 추가하여 객체를 완성. [예제 17-01] // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'Lee'; person.sayHello = function () { console.log('Hi! My name is ' + this.name); }; console.log(person); // {name: "Lee", sayHello: ƒ} person.sayHello(); // Hi! My nam..
16장 프로퍼티 어트리뷰트16-1. 내부 슬롯과 내부 메서드내부 슬롯과 내부 메서드란, 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(psuedo method). [덧, 의사 - 프로그램 모듈의 작동원리를 프로그램언어가 아닌 일반적인 언어로 사람이 알기 쉽게 작성한 것. 즉, 사양 명세서.]내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아님. 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 제공.모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는데 내부 슬롯은..
15장 let, const 키워드와 블록 레벨 스코프 15-1. var 키워드로 선언한 변수의 문제점1). 변수 중복 선언 허용var 키워드로 선언된 변수는 중복 선언이 가능. [예제 15-01] var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작. var x = 100; // 초기화문이 없는 변수 선언문은 무시. var y; console.log(x); // 100 console.log(y); // 1[예제 15-01]처럼 var 키워드로 변수를 중복 선언하면 초기화문(변수 선언과 동시에 초기값을..
14장 전역 변수의 문제점14-1. 변수의 생명 주기변수는 선언에 의해 생성되고 할당을 통해 값을 갖음.언젠가 소멸하는 생명주기가 있고 자신이 선언된 위치에서 생성되고 소멸함. 1). 지역 변수의 생명 주기함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸. [예제 14-01] 의 지역 변수 x는 foo 함수가 호출되기 이전까지는 생성되지 않음.foo 함수를 호출하지 않으면 함수 내부의 변수 선언문이 실행되지 않기 때문.함수 내부에서 선언한 변수는 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행.①위 예제의 foo 함수를 호출하면 함수 몸체의 다른 문들이 순차적으로 실행되기 이전에 x 변수의 선언문이 자바스크립트..
13장 스코프 13-1. 스코프란?스코프는 변수 그리고 함수와 깊은 관련이 있음.변수나 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자(변수 이름, 함수 이름, 클래스 이름 등)자신을 참조할 수 있는 유효한 범위가 결정되는데 이를 스코프라 함. 즉, 스코프는 식별자가 유효한 범위. ①은 'local'이라는 값이 나오는데 foo 함수 내에서 선언한 변수 x를 참조하기 때문.②는 'global'이 나옴. foo함수 내부에 선언된 x를 밖에서 참조 할수 없기 때문에 참조 할 수 있는 맨 위 전역 변수 x를 참조하기 때문.두개의 x 변수 식별자 이름은 동일하지만 자신이 유효한 범위, 즉 스코프가 다른 별개의 변수.식별자는 유일해야 하지만 스코프가 달라서 같은 이름의 식별자를 사용할 수 있음.하지만..
12장 함수12-1. 함수란?함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것.함수 내부로 입력을 전달받는 변수: 매개변수(parameter), 입력: 인수(argument인자), 출력: 반환값(return value)함수는 값이며, 여러 개 존재할 수 있으므로 특정 함수를 구별하기 위해 식별자인 함수 이름을 사용.함수 정의(function definition)를 통해 생성. 함수 호출(function call/invoke): 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시함.함수를 호출하면 코드 블록에 담길 문들이 일괄적으로 실행되고, 실행 결과, 즉 반환값을 반환함. // 함수 호출 var result = a..
11장 원시 값과 객체의 비교원시타입과 객체 타입의 세가지 차이원시 타입의 값, 즉 원시 값은 변경 불가능한 값(immutable value). 반면 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값.원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장.반면 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값(메모리 주소)이 저장.원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달됨. 값에 의한 전달(pass by value).반면 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달됨. 참조에 의한 전달(pass by reference). 11-1. 원시 값1). 변경 불가능한 값한번 생성된 원시 값은 읽기 전용 값으로..
8장 제어문제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할때 사용한다. 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행된다. 8-1. 블록문0개 이상의 문을 중괄호 { } 로 묶은 것.코드블록 또는 블록이라 부름.자바스크립트는 블록문을 하나의 실행 단위로 취급.단독으로 사용가능하나 주로 제어문이나 함수를 정의할때 사용. 블록문 끝에는 세미콜론 붙이지 않음.// 블록문{ var foo = 10;}// 제어문var x = 1;if (x 8-2. 조건문주어진 조건식의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정한다. 불리언 값으로 평가될 수 있는 표현식이다. 1). if ... else 문조건식이 불리언이 아닌 값으로 평가되면 자바스크립트 엔진에 의해 암묵적으로 ..
5장 표현식과 문5-1. 값값이란 식이 평가되어 생성된 결과.평가란 식을 해석해서 값을 생성하거나 참조하는 것. 5-2. 리터럴사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법.숫자 3 -> 아라비아 숫자가 아니라 숫자 리터럴.자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성.리터럴의 종류정수, 부동소수점, 2진수, 8진수, 16진수, 문자열, 불리언, null, undefined, 객체, 배열,함수, 정규표현식덧) 스터디 질문 Q :리터럴과 값, 표현식의 차이?====강사님 답 A====리터럴 - 값의 가치를 평가 하기 전. 값- 연산돼서 메모리에 저장된 평가(evaluation). 연산의 결과물 = 값. 연산자 = 값을 만들어 내는 것. 5-3...