모던 자바스크립트 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..

모던 자바스크립트 Deep Dive 정리 템플릿 리터럴의 암묵적 타입 변환 ▶ ${1 + 1} 이 '2'로 타입 변환된다 ▷ 예시 `1 + 1 = ${1 + 1}` // -> "1 + 1 = 2" 숫자 타입으로 변환 ▶ + 연산자는 문자열 타입으로 변환하는데에도 쓰이고 (양의 + 성격으로 쓰이면 숫자로도 변경 가능) ▶ -, *, / 연산자는 숫자 타입으로 변환하는데만 쓰인다 ▷ 예시 1 - '1' // -> 0 1 * '10' // -> 10 1 / 'one' // -> NaN // 문자열로 나눌 수 없다 + 단항 산술 연산자를 이용하는 방법 // 문자열 타입 => 숫자 타입 +'0'; // -> 0 +'-1'; // -> -1 +'10.53'; // -> 10.53 // 불리언 타입 => 숫자 타입 ..

모던 자바스크립트 Deep Dive 정리 ▶ 제어문은 조건문과 반복문으로 크게 나눌 수 있다 ▷ 과도한 제어문은 가독성을 해치기 때문에 map, forEach, filter, reduce 같은 고차함수로 제어문을 최소화하는게 바람직하다 fall through ▶ switch 문에서, case 마지막에 break를 기재하지 않아서 모든 case문을 실행해버리는 문제 ▷ fall through 현상으로 조건문이 무용지물이 되기 때문에 case 뒤에 break를 잘 써서 이를 방지한다 ▷ default 뒤에는 break를 쓰지 않아도 된다 ▷ 의도적으로 fall through를 사용하는 경우 const year = 2000; // 2000년은 윤년으로 2월이 29일이다. const month = 2; cons..

모던 자바스크립트 Deep Dive 정리 증가/감소(++/--) 연산자 ▶ 증감 연산자는 위치에 의미가 있다 ▷ 전위 연산자 : 먼저 피연산자의 값을 증가/감소시킨 후 다른 연산을 수행 // 전위 연산자 예시 // ... return ++this.size; // size를 1 증가시킨 값을 리턴 // ... ▷ 후위 연산자 : 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소 // 후위 연산자 예시 const x = 1; console.log(x++); // 1 console.log(x); // 2 문자열 연결 연산자 ▶ + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다 비교 연산자 ▶ 동등/일치(==/===) 비교 연산자 비교 연산자 사례 설명 == x == y ..

모던 자바스크립트 Deep Dive 정리 표현식 삽입 ▶ + 연산자는, 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다 ▷ 예) console.log( 'My name is' + 100 + 20 ); // My name is10020 ▶ 템플릿 리터럴에서 ${ } 안에는 표현식이 위치하며, 평가된다 ▷ 예) console.log(`1 + 2 = ${1 + 2}`); // 1 + 2 = 3 Null 타입 ▶document.querySelector 메서드는 조건에 부합하는 HTML 요소를 검색할 수 없는 경우 에러 대신 null을 반환 ▷ 예)

모던 자바스크립트 Deep Dive 정리 값의 할당 ▶변수 선언은 런타임 이전에 미리 실행(undefined로)된다고 배웠다 ▶값의 할당은 런타임에 실행 변수 선언에 별도의 주석이 필요하다면 변수의 존재 목적을 명확히 드러내지 못하는 것이다 평가 Evalutate (계산) ▶10 + 20 은 30으로 평가된다 ▶값은 표현식이 평가되어 생성된 결과이다 리터럴 ▶사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 ▶3은 숫자 리터럴이다 표현식 ▶값으로 표현될 수 있는 문 ▶표현식 : 변수에 할당 가능 ▷예) 10 + 20 ▷x = 100 (할당문) ▷크롬 개발자 도구에서 실행시 평가된 값 반환 ▶표현식이 아닌 문 : 변수에 할당 불가 ▷var score; ▷console.log(10..

모던 자바스크립트 Deep Dive 정리 변수 ▶하나의 값을 저장하기 위해 확보한 메모리 공간 자체와 이것을 식별하기 위해 붙인 이름 ▶메모리 주소를 변수로 감싸서 사용 ▶변수에 할당하지 않으면 재사용할 수 없다 참조 (Reference) ▶변수에 저장된 값을 읽어들이는 것 식별자 ▶핵심 기능은 식별 ▶변수의 상위 개념이며 그밖에 함수, 클래스의 상위 개념이기도 함 ▶메모리 주소를 기억 (값이 아닌) 변수 선언 ▶var, let, const ▷var, let을 이용한 변수 선언은 undefined 초기화를 수반 ▶변수 선언은 런타임 이전에 미리 실행됨 → 호이스팅 가능케함 ▷호이스팅 : 변수 선언문이 참조문 위에 있는 것처럼 동작하는 것 // 호이스팅 사례 console.log(foo); // undef..