JavaScript (11) 썸네일형 리스트형 ES6+ 함수와 자바스크립트 OOP의 원리 코드스피츠 강의를 듣고 복습하기 위해 포스팅을 정리해보았다. 사실 자바스크립트 엔진과 OOP는 다소 궁합이 안 맞는다. 그래서 개발자가 더욱 신경을 써야 하는 영역이다. 객체 지향적인 설계는 프로젝트 확장성에 큰 기여를 하기 때문에 초반 설계에 많은 시간을 들여야 하는 고된 작업이다. 코드 스피츠 수업은 두번째 수강인데 기초적인 개념을 넘어서 실무에 적용할 수 있을만한 견문을 넓힐 수 있는 좋은 강의였다. 1회차 sub routine flow는 상대주의적 관점을 가진다 메인 플로우, 서브루틴 중 누구를 기준으로 보냐에 따라 달라진다 메인 플로우는 서브루틴이 시작하고 돌아와야 할 point 위치를 가진다 서브루틴이 중첩될수록 중첩된 서브루틴들의 point를 메모리에 모두 keep 한다 = call stac.. 컴파일러는 두 번 공격한다 #호이스팅 4. 호이스팅 4.1 컴파일러는 두 번 공격한다 한 스코프 안에서 선언된 변수는 바로 그 스코프에 속한다. 자바스크립트 프로그램은 1장의 컴파일러 이론에 따라 실행된다. 자바스크립트 엔진이 코드를 인터프리팅 하기 전에 컴파일한다. 컴파일레이션 단계 중에는 모든 선언문을 찾아 적절한 스코프에 연결해주는 과정이 있었다. 이게 바로 2장 렉시컬 스코프의 핵심이다. 변수와 함수 선언문은 모두 코드가 실제 실행되기 전에 먼저 처리된다고 보면 된다. “var a = 2;”는 하나의 구문이라 생각할 수 있지만 자바스크립트는 두 개의 구문으로 본다. var a; // 선언문 (컴파일레이션 단계) a = 2; // 대입문 (실행 단계) 이 과정에서 변수와 함수 선언문은 선언된 위치에서 코드의 꼭대기로 끌어올려진다. 이렇.. 변수를 찾기 위해 정의된 규칙 #스코프 1. 스코프란 무엇인가 프로그래밍 언어는 변수에 값을 저장하고 → 저장된 값을 가져다 쓰고 → 수정하는 패러다임을 가진다. 이 기능은 프로그램에서 상태(state)를 나타낼 수 있게 해준다. 그렇다면 ✔️ 변수는 어디에 저장되는가? ✔️ 필요할 때 프로그램은 어떻게 변수를 찾는가? 특정 장소에 변수를 저장하고 그 변수를 찾는 데는 잘 정의된 규칙이 필요한데 이를 스코프라고 부른다. 그렇다면 스코프 규칙은 어디서 어떻게 정의되는걸까? 스코프 규칙에 대한 컴파일러 이론을 확인해 보자. 1.1. 컴파일러 이론 보통 자바스크립트는 ‘동적' 또는 ‘인터프리터'언어로 분류하나 사실은 ‘컴파일러 언어'다. 어떤 자바스크립트 조각이라도 실행되려면 먼저(보통 바로 직전에) ‘컴파일’되어야한다. 자바스크립트 컴파일러는 프.. 값 할당 !== 선언 #타입 0. 개요 YOU DON'T KNOW JS의 주요 내용을 정리한다. 프로젝트 진행 중 막히는 개념이 있으면 챕터 별로 찾아서 읽는 것을 목적으로 한다. 예시 코드들은 ES6 기반으로 테스트하며 학습하며 정리 내용은 블로그에 에러노트와 함께 포스팅하며 복기한다. 220215_localStorage, 상태관리 목적으로 this 접근이 어려워서 this / 타입 / 스코프 부분을 공부했다. PART 1. 타입과 문법 1. 타입 1.2. 내장 타입 자바스크립트의 7가지 내장 타입 null → 얘네도 타입이다! undefined → 얘네도 타입이다! boolean number object → 유일한 참조타입. 나머지는 원시(primitives) 타입 symbol (ES6 new!) typeof 연산자로 확인한 값.. JavaScript에서의 OOP (Object Oriented Programming) 객체(Object) 란? 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 고유 속성을 가지고 다른 것과 식별 가능한 것 따라서 소프트웨어에서 객체를 만든다는 것은 물리적 존재나, 추상적 생각의 구현물들을 속성과 메소드로 정의하는 과정이라고 볼 수 있다. 객체의 구성 객체 = 속성 + 메소드 자바스크립트에서의 Object JS의 객체 자료형 원시 자료형 (null, undefined, "string", 10, true, false ...) --> 객체처럼 다루지 않으면 객체의 특성을 가지지 않음 객체 자바스크립트는 데이터 저장을 위해 원시 자료형과 객체 이 2가지 종류의 자료형을 사용한다. 숫자나 문자열 같은 단일한 데이터를 저장하는 원시 자료형은 자바스크립트 안에서 사용하는 기본적인 데이터 저.. ES6_템플릿 리터럴 (Template Literals) Front-End 프론트엔드에서는 HTML 을 데이터와 결합해 DOM을 다시 그리는 일이 빈번한데, 템플릿을 쉽게 편집하고 작성하기 위해 추가된 기능이다. (JavaScript 자체적으로 지원하기 전에도 라이브러리로 존재해왔다.) 템플릿 리터럴? ES2015 사양명세서에선 template strings 라고 불렸으며 내장된 표현식을 허용하는 문자열 리터럴을 뜻한다. - 표현식/문자열 삽입 - 여러 줄 문자열 - 문자열 형식화 - 문자열 태깅 Syntax 템플릿 리터럴은 작은따옴표(')나 큰따옴표(")대신 백틱(`) (grave accent)로 감싸준다. 플레이스 홀더 (${}) 를 사용하며 내부값은 함수로 전달된다. 여러 줄의 멀티 라인을 허용한다. 표현식 삽입법 (Expression interpolat.. JSDoc을 통해 JavaScript API 문서 만들기 최근 사내 신규 개발 작업이 끝난 뒤 배포를 앞두고 산출물을 검토하는 중, 400여 개의 Interface 함수를 설명하는 API 매뉴얼 페이지를 작성하는 업무가 주어졌다. 각 Interface를 엑셀로 정리하기 위해 테이블을 추가하고, 수 천 라인의 소스 코드를 들여다보며 열심히 API 정보를 하나하나 입력해야지..!라고 떠올렸다면 허튼짓을 시작하기 전 문서화 도구를 사용하는 것을 강력하게 추천한다. (필자는 이미 뻘짓을 신나게 끝낸 뒤 깨달았다..😱) 문서화 도구(Documentation Generator)란, 소스 파일에 작성된 주석을 파싱하여 클래스, 메서드 등 API 정보를 HTML 문서로 생성해주는 도구를 지칭한다. 개발 중인 코드에 주석이 잘 작성되어 있다면, 문서화 도구가 제공하는 명령어 .. 클로져 (Closure) 클로져는 함수와 함수에 의해 생성되는 scope 객체를 함께 지칭하는 용어입니다. - MDN 'JavaScript 재입문하기 (JS 튜토리얼) 클로져는 JavaScript를 공부한다면 한 번쯤 골머리를 썩게 하는 알 듯 말듯한(?) 개념이다. scope와 closure 개념을 이론적으로 이해가 되었더라도 막상 코드를 작성하다 보면 이해가 가지 않는 상황이 와 버린다.. (모든 개발 언어가 그렇겠지만 항상 새롭다..^^) 최근 여러 강의들을 들으면서 접한 클로저에 대한 내용을 복기하고자 포스팅을 적어본다. function makeAdder(a) { return function(b) { return a + b; }; } var add5 = makeAdder(5); var add20 = makeAdder(20.. 이전 1 2 다음
