The ordinary developer, The ordinary developer,

1. 타입 변환이란? 자바스크립트 값의 타입을 변환시키는 것을 말한다. 개발자의 의도대로 타입을 변환 시키는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 하며, 자바스크립트 엔진에서 암묵적으로 변환시키는 것을 암묵적 타입 변환 또는 타입 강제 변환이라 한다. var x = 10; // 명시적 타입 변환 var str = x.toString(); // 숫자를 문자열로 타입 캐스팅한다. console.log(typeof str); // string var x = 10; // 암묵적 타입 변환 // 숫자 타입 x의 값을 바탕으로 새로운 문자열 타입의 값을 생성해 표현식을 평가한다. var str = x + ''; console.log(typeof str, str); // string 10 명시적 타입 변환/..

1. 값 값(value): 표현식(expression)이 평가되어 생성된 결과 // 변수에는 10+20이 평가되어 생성된 숫자 값 30이 할당된다. var sum = 10 + 20; 모든 값은 데이터 타입을 가짐 메모리에 2진수(bit)의 나열로 저장 메모리에 저장된 값을 ㅋ데이터 타입에 따라 다르게 해석 가능 ex) 0100 0001 → 숫자: 65, 문자: ‘A’ 2. 리터럴 리터럴(literal)은 값을 생성하는 방법 중 하나로, 사람이 이해할 수 있는 문자/기호를 사용하는 표기법을 말한다. JS 엔진은 코드가 실행되는 런타임에 리터럴을 평가해 값을 생성한다. // 리터럴을 사용하면 다음과 같이 다양한 데이터 타입의 값을 생성할 수 있다. // 문자열 리터럴 'Hello' "World" // 불리언..

1. 자바 스크립트의 표준화 (ECMAScript) 초창기 자바스크립트는 브라우저마다 호환되는 내용이 달랐음. → 특정 브라우저에서는 정상적으로 동작하지 않는 문제 발생 (크로스 브라우징 이슈) 이에 따라, 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트를 만들기로 함. → EMCAScript 탄생 EMCAScript는 1997년을 시작으로 현재까지 꾸준히 업데이트되고 있음. 주요 EMCAScript 개정 내용 ES3(1999년): try … catch, 정규 표현식 ES5(2009년): JSON ES6(2015년): let/const 키워드, 클래스, 화살표 함수 ES8(2017년): async/await 현재 익스플로러를 제외한 대부분의 브라우저들은 ES6 지원 2. 자바스크립트 성장의 역..

JavaScript의 비동기적 동작방식 (Web APIs) JavaScript는 근본적으로는 동기적으로 실행되는 싱글쓰레드 방식을 취하고 있다. 동시에 여러 코드가 실행되는 것이 아닌, 앞에 코드가 실행됐다가 종료되면 그제서야 뒤에 코드가 실행되는 방식을 취하고 있다는 의미이다. 하지만 setTimeOut, setInterval, 이벤트리스너, AJAX 등을 쓰면 비동기적으로 작동되는 방식을 취한다. 앞에 코드가 끝나든 말든 뒤에 코드가 바로 실행된다는 소리다. 이는 위의 함수들이 JS 엔진 내에서 구동되는 것이 아닌, 브라우저에서 구동되는 함수들이기 때문이다. 코드와 함께 살펴보면 다음과 같다. console.log("첫 번째"); setTimeout(() => { console.log("두 번째") ..

실행 컨텍스트 (Execution Context) JS 코드를 실행하는 데 필요한 환경을 제공하는 객체 식별자를 효율적으로 결정할 수 있도록 도와줌 실행 컨텍스트 구조 생성 단계 (Creation Phase) JS 코드를 실행하면, JavaScript 엔진은 CallStack에 전역 실행 컨텍스트 한 칸 생성 → 전체 코드 스캔 → 선언문이 있으면 실행 → 환경 레코드(Environment Record)에 식별자를 기록 실행 단계 (Execution Phase) 선언문 외 나머지 코드 순차적으로 실행 → 환경 레코드 참조 → 환경 레코드의 식별자 정보에 변경사항이 있으면 업데이트 일시적 사각 지대 (TDZ, Temporal Dead Zone) let, const로 선언했을 때, 선언 이전에 식별자를 참조..

| 참조형(Reference) 데이터의 할당 구조 | 기본형(Primitive) 데이터와 참조형(Reference) 데이터 할당의 차이점 변수영역/데이터 영역 외에 '객체의 변수영역'이 또 추가됨 변수에 참조형(Reference) 데이터 할당할 경우 var obj1 = { a: 1, b: 'ddd' }; 컴퓨터는 우선 변수 영역의 빈 공간(@1002)에 이름(obj1)과 값(데이터 영역 주소) 할당 데이터 영역 @5001에 obj1의 값을 위한 공간을 확보 @5001에 값을 저장할 별도의 데이터 영역(@7103 ~ ?) 확보, @5001에 이 주소 저장 @7103 및 @7104에 각각 a, b라는 프로퍼티 이름 지정 데이터 영역에 숫자 1이 있는지 검색 없으면 임의로 @5002에 숫자 1을 저장하고, 이..

순수 재귀 필요한 모든 코드가 함수 자체에 포함되며 재귀적 helper 메소드 재귀와 같이 외부 데이터를 사용하지 않음 function collectOddValues(arr){ let newArr = []; // newArr가 리셋되면서 빈 배열이 됨 if(arr.length === 0){ return newArr; } // 종료점 : arr의 길이가 0이 될 때 if(arr[0] % 2 !== 0){ newArr.push(arr[0]); } // arr의 첫 번째 값이 홀수일 경우 newArr 배열의 첫째 자리에 넣음 newArr = newArr.concat(collectOddValues(arr.slice(1))); // arr.slice(1)으로 첫번째 값을 제외한 배열을 재귀로 돌리고, concat..

변수 : 변경 가능한 데이터가 담길 수 있는 공간 식별자 : 변수의 이름 변수에 기본형(Primitive) 데이터 할당할 경우 let a; // 변수 선언, 식별자 a 지정 a = 'abc'; // 변수 a에 기본형 String 데이터 할당 변수 영역에서 빈 공간(@1003) 확보 @1003에서 데이터 이름(식별자)를 a로 지정 데이터 영역에서 빈 공간(@5003)에 문자열 'abc' 저장 변수 영역에서 식별자 a 검색해서 @1003으로 이동 변수 영역 @1003에 데이터 영역 주소 @5003 저장 변수 영역에 값을 직접 대입하지 않고 굳이 데이터 영역을 추가하는 이유 기본형(Primitive) 데이터에서 숫자형 데이터는 64bit(8byte)로 공간 값이 정해져 있지만, 문자열은 공간값이 특별히 정해지..