모던 자바스크립트 Deep Dive 정리 var 키워드로 선언한 변수의 문제점 1. 변수 중복 선언 허용 ▶ let, const에서는 에러가 발생하지만, var에서는 허용된다 var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. (에러를 발생시키지도 않음) var y; console.log(x); // 100 console.log(y); // 1 2. 함수 레벨 스코프 ▶ let, const는 블록 레벨 스코프이지만, var는 함수 레벨 스코프 ▷ var는 함수 블록 이외의..

모던 자바스크립트 Deep Dive 정리 전역 변수의 문제점 1. 암묵적 결합 ▶모든 코드가 전역 변수를 참조하고 변경할 수 있음 ▷변수의 유효범위가 크면 클수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 위험 높아짐 2. 긴 생명 주기 ▶메모리 리소스를 오랜 기간 소비 3. 스코프 체인 상에서 종점에 존재 ▶전역 변수는 가장 마지막에 검색되므로, 변수 검색 속도가 느려짐 4. 네임 스페이스 오염 ▶파일이 분리되어 있어도 같은 이름의 전역변수나 전역함수가 같은 스코프에 존재할 경우 예상치 못한 에러 발생할 수 있음 전역 변수의 사용을 억제하는 방법 1. 즉시 실행 함수 ▶모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다 ▷예시 (function () { var..

모던 자바스크립트 Deep Dive 정리 스코프란? ▶식별자가 유효한 범위 ▷예시) 식별자인 파일이름을 중복해서 사용할 수 있는 이유는, 폴더(디렉터리) 덕분 전역 스코프 ▶코드의 가장 바깥 영역 ▷전역 변수는 어디서든지 참조할 수 있다 지역 스코프 ▶함수 몸체 내부 ▷중첩이 가능 스코프 체인 ▶모든 스코프는 hierarchy를 가지며, 모든 지역 스코프의 최상위 스코프는 전역 스코프이다 ▶변수를 참조할때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다 함수레벨 스코프 vs 블록레벨 스코프 ▶함수레벨 스코프 ▷var ▷오직 함수 몸체만을 스코프로 인정하며 if, for 등의 코드 블록을 무시 ▶블록레벨 스코프 ▷let..

모던 자바스크립트 Deep Dive 정리 함수란? ▶일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 함수를 사용하는 이유 ▶실행 시점을 개발자가 결정할 수 있다 ▷원하는 시점에 함수 호출(invoke) 가능 ▶언제든지 재사용이 가능하다 ▷코드의 재사용성을 증가 -> 유지보수 편의성 증가 함수 리터럴 ▶함수 이름 ▷함수명은 식별자이기 때문에 식별자 네이밍 규칙을 준수해야 한다 ▷이름 사용 여부에 따라 기명함수, 무기명 함수로 나뉜다 ▶매개변수 ▷매개변수는 함수 몸체 내에서 변수와 동일하게 취급되므로 식별자 네이밍 규칙을 준수해야 한다 함수 정의 함수 정의에는 4가지 방법이 있다 1) 함수 선언문 2) 함수 표현식 3) Function 생성자 함수 4) ..

모던 자바스크립트 Deep Dive 정리 원시 타입과 객체 타입 ▶JS의 데이터 타입(7개)은 2가지로 나눌 수 있음 1. 원시 타입 (숫자, 문자열, 불리언, undefined, null, symbol) 2. 객체 타입 (객체, 함수, 배열) ▶원시 타입 (원시 값) ▷변경 불가능한 값 (읽기 전용) ▷변수에 할당하면 실제 값이 저장됨 ▶객체 타입 ▷변경 가능한 값 ▷변수에 할당하면 참조값(메모리 주소)이 저장됨 원시 값 ▶원시 값은 변경 불가능하다 ▷예시 var str = 'string'; // 문자열은 유사 배열(+이터러블)이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다. console.log(str[0]); // s // 문자열은 원시값이므로 변경할 수 없다. 이때 에러가 발생하..

모던 자바스크립트 Deep Dive 정리 객체란? ▶ 프로퍼티 ▷ 객체의 상태를 나타내는 값(data) ▶ 메서드 ▷ 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior) ▶ 인스턴스 ▷ 클래스에 의해 생성되어 메모리에 저장된 실체 ▷ 클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 한다 프로퍼티 ▶ 프로퍼티 키는 반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니다 ▷ 하지만 식별자 네이밍 규칙을 따르지 않는 프로퍼티 키는 반드시 따옴표를 사용해야 한다 ▷ 예시 const person = { firstName: 'Harry', // 식별자 네이밍 규칙을 준수하는 프로퍼티 키 'last-name': 'Kane' // 식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키 }; console..