[모던 자바스크립트 Deep Dive] 16장 프로퍼티 어트리뷰트
·
Frontend/모던 자바스크립트 Deep Dive
16장 프로퍼티 어트리뷰트 1. 내부 슬롯과 내부 메서드- 자바스크립트 엔진의 구현 알고리즘을 설며하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드- 이중 대괄호([[ ... ]])로 감싼 이름들이 내부 슬롯과 내부 메서드- 원칙적으로는 직접 접근하거나 호출하는 방법을 제공하지 않지만, 간접적으로는 가능 2. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체- 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다.- 프로퍼티 상태:프로퍼티 값: [[Value]]갱신 가능 여부: [[Writable]]열거 가능 여부: [[Enumerable]]재정의 가능 여부: [[Configurable]]위 값들은 직접 접근할 수 없지만..
[모던 자바스크립트 Deep Dive] 13장 ~ 15장
·
Frontend/모던 자바스크립트 Deep Dive
13장 스코프  1. 스코프란: 식별자의 유효한 범위 식별자란, 변수나 함수의 이름 등을 의미한다.식별자는 어떠한 값을 구별할 수 있어야 하므로 유일해야 한다. 즉 중복될 수 없다.자바스크립트에서는 스코프라는 개념을 통해 식별자의 중복을 방지한다.렉시컬 환경 : 스코프를 구분하여 식별자를 등록/관리하는 저장소(상위 스코프에 대한 참조를 관리함)실행 컨텍스트 : 현재 실행중인 코드에 대한 데이터 구조를 담고있는 동적인 데이터 구조스코프 내에서 식별자는 유일해야 하지만, 다른 스코프에서는 다른 이름의 식별자를 사용할 수 있다즉, 스코프는 네임스페이스다 👍 2. 스코프의 종류1) 전역 스코프- 전역에서 선언된 변수는 전역 스코프를 가진다.- 전역 변수는 어디서든지 참조할 수 있다. 2) 지역 스코프- 함수 ..
[모던 자바스크립트 Deep Dive] 45장 Promise
·
Frontend/모던 자바스크립트 Deep Dive
45장 Promise 1. 비동기 처리를 위한 콜백 패턴의 단점1) 콜백 헬어떠한 함수를 실행했을 때, 해당 함수 내부의 비동기 함수가 완료되지 않았다해도, 비동기 함수를 기다리지 않고 즉시 종료 된다. ex) setTimeout 비동기 함수let g = 0;setTimeout(() => { g = 100; }, 0);console.log(g); // 0  ex) get요청 비동기 함수const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { return JSON.parse(xhr.response); }};const res = get('https://..
[모던 자바스크립트 Deep Dive] 12장 함수
·
Frontend/모던 자바스크립트 Deep Dive
12장 함수 1. 함수란 ? 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정한 것 함수 정의를 통해 생성하고, 함수 호출로 실행한다. 2. 함수를 사용하는 이유 코드의 재사용성 유지보수의 편의성 코드의 신뢰성/가독성 3. 함수 리터럴 📌 구성 요소 : 함수 이름, 매개변수 목록, 함수 몸체 일반 객체는 호출할 수 없지만, 함수는 호출할 수 있으며 고유의 프로퍼티를 갖는다. 함수는 "객체" 이다. 4. 함수 정의 1) 함수 선언문 function add(x,y) { return x + y; } console.dir(add); // console.log와 다르게 객체의 프로퍼티까지 출력 console.log(add(2,3)); ✅ 함수 선언문은 표현식이 아닌 "문" 이다. (und..
[모던 자바스크립트 Deep Dive] 09 ~ 11장
·
Frontend/모던 자바스크립트 Deep Dive
09장 타입 변환과 단축 평가 1. 타입 변환 1) 명시적 타입 변환(explicit coercion) / 타입 캐스팅 : 개발자가 의도적으로 값의 타입을 변환 하는 것 var x = 10; var str = x.toString(); // 숫자를 문자열로 타입 캐스팅 2) 암묵적 타입 변환 : 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것 var x = 10; var str = x + ''; // typeof str = string 👉 명시적/암묵적 타입 변환은 기존 원시 값을 직접 변경하는 것이 아니라, 새로운 원시 값을 생성하는 것! 2. 암묵적 타입 변환 1) 문자열 타입으로 변환 1 + '2' // "12" NaN + '' // "NaN" true + ''..
[모던 자바스크립트 Deep Dive] (01~03) 04~08 장
·
Frontend/모던 자바스크립트 Deep Dive
01장 - 프로그래밍 프로그래밍은 요구사항의 집합을 분석해 적절한 자료구조를 이용하여 흐름을 제어하는 것 02장 - 자바스크립트란? 1. 역사 넷스케이프 커뮤니케이션즈의 모카 👉 라이브스크립트 👉 자바스크립트 2. 표준화 ECMA 인터내셔널(컴퓨터 시스템 표준화 관리)에서 ES1 ~ ES6까지 발전해옴 3. 성장 초창기 자바스크립트는 웹페이지의 보조적 역할 Ajax : 서버와 브라우저가 비동기방식으로 데이터 교환 jQuery : DOM을 더욱 쉽게 제어 V8 자바스크립트 엔진 : 더욱 빠른 성능 Node.js : 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 SPA 프레임워크 : CBD방법론을 기반한 SPA가 대중화 되면서 여러 프레임워크/라이브러리 등장 4. ECMAScript 자바스크립트 표준..
[Js] 2차원 배열 new Array().fill()로 값 할당할 때 주의할 점
·
Frontend/Article
요새 프론트엔드가 js로 코딩테스트 보는게 많아져서 js로 여러 알고리즘 문제를 풀고있는데... 알고리즘 문제를 풀다보면 배열을 초기화 해놓고 그 배열을 이용하는 경우가 많다. 그래서 js도 배열을 초기화하는 메서드 fill 이 있길래 그걸 주로 이용했엇는데 2차원 배열에선 절대 사용하면 안되는걸알았다... let arr = new Array(4).fill([]); for(let i=0;i
[JS] 15_함수와 이벤트
·
Frontend/기타
# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 함수 알아보기 1) 함수 선언 function 함수명() { 명령 } 2) 함수 호출 함수명() 또는 함수명(변수) ex) 함수를 이용하여 두 수 더하기 function addNumber() { var num1 = 2; var num2 = 3; var sum = num1+ num2; alert("결과값: " + sum); } addNumber(); 2. var를 사용한 변수의 특징 1) 변수의 범위 ⓐ 지역 변수 : 한 함수 안에서만 사용할 수 있는 변수 function addNumber() { var sum = 10+ 20; //함수 안에서 사용한 지역변수 } addNumber(); console.log..
[JS] 14_자바스크립트 기본 문법
·
Frontend/기타
# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 변수 알아보기 1) 변수 : 프로그램을 실행하는 동안 값이 여러번 달라 질 수있는 데이터 2) 상수 : 값을 지정하면 바뀌지 않는 데이터 2. 변수 선언 규칙 1) 영어문자와 _(언더스코어-아래다시), 숫자를 사용함 2) 영어 대소문자 구별함, 예약어 변수 이름 못 씀 3) 여러 단어를 연결한 변수이름은 중간에 대문자를 섞어쓰는게 좋음 4) 변수 이름은 의미있게! 3. 변수 선언하기 var 변수명; var a, b, c; //한꺼번에 변수 지정이 가능하다. 4. 자료형 종류 설명 예시 숫자형 따옴표 없이 숫자로만 표시(정수, 실수) var num = 1000; 문자형 작은/큰따옴표로 묶어서 나타냄 var ..