본문 바로가기

programming study/JavaScript

(186)
11장 - 원시 값과 객체의 비교 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 11.0 원시 타입 vs. 객체 타입 원시 타입(Primitive Type) 숫자, 문자열, 불리언, null, undefiend, 심벌 변경 불가능한 값(Imumtuable Value) 값에 의한 전달: 원시 값 변수를 다른 변수에 할당하면 그 값을 복사함 객체 타입(Object/Reference Type) 객체 변경 가능한 값(Mutable Value) 참조에 의한 전달: 참조 값 변수를 다른 변수에 할당하면 참조 값을 전달 11.1 원시 값 11.1.1 변경 불가능한 값 한번 생성된 원시 값은 읽기 전용 값으로 변경할 수 없음 읽기 전용 값 변수와 혼동 주의 변수에 할당하는 값은 무엇이든..
10장 - 객체 리터럴(2) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 10.4 메서드 자바스크립트의 함수는 일급 객체이므로 값으로 취급 가능함 즉, 객체에서 프로퍼티로 사용 가능하며 이를 메서드라 함 const siru = { isCat: true, isDog: false, eatChuru: function () { console.log('맛잇다!'); } } 10.5 프로퍼티 접근 2가지의 표기법을 사용하여 접근 가능 접근 연산자 좌측에는 객체로 평가되는 표현식이 위치 프로퍼티 키가 존재하지 않아도 undefined가 발생할 뿐 에러가 발생하지 않으니 주의 마침표 표기법 마침표 접근 연산자 사용 프로퍼티 키가 식별자 네이밍을 준수한 경우 사용 가능 대괄호 표기..
10장 - 객체 리터럴(1) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 10.1 객체란? 자바스크립트는 객체 기반의 프로그래밍 언어 원시값을 제외하고 구성하는 거의 모든 것이 객체 객체 타입 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조 변경 가능한 값(mutable value) 0개 이상의 프로퍼티로 구성된 집합 key : value 상태와 동작을 하나의 단위로 구조화 OPP 메서드(Method) 자바스크립트의 함수는 일급 개체이므로 값으로 취급 즉, 프로퍼티의 값으로 사용 가능 프로퍼티 값으로서 사용된 함수를 메서드라 함 const myPet = { // 프로퍼티들 age: 6, name: 'siru', isCat: true, isDog: fals..
09장 - 타입 변환과 단축 평가 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 9.1 타입 변환이란? 명시적 타입 변환(타입 캐스팅) : 개발자가 의도적으로 값의 타입을 변환 암묵적 타입 변환(타입 강제 변환) : 자바스크립트 엔진에 의해 타입이 자동 변환 어떤 타입 변환이든 기존 원시값을 직접 변경하는 것은 아님 변환한 타입의 새로운 원시 값을 생성하는 것 쉽게 이해할 수 있는 코드를 위해서 암묵적 타입 변환은 지양 9.2 암묵적 타입 변환 암묵적 타입 변환의 의도 표현식을 평가할 때 코드의 문맥에 부합하지 않으면 오류가 발생하는데, 자바스크립트는 이 오류를 최소화하기 위해서 암묵적 타입 변환을 함 자바스크립트 엔진은 표현식을 평가할 때 코드 문맥에 부합하도록 암묵적 ..
08장 - 제어문 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 8.0 제어문이란? 조건에 따라 코드 블록을 실행, 반복실행할 때 사용 코드 블록: 중괄호({})로 감싼 것 코드의 실행을 인위적으로 제어 가독성을 해치는 단점 함수형 프로그래밍 기법에서는 고차함수(파이프라인)을 활용하여 제어문의 사용 억제 JavaScript의 고차함수 : forEach, map, filter 8.1 블록문 0개 이상의 문을 중괄호로 묶은 것 하나의 실행 단위 취급 단독 사용 가능 블록문은 자체 종결성을 가진다. 문의 끝에 세미 콜론을 붙일 필요가 없음 8.2 조건문 주어진 조건식 평과 결과에 따라 코드 블록의 실행 결정 조건식 : 불리언 값으로 평가될 수 있는 표현식 자바스..
07장 - 연산자(3) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 7.9 지수 연산자 ES7 도입 이전에는 Math.pow 메서드 사용 지수 연산자가 가독성이 더 좋음 좌항을 밑, 우항을 지수로 거듭 제곱 이항 연산자 중 우선순위가 가장 높음 console.log(2 ** 2); // 4 ​ // ES7 이전의 Math.pow 메서드 console.log(Math.pow(2, 2,)); // 4 7.10 연산자의 부수 효과 대부분의 연산자는 다른 코드에 영향을 주지 않음 새로운 값을 생성할 뿐 일부 연산자의 경우 영향을 주는 부수 효과가 있음 할당 연산자(=) 증가/감소 연산자(++, --) delete 연산자 7.11 연산자 우선순위 연산자는 우선순위에 맞..
JavaScript - async & await 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. async & await JavaScript 비동기 패턴 처리 문법 Promise보다 더 직관적으로 사용할 수 있음 문법적 설탕 2. 사용조건 함수 선언문 앞에 async가 붙어야 함 함수 안에서 비동기 처리를 위해서 Promise를 반환하는 로직 앞에 await를 붙여야 함 3. 예시 function getPetName() { return new Promise(function(resolve, reject) { const petName = 'siru'; resolve(petName); }) } ​ async function fetchPetInfo() { // Pro..
07장 - 연산자(2) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 7.4 삼항 조건 연산자 조건식의 평가 결과에 따라 반환할 값을 결정 세 피연산자를 가짐 조건식: 첫번째 피연산자 조건식이 참일 때는 두번째 피연산자를 반환 조건식이 거짓일 때는 세번째 피연산자를 반환 if문을 짧고 간결하게 대체할 수 있음 단, if문은 조건문이고 삼항 조건 연산자 표현식은 값처럼 사용가능 중첩해서 사용하는 것은 지양 예시 const siruAge = 6; ​ // 삼항 조건 연산자 표현식은 값처럼 사용 가능 const siru = siruAge > 3 ? '어른' : '아이'; ​ cosnole.log(siru); // 어른 7.5 논리 연산자 우항과 좌항의 피연산자를 논리..