모던자바스크립트

CH14 전역변수의 문제점

변수의 생명주기 ⇒ 메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리 풀에 반환되는 시점까지 지역변수의 생명주기 변수는 생명주기가 있다. 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 함수 내부 지역변수는 함수가 호출되면 생성되고, 종료되면 소멸하게 된다. → 지역변수의 생명주기는 함수의 생명주기(해당 스코프의 생명주기)와 일치한다. 해당 스코프와 변수가 외부에서 참조되는 경우는 스코프는 소멸하지 않고 생존하게 된다. 전역변수는 어플리케이션과 동일한 생명주기를 갖는다. 또한, 호이스팅은 스코프 단위로 동작한다. var x = "global"; function foo(){ console.log(x); //undefined var x = "local"; } foo(); console.lo..

CH 13 스코프

스코프 식별자가 유효한 범위 식별자는 자신이 선언된 위치에 의해 자신이 유효한 범위, 즉 다른 코드가 식별자 자신을 참조할 수 있는 범위가 결정된다. 렉시컬 환경 코드가 어디서 실행되며 주변에 어떤 코드가 있는가? 코드의 문맥(context)는 렉시컬 환경으로 이뤄진다. 이를 구현한 것이 실행컨텍스트로, 모든 코드는 실행 컨텍스트에서 평가되고 실행된다. 네임스페이스 스코프는 네임스페이스이다. 식별자의 이름은 스코프 내에서 유일해야한다. 즉, 다른 스코프에서는 동일한 이름의 식별자를 사용할 수 있다. var x='global'; function foo(){ var x='local'; console.log(x); } foo(); 전역 컨텍스트와 foo의 실행컨텍스트가 달라 이름이 동일한 식별자인 x에 대해 ..

CH10 객체리터럴

객체란? JS는 객체기반의 프로그래밍언어 원시값을 제외한 모든 것들은 객체임 객체타입 객체타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조로 변경가능한 값임 원시타입 변경 불가능한 값임 객체의 구조 0개 이상의 프로퍼티로 구성된 집합 프로퍼티 key-value 쌍으로 구성됨 JS에서 사용하는 모든 값은 프로퍼티 값이 될 수 있음 객체의 상태를 나타내는 값 메서드 js의 함수는 일급 객체이므로 값으로 취급할 수 있음 따라서 함수역시 프로퍼티로 사용이 가능하며, 이를 메서드라고 부름 프로퍼티를 참조하고 조작하는 동작을 말함 객체의 생성 객체 생성의 방법 객체리터럴 Object 생성자 함수 생성자 함수 Object.create 메서드 클래스(ES6) 객체 리터럴에 의한 생성 가장 일반적인 방법..

CH07 연산자

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산등을 수행하여 하나의 값으로 만든다. 산술연산자 산술영ㄴ산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술연산이 안되는 경우 NaN을 반환한다. 이항산술연산자 이항 산술연산자는 2개의 피연산자를 산술연산하여 숫자값을 만든다. 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수효과가 없다. 피연산자는 절대 바뀌지 않는다. 새로운 값을 만들뿐이다. +,-,x,/,%이다. 단항산술연산자 단항 산술연산자는 1개의 피연산자를 산술연산하여 숫자값을 만든다. ++ 1증가 부수효과 있음 — 1감소 부수효과있음 + 효과 없음(숫자 타입으로 변경(새로 생성)하여 반환) - 음수를 양수로, 양수를 음수로 반전..

CH06 데이터 타입

자바스크립트의 모든 값은 데이터 타입을 갖는다. ES6는 7개의 데이터 타입을 제공한다. 데이터 타입은 원시타입과 객체타입으로 나눌 수 있다. 구분 데이터 타입 설명 원시타입 숫자 숫자, 정수와 실수 구분없음 원시타입 문자열 문자열 원시타입 불리언 논리적 참과 거짓 원시타입 undefined var 키워드로 선언된 변수에 암묵적으로 할당되는 값 원시타입 null 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 원시타입 심벌타입 ES6에서 추가된 7번째 타입, 중복되지 않는 유일한 값 객체타입 객체, 함수, 배열 숫자타입 ECMAScript 사양에 따르면 숫자타입은 배정밀도 64비트 부동소수점 형식을 따른다. 모든 수는 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 따로 존재하지 않는다. 또한 ..

CH05 표현식과 문

값 식이 평가되어 생성된 결과 10+20 은 식이고, 결과인 30은 값이다. 변수에 할당 되는 것, 될 수 있는 것은 값이다. 리터럴 사람이 이해할 수 있는 문자, 또는 약속된 기호를 사용해 값을 생성하는 표기법 3 //숫자 리터럴 3 숫자 리터럴 3을 코드에 작성하면, 자바스크립트 엔진은 이를 평가해 숫자값 3을 생성한다. 자바스크립트 엔진은 런타임에 리터럴을 평가하여 값을 생성한다. 정수리터럴 100 부동소수점 리터럴 10.5 2진수 리터럴 0b010001 8진수 리터럴 0o101 16진수 리터럴 0x41 문자열 리터럴 ‘hi’ 불리언 리터럴 true, false null 리터럴 null undefined 리터럴 undefined 객체 리터럴 {name:”hi”, age:1} 배열 리터럴 [1,2,3..

CH04 변수

변수란 무엇인가? 10+20 해당 식을 계산하기 위해서는 10, 20, + 기호의 의미를 이해하고, 10+20이라는 식의 의미도 파악할 수 있어야 한다. 숫자 10과 20은 메모리 어딘가에 기억되고, CPU는 이 값을 읽어 연산을 수행한다. 결과로 생성된 숫자 30도 메모리상의 임의 위치에 저장된다. 이 10과 20, 30은 절대 다시 접근하여 사용할 수 없다. 메모리에 접근할 수도 있지만, 매우 치명적인 오류를 초래할 수도 있기에 자바스크립트는 직접적인 메모리 제어를 제공하지 않는다. 또한, 메모리 주소를 알 수 있는 방법도 없으므로, 사용이 불가능하다 할 수 있다. 이를 해결하기위해 제공되는 것이 변수이다. 변수 하나의 값을 저장하기 위해 확보한 메모리 공간, 메모리 공간을 식별하기 위해 붙인 이름 ..

CH03 자바스크립트 개발환경과 실행환경

JS 실행환경 JS엔진은 브라우저에도있으나 Node.js도 JS엔진을 내장하고 있음 기본적으로 브라우저에서 동작하는 코드는 node.js에서도 동일하게 동작함 주의점 용도 브라우저 HTML, CSS, JS를 실행해 브라우저 화면에 렌더링하는 것이 주된 목적 Node.js 브라우저 외부에서 자바스크립트 실행환경을 제공하는 것이 주된 목적 차이점 | 분류 | 웹브라우저 | nodejs | | --- | --- | --- | | DOM API | O | X | | 파일 생성, 수정 | X | O | | WEB API | O | X | | NodeJS고유 API | X | O | 브라우저 개발자도구 자주사용하는 기능 Elements 로딩된 웹페이지의 DOM과 CSS를 편집하여 렌더링된 뷰를 확인할 수 있음 HT..