자바스크립트 22

[JavaScript 스터디] let, const

var 변수의 문제점 변수 중복 선언 가능 함수 레벨 스코프 변수 호이스팅 let 변수 중복 선언 불가능 블록 레벨 스코프 변수 호이스팅 let 변수는 선언 단계와 초기화 단계가 분리되어 일어남 스코프 시작 지점 ~ 초기화 시작 지점까지 일시적 사각지대 존재 --> 이때에는 변수를 참조할 수 없음 모든 선언은 호이스팅 되지만, ES6의 let, const, class는 호이스팅이 안되는 것처럼 작동함 let 변수는 전역 객체에 없음 --> 실행 컨텍스트에 존재 const const 변수는 반드시 선언과 초기화를 같이 해야함 재할당 불가능 상수 == 재할당이 금지된 변수 재할당이 불가능하기에 원시값이 있는 변수는 값을 교체할 수 없음 객체 변수는 객체 내부를 변경할 수 있음 --> 재할당과 불변은 다름 결..

[JavaScript 스터디] 전역 변수

변수의 생명주기 var 지역 변수의 생명주기는 함수의 생명주기와 일치함 변수의 생명주기는 메모리 공간 확보시점 ~ 가용 메모리 풀로 반환되는 시점 호이스팅은 스코프 단위로 작동함 전역 변수의 생명주기는 코드의 마지막 문이 끝날 때까지 var 전역 변수의 생명주기는 전역 객체의 생명주기와 동일함 전역 변수의 문제점 암묵적 결합 긴 생명주기 소코프 체인에서 제일 마지막에 탐색 --> 상대적으로 검색 속도가 느림 네임스페이스 오염 --> 파일이 분리되어 있어도 전역 스코프를 공유함 전역 변수 사용 억제하기 모든 코드를 즉시 실행 함수로 감싸기 네임스페이스로 사용할 객체 활용 모듈 패턴 ES6 모듈 사용 --> 파일 자체 독자적인 모듈 스코프 제공 학습 도서 '모던 자바스크립트 Deep Dive', 이웅모 저,..

[JavaScript 스터디] 스코프

식별자가 유효한 범위 식별자를 검색할 때 사용하는 규칙 네임스페이스 종류 전역 스코프 : 코드의 가장 바깥 영역 지역 스코프 : 함수 몸체 영역 전역 변수는 어디서든 참조 가능 지역변수는 자신의 지역 스코프와 하위 스코프에서만 참조 가능 스코프 체인 스코프는 함수 중첩에 의해서 계층적인 구조를 띰 자바스크립트 엔진은 변수를 참조할 때 변수 참조 코드의 스코프에서부터 바깥 스코프 방향으로 변수를 탐색함 상위 스코프의 변수는 하위 스코프에서 참조 가능 하위 스코프의 변수는 상위 스코프에서 참조 불가능 함수 레벨 스코프 함수에 의한 지역 스코프 var 키워드로 선언한 변수는 함수의 코드 블록(몸체)만을 지역 스코프로 함 렉시컬 스코프 함수를 어디서 정의했는지에 따라 상위 스코프 결정 함수를 정의한 위치를 기준..

[JavaScript 스터디] 함수

일련의 과정을 문으로 구현하고 코드블록으로 감싸서 하나의 실행단위로 정의한 것 자바스크립트에서 함수는 값 함수이름, 매개변수, 인수, 반환값, 함수 몸체 함수를 정의해서 생성하고 호출을 통해 사용함 함수 사용 이유 코드의 재사용, 유지보수의 편리성, 코드의 신뢰성, 코드의 가독성 함수 리터럴 리터럴은 값을 생성 자바스크립트에서 함수는 객체 타입의 값 함수이름 생략 가능 함수 리터럴은 function, 함수이름, 매개변수, 몸체로 구성됨 함수이름 : 함수 몸체 내부에서만 참조할 수 있는 식별자 일반 객체는 호출 불가능, 함수는 호출 가능 함수 생성 방식 함수 선언문 함수이름을 생략할 수 없음 표현식이 아닌 문 --> 변수에 할당 불가능 함수 이름은 함수 몸체에서만 참조하기에 함수 이름으로 외부에서 호출하는..

[JavaScript 스터디] 원시 값, 객체 비교

원시 타입의 값 : 변경 불가능한 값(Immutable value) 변수에 할당하면 메모리 공간에 실제 값이 저장됨 원시 값을 가진 변수를 다른 변수에 할당 --> 원시 값이 복사됨(pass by value) 객체 타입의 값 : 변경 가능한 값(Mutable value) 변수에 할당하면 메모리 공간에 참조 값이 저장됨 객체를 가리키는 변수를 다른 변수에 할당 --> 참조 값이 복사됨(pass by reference) 두 타입의 변수는 모두 값이 있는 메모리 공간의 주소를 전달 --> 변수에 대해서는 pass by reference라고 볼 수 있음 두 타입의 값은 결국 식별자가 알고있는 메모리 공간의 값을 복사 --> 데이터에 대해서는 pass by value라고 볼 수 있음 원시 타입의 값 변경이 불가능..

[JavaScript 스터디] 객체 리터럴

객체란 무엇인가 원시 값을 제외한 모든 것 복합적인 자료구조 변경 가능한 값(Mutable value) 0개 이상의 프로퍼티로 구성된 집합 자바스크립트에서 사용할 수 있는 값은 모두 프로퍼티 값이 될 수 있음 함수 == 일급 객체 --> 함수도 프로퍼티 값이 될 수 있음 --> 메서드 객체 = 프로퍼티, 메서드의 집합체 생성 방법 : 객체 리터럴, Object 생성자 함수, 생성자 함수, Object.create(), 클래스(ES6) 객체 리터럴에 의한 객체 생성 객체 리터럴은 중괄호 안에 0개 이상의 프로퍼티를 정의함 자바스크립트 엔진은 할당 시점(런타임)에 객체 리터럴을 해석해서 객체를 생성함 프로퍼티를 정의하지 않으면 빈 객체 객체 리터럴의 중괄호는 코드 블록을 의미X --> 값으로 평가되는 표현식..

[JavaScript 스터디] 데이터의 타입 변환, 단축 평가

타입 변환 값의 타입이 변경되는 것 명시적 타입 변환 == 타입 캐스팅 --> 개발자가 의도적으로 변환 암묵적 타입 변환 == 타입 강제 변환 --> 자바스크립트 엔진이 알아서 변환 타입 변환은 기존 원시 값을 변경하지 못함 --> 원시 타입은 Immutable value이기 때문 기존 원시 값을 사용하여 다른 타입의 새로운 원시 값을 생성하는 것 암묵적 타입 변환은 새로운 타입의 값을 단 한 번만 사용하고 버림 --> Garbage Collection 대상 암묵적 타입 변환 자바스크립트 엔진이 알아서 값의 타입을 변환함 문자열 타입으로 변환 템플릿 리터럴의 표현식(${}) 삽입 기능은 식의 평가 결과를 string 타입으로 암묵적으로 변환함 숫자 타입으로 변환 자바스크립트 엔진은 산술 연산자의 피연산자..

[JavaScript 스터디] 제어문

제어문 : 조건문, 반복문 블록문 0개 이상의 문을 중괄호({, })로 묶은 것 블록문은 자체 종결성을 지니므로 세미콜론을 붙이지 않음 조건문 if-else 문 조건식은 boolean으로 평가되어야 함 만약 조건식이 boolean이 아니면, 자바스크립트 엔진은 조건식을 암묵적으로 타입 변환을 일으켜서 실행할 블록을 결정함 else if, else는 선택 switch 문 주어진 표현식을 평가해 값이 일치하는 case 문부터 실행됨 fall through : switch 문이 끝날 때까지 만나는 case 문과 default 문을 실행하는 현상 --> 중도에 switch 문을 탈출하려면 break 문을 사용 반복문 조건식이 false일 때까지 반복되는 제어문 for 문, while 문, do-while 문 f..

[JavaScript 스터디] 연산자

연산자는 하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만든다. 산술 연산자 이항 산술 연산자 +, -, *, /, % 2개의 피연산자를 산술 연산해서 숫자 값을 반환함 피연산자의 값을 변경하지 않음 단항 산술 연산자 ++, --, +, - 1개의 피연산자를 산술 연산해서 숫자 값을 반환함 증감 연산자는 피연산자의 값을 변경함(암묵적 할당 발생) +는 피연산자를 변경하지 않고, 숫자값을 생성해서 반환함 -는 부호 반전 문자열 연결 연산자 +연산자는 피연산자 중 단 1개라도 문자열이라면 문자열 연결 연산자로 작동함 할당 연산자 우항의 평가 결과를 좌항의 변수에 할당함 할당문은 표현식인 문 --> 값으로 사용된다. =, +=, -=, *=, /=, %= 비교 연산자 좌항과 우항을 비교하여 boo..

[JavaScript 스터디] 데이터 타입

자바스크립트의 모든 값은 데이터 값을 가짐 데이터 타입 원시 타입 : number, string, boolean, undefined, null, symbol(ES6에서 추가) 객체 타입 : 객체, 함수, 배열 등 데이터 타입의 필요성 메모리 공간의 확보, 참조 : 데이터 타입에 따라 메모리 공간의 크기가 결정 값의 해석 : 메모리에서 읽어온 2진수를 어떻게 해석할 것인지 결정 원시 타입 --> 변경 불가능한 값(Immutable value) 객체 타입 --> 변경 가능한 값(Mutable value) number 타입 자바스크립트는 하나의 숫자 타입만 존재함 배정밀도 64bit 부동소수점 형식 모든 수는 실수로 처리 2진수, 8진수, 16진수 등의 리터럴은 모두 10진수로 해석됨 정수로 표시되는 수끼리 ..