![]()
모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다. 16. 1 내부 슬롯과 내부 메서드 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 EXMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메소드 자바스크립트 엔진의 내부 로직이므로 일부를 제외하면 직접적으로 접근, 호출 불가능 const O = {}; o.[[Prototype]]// => Uncaught SyntaxError: Unexpexted token '[' o.__proto__// => Object.prototype 16. 2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의 프로퍼티의 상태 프로퍼티의 값, 값의 갱신 ..
![]()
모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다. 14. 1 변수의 생명 주기 변수의 생명주기 메모리 공간이 확보된 시점부터 메모리 공간이 헤제 되어 가용 메모리 풀에 반환되는 시점 변수에 생명 주기가 없다면 한번 생성된 변수는 프로그램을 종료하지 않는 한 메모리 공간 점유 호이스팅 변수 선언이 스코프의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유 동작 호이스팅은 스코프를 단위로 동작 지역 변수의 생명 주기 지역 변수의 생명 주기 = 함수의 생명 주기와 일치 함수 호출 직후 함수 몸체의 코드가 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 실행 대부분 지역 함수의 생명 주기와 함수의 생명 주기가 일치하지만 지역 함수보다 오래 생존 할 수도 있음 function foo() ..
![]()
모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다. 12. 1 함수란? 함수 계산 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의 함수 이름 : 함수를 구별하기 위해 붙인 식별자 매개 변수 (parameter) : 함수 내부로 입력을 전달 받는 변수 반환값 (return value) : 출력 인수 (argument) : 입력 함수 정의 (function definition) 함수 생성 함수 정의만으로 함수가 실행되지 않음. 함수 호출 (function call/invoke) 인수를 매개 변수를 통해 함수에 전달 및 함수의 실행 명시적 지시 함수를 호출 시 코드 블록에 담긴 문들 일괄적으로 실행 및 반환값 반환 12. 2 함수를 사용하는 이유 코드의 재사용 함수는 몇 번..
![]()
모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다. 원시 타입 객체 타입 변경 불가능한 값 변경 가능한 값 변수에 할당하면 변수에 실제 값 저장 변수에 할당하면 변수에 참조 값 저장 원시 값 할당 변수 참조 -> 메모리에 저장되어 있는 원시 값 접근 객체 할 변수 참조 -> 메모리에 저장된 참조 값으로 실제 객체 접근 "변수는 ~ 값을 갖는다" "변수의 값은 ~ 이다" "변수는 객체를 참조하고 있다" "변수는 객체를 가리키고 있다" 변수를 다른 변수에 할당 => 원본의 원시 값이 복사되어 전달 = 값에 의한 전달 변수를 다른 변수에 할당 => 원본의 참조 값이 복사되어 전달 = 참조에 의한 전달 원시 값을 가진 변수 값 변경 -> 재할당 객체를 할당한 변수 값 변경 -> 직접 변경 가능 S..
![]()
모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다. 10. 1 객체란? 자바스크립트는 객체 기반의 프로그래밍 언어 (원시 값을 제외한 나머지 값은 모두 객체) 원시 타입 객체 타입 단 하나의 값만 나타냄 다양한 타입의 값 (원시 포함)을 하나의 단위로 구성한 복합적 자료구조 변경 불가능한 값 변경 가능한 값 객체 0개 이상의 프로퍼티와 메서드로 구성된 집합 상태와 동작을 하나의 단위로 구조화 할 수 있음 자바스크립트의 객체는 함수와 밀접한 관계 프로퍼티 객체의 상태를 나타내는 값 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있음 키와 값으로 구성 메서드 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작 메서드 = 프로퍼티 값이 함수, 일반 함수와 구분 됌 객체지향 ..
![]()
모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다. 9.1 타입 변환이란? 타입 변환 기존 원시 값을 사용하여 다른 타입의 새로운 원시 값 생성 타입 변환 결과를 예측해야 오류 방지 가능 가독성에 따라 선택 사용 명시적 타입 변환 (타입 캐스팅) 암묵적 타입 변환 (타입 강제 변환) 개발자가 의도적으로 값의 타입 변환 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 변환 피연산자의 값을 암묵적 타입 변환 새로운 타입의 값을 만듬 => 단 한번 사용하고 버림 개발자의 의지가 코드에서 나타남 개발자의 의지가 코드에서 나타나지 않음 기존 원시값을 직접 변경하지 않음 원시 값 = 변경 불가능한 값(immutable value) 9. 2 암묵적 타입 변환 표현식을 표현할 때 코드의 문맥..
![]()
모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다. 제어문 조건에 따라 코드 블록을 실행(조건문) 하거나 반복 실행(반복문) 할 때 사용 코드의 실행 흐름 인위적 제어 가능 가독성 저하 8.1 블록문 블록문 (코드 블록, 블록) 0개 이상의 문을 중괄호로 묶은 것 블록문을 하나의 실행 단위로 취급 블록문의 끝에서는 세미 콜론을 붙이지 않음 // 블록문 { var foo = 10; } //제어문 var x = 1; if (x 암묵적 타입 변환\ else if문은 여러번 사용 가능 if (조건식) { // 조건식 1이 참이면 이 코드 블럭 실행 } else if (조건식2) { // 조건식 2가 참이면 이 코드 블럭 실행 } else { // 조건식 1과 2 모두 거짓이면 이 코드 블럭 샐행 ..
![]()
모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다. 연산자 피연산자 연산자의 대상 값으로 평가 될 수 있는 표현식 피연산자와 연산자의 조합으로 이루어진 연산자 표현식도 값으로 평가 가능한 표현식 연산자 피연산자를 연산하여 새로운 값을 만듬 값으로 평가된 하나 이상의 피연산자를 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 만듬. 7.1 산술 연산자 산술 연산자 피연산자를 대상으로 수학적 계산을 수행하여 새로운 숫자 값을 만듬 산술 연산이 불가능 할 경우 NaN을 반환 이항 산술 연산자 2개의 피연산자를 산술 연산하여 숫자 값을 만듬 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과가 없다. => 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경..
![]()
모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다. 데이터 타입 값의 종류 자바스크립트의 데이터 타입 구분 데이터 타입 설명 원시타입 숫자 타입 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열 타입 문자열 불리언 타입 논리적 참(true) 과 거짓(false) undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌 타입 ES6에서 추가된 7번째 타입 객체 타입 객체, 함수, 배열 등 각 타입마다 메모리 크기와 저장되는 2진수, 해석 방식이 다름. 숫자 타입 1과 문자열 타입 1은 다른 값 => 숫자 타입의 값은 산술 연산을 위해 생성 => 문자열 타입의 값은 텍스틀 화면에 출력하기 위..
![]()
모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다. 5.1 값 값 값 (value) = 표현식(expression)이 평가(evaluate) 되어 생성된 결과 모든 값은 데이터 타입을 가지며 메모리에 비트의 나열로 저장 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석 가능 ex) 0100 0001 : 숫자 해석 = 65 / 문자 해석 = A 평가 식을 해석해서 값을 생성하거나 참조하는 것 var sum = 10 + 20; 변수는 단 하나의 값만을 할당 받음. 변수에는 10 + 20 평가 됌 생성된 숫자 값 : 30 sum의 메모리 공간에 저장된 것은 값인 30 => 10 + 20 은 할당이전에 평가되어 값을 생성 5.2 리터럴 리터럴 사람이 이해할 수 있는 문자 또는 약속된 기호로 표..
![]()
모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다. 4.1 변수란 무엇인가? 왜 필요한가? 자바스크립트 엔진의 계산 기호(리터럴, 연산자) + 표현식의 의미 해석(파싱) => 계산(평가) 피연산자(operand) 메모리를 사용하여 기억. 메모리 = 메모리셀의 집합체 -> 단위 : 1바이트 = 8비트 각 셀은 고유의 메모리 주소를 가짐 메모리 주소 메모리 공간의 위치를 나타냄 0부터 시작해서 메모리의 크기만큼 정수로 표현 메모리에 저장되는 데이터는 데이터의 종류와 상관없이 모두 2진수에 저장 메모리 주소를 통해 값에 직접 접근 불가능 변수 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 그 메모리 공간을 식별하기 위해 붙인 이름 값의 위치를 가리키는 상징적인 이름 개발자의 가독성을 높일 ..
![]()
모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다. 3.1 자바 스크립트 실행 환경 웹 크롤링 서버에서 웹 사이트의 컨텐츠를 수집하기 위해 HTML 문서를 가져온 다음 가공해서 필요한 데이터만 추출 브라우저 Node.js HTML, CSS, JS 를 실행하여 웹페이지를 브라우저 화면에 렌더링 브라우저 외부에서 자바스크립트 실행 환경을 제공 파일 시스템 미제공 파일 시스템 기본 제공 클라이언트 사이드 Web API 지원 Node.js 고유의 API 지원 ECMAScript 지원 자바스크립트 코어인 ECMAScript 실행 가능 3.2 웹 브라우저 개발자 도구 윈도우 : Ctrl + Shift + I 패널 설명 Elements 로딩된 웹페이지의 DOM, CSS 편집하여 렌더링 된 뷰 확인 가능..
