과거의 내가 미래의 나에게

「딥다이브 자바스크립트」 정리 - 스코프 ※ 아래 내용은 책을 통해 학습한 것을 개인적으로 정리한 것으로 내용이 다소 부정확 할 수 있습니다. 스코프란? 식별자 참조 가능 유효 범위 모든 식별자는 자신이 선언된 위치에 의해 자신을 참조할 수 있는 유효 범위가 결정된다. 이 유효 범위를 스코프라고 한다. 식별자 검색 시 사용하는 규칙 스코프를 통해 js 엔진은 이름이 같은 두 개의 변수 중 어떤 변수를 참조할 지 결정하기도 한다. 즉, 식별자를 검색할 때 사용하는 규칙인 것이다. 네임스페이스 스코프는 식별자에 범위를 제공하는 영역이다. 변수 이름은 이 영역 내에서만 유일하면 된다. 스코프가 있기에 동일한 변수 이름을 다양한 곳에서 사용할 수 있게된다. 스코프 내에서 식별자는 유일해야 ..

「딥다이브 자바스크립트」 정리 - 함수 ※ 아래 내용은 책을 통해 학습한 것을 개인적으로 정리한 것으로 내용이 다소 부정확 할 수 있습니다. 함수란 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 함수 내부로 입력을 전달 받는 변수를 매개변수, 호출 시 입력하는 부분은 인수, 출력을 반환값이라 부른다. 함수는 함수 정의를 통해 생성하고 호출을 통해 실행한다. 함수는 객체 타입의 값이므로 식별자 이름을 붙일 수 있는데 함수 이름은 자신을 잘 설명할 수 있도록 해야한다. 함수 리터럴 함수는 객체 타입의 값이므로 함수도 함수 리터럴로 생성할 수 있다. var test = function add(x){ return x + 1 } 함수 이름(add)은 식별자이므로 식..

「딥다이브 자바스크립트」 정리 - 객체 리터럴 & 원시 값과 객체의 비교 ※ 아래 내용은 책을 통해 학습한 것을 개인적으로 정리한 것으로 내용이 다소 부정확 할 수 있습니다. 1. 객체 리터럴 객체란 1. 객체 특징 원시 값을 제외한 나머지를 모두 객체 객체는 원시타입과 달리 변경 가능한 값 객체는 0개 이상의 속성(프로퍼티)로 구성된 집합 객체의 속성은 키와 값으로 구성 객체는 속성(객체의 상태를 나타내는 값)과 메서드(속성을 참조하고 조작할 수 있는 동작)로 구성된 집합체 2. 객체 생성 방법 클래스 기반 객체지향 언어(ex:자바)는 객체를 생성하려면 클래스를 정의하고 new 연산자와 함께 생성자를 호출하여 인스턴스를 생성한다. 하지만 js는 프로토타입 기반 객체지향 언어로, 위와 달리 다양한 객체 ..

script 태그를 삽입했는데 아니 글세 요새 바닐라 js만으로 기능을 개발해보는 작업을 하고 있다. 별 어려움없이 DOM객체를 활용하여 이벤트도 넣고 기능도 넣고... 그렇게 js 파일을 작성한 후 HTML 파일의 head에 삽입한 후 실행했다. 그러나 js 코드가 일부 작동조차 하지 않는 것을 발견하고 왜 함수가 실행이 안되지 갸웃갸웃하다 검색을 해보니 script 태그의 위치를 올바르게 삽입하지 않았다는 것을 깨달았다. 덕분에 이런 기초적인 것도 몰랐던 것에 반성하고 기록해둔다. 왜 작동이 안되었을까? 브라우저가 렌더링 되는 순서는 아래와 같다. 이는 간단하게 적은 것이니 꼭 따로 살펴보도록 하자. HTML 파일을 파싱 DOM 트리 생성 렌더 트리 생성 화면에 표출 브라우저가 HTML 파일을 해석하..

「딥다이브 자바스크립트」 정리 - 데이터 타입 & 연산자 & 제어문& 단축평가 ※ 아래 내용은 책을 통해 학습한 것을 개인적으로 정리한 것으로 내용이 다소 부정확 할 수 있습니다. 1. 데이터 타입 js의 데이터 타입엔 원시(숫자, 문자열, 불리언, undefined, null, 심벌), 객체가 있다. 타입 종류 1. 숫자 C나 자바의 경우 정수와 실수를 구분해서 다양한 숫자 타입(int,long,float…)을 제공하지만 js는 실수로 처리하여 하나의 숫자 타입만 제공한다. 따라서 정수로 표시되는 수끼리 나누더라도 실수가 나올 수도 있는 것이다. 숫자 타입은 실수 외에 Infinity, -Infinity, NaN도 존재한다. 2. 문자열 문자열 표기법으로 “”,’’,``으로 텍스트를 감싸는데 가장 일반..

「딥다이브 자바스크립트」 정리 - 변수 & 표현식과 문 ※ 아래 내용은 책을 통해 학습한 것을 개인적으로 정리한 것으로 내용이 다소 부정확 할 수 있습니다. 1. 변수 컴퓨터는 CPU를 사용해 연산하고 메모리를 사용해 데이터를 기억한다. 메모리란? 메모리는 데이터를 저장하는 메모리 셀의 집합체이다. 메모리 셀 하나의 크기는 1바이트로, 컴퓨터는 메모리 셀 하나의 크기 단위로 저장하거나 읽는다. 예를 들어, 1 + 2를 계산한다면 메모리 셀 하나에 1이 저장되고, 또 다른 메모리 셀에는 2가 저장된다. 그리고 CPU는 1과 2를 꺼내어 연산하고 그 결과값인 3을 또다른 메모리 셀에 저장하는 식이다. 각 셀은 고유의 메모리 주소를 가지는데 이는 메모리의 위치를 나타내는데 쓰인다. 이 주소는 0부터 시작해서 ..

「딥다이브 자바스크립트」 정리 - JS에 대하여 ※ 아래 내용은 책을 통해 학습한 것을 개인적으로 정리한 것으로 내용이 다소 부정확 할 수 있습니다. 컴파일러 & 인터프리터란 사람이 프로그래밍 언어로 컴퓨터에게 전달할 때, 그 사이에서 언어를 번역해주는 역할을 맡은 것이 컴파일러 혹은 인터프리터이다. 컴파일러는 프로그램 전체를 스캔하여 이를 한번에 기계어로 바꿔준 후 실행하고, 인터프리터는 프로그래밍 언어를 한 줄 씩 읽고 바로 실행하는 것이다. 그러고보니 vscode에서는 alert가 안먹히네? JS 엔진은 load된 스크립트를 해석하고 실행하는 역할로, 모든 브라우저는 js 엔진을 내장하고 있다. 또한 node.js도 js 엔진으로 빌드되었다. 그러므로 브라우저에서 동작하는 코드는 node에서도 동작..