heyday2024 님의 블로그

1. ClassJavascript에서 왜 class라는 문법(ES6)이 생겼을까?다른 여러 프로그래밍 언어(c#, c++, java...)는 대개 클래스 기반 프로그래밍 개발기법을 사용함(상속, 생성자 등...) 이런 언어들을 사용했던 개발자들이 자바스크립트로 넘어와서 자꾸 클래스 처럼 개발하려고 하다보니까 JS에서도 그 니즈를 반영한 것. 클래스 (Class)클래스는 설계도에 해당하며, 여러 객체를 만들 수 있는 틀.이 설계도에는 객체가 가져야 할 특성(속성)과 행동(메서드)이 정의되어 있음.예를 들어 책상을 만드는 설계도를 보면 어떤 종류의 책상을 만들수 있는지 그리고 그 특징이 무엇인지 알 수 있음. 이런 책상을 만드는 설계도가 클래스임.인스턴스 (Instance)인스턴스는 클래스를 기반으로 만들어..

13장: Scope  모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정되는데, 그 유효범위를 '스코프'라고 함. 스코프는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 볼 수 있음. (식별자 종류: 변수 이름, 함수 이름, 클래스 이름 등....) identifier resolution(식별자 결정): 자바스크립트 엔진이 어떤 변수를 참조해야할 것인지 결정하는 것.var x ="here";function foo(){ var x = "no here!"; console.log(x); } foo(); console.log(x);여기서 foo를 호출한 부분은 no here!이 출력될 거고, console.log(x)는 here를 출력할 것이다..

DOM (Document Object Model)JS가 생긴 이유: 브라우저에서 동작하게하기 위한 언어로, HTML를 해석해서 웹  페이지를 동적으로 만들기 위해(Netscape에서 당시 인기많던 자바의 이름을 따서 만들었음) 1. 사용자(클라이언트, 브라우저)가 서버에게 요청(request) 함(ex) 크롬을 통해 클라이언트의 역할함 2. 서버로부터 오는 응답 형태가 HTML 문서(document)임.  3. 브라우저가 HTML 파일을 해석함(parsing 파싱)=====> 브라우저에는 기본적으로 렌더링 엔진이 있음. 서버가 클라이언트에게 준 HTML문서를 렌더링(html를 해석/번역해서 화면에 그려주는 것)함.렌더링 엔진이 HTML문서에 코드를 한줄, 한줄 보면서 해석함. 서버로부터 받아 온 그 문서..

객체지향 프로그래밍 --> 함수형 프로그래밍다형성: 하나의 공통된 특성을 기반으로 여러 가지 다른 형태로 확장될 수 있는 성질. 예를 들어, 부모 클래스의 메소드를 자식 클래스에서 재정의하는 방식으로 다양한 형태의 객체가 동일한 메소드를 가질 수 있다.렉시컬 스코프: 함수가 선언된 시점에서 상위 스코프를 결정하는 방식. 실행되는 위치가 아닌, 함수가 선언된 위치에 따라 상위 스코프가 결정된다.this 바인딩: 함수 마다 this 라는 특별한 객체가 있고, 함수 호출이 되었을 때 this 값이 결정되는데, this 값이 결정되는 것을 this 바인딩이라고 한다.프로토타입 (prototype): 객체들이 공통으로 사용할 수 있는 속성이나 메서드를 정의한 공간This란 무엇인가?this 란 어떤 특정 객체를 ..

1. 콜백지옥콜백함수를 익명함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 헬인 경우!( 주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생 ) ----> 가독성이 정말 지옥(hell)임. 2. 동기 vs 비동기  위에 카페는 진동벨 없이 주문요청이 들어오면 작업을 끝낼 때 까지 손님들이 기다림(시간 오래걸림)그리고, 뒤에 손님들은 무조건 자신의 바로 앞의 주문이 완료되어야만 주문 요청을 할 수 있음.-----> 동기 아래에 카페는 손님들에게 주문 요청을 다 받고, 진동벨을 나눠준 후 작업이 끝나는 대로 그 진동벨을 울려서 작업을 완료함. (시간적으로 효율적임) ----> 비동기 동기 : synchronous현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식을 말해요!CPU..

10장: 객체 리터럴자바스크립트는 객체 기반의 프로그래밍 언어객체: 원시값을 제외한 나머지(함수, 배열, 정규 표현식 등) 값은 모두 객체. 원시타입 vs 객체 타입 원시타입은 단 하나의 값만 나타내지만,  객체 타입(object/reference type)은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조(data structure)임 원시타입의 값은 변경 불가능한 값(immutable value)이지만,객체타입의 값, 즉 객체는 변경 가능한 값(mutable value)임  객체는 0개 이상의 property(속성)로 구성된 집합,property는 key 와 value로 구성됨property의 key는 일반적으로 문자열 사용(symbol도 사용가능 그러나 많이 안쓰임)식별자 네이밍 규칙(카..

콜백함수// setTimeoutsetTimeout(function() { console.log("Hello, world!");}, 1000);// forEachconst numbers = [1, 2, 3, 4, 5];numbers.forEach(function(number) { console.log(number);});setTimeout, forEach를 보면 둘다 function을 인자로 받는다. 이 인자로 넘겨진 함수들을 콜백함수라고 함. 다른 코드의 인자로 넘겨주는 함수! 인자로 넘겨준다는 얘기는 콜백함수를 넘겨받는 코드가 있다는 뜻 (like forEach, setTimeout 등).콜백 함수를 넘겨받은 위와 같은 코드 forEach, setTimeout 등은 이 콜백 함수를 필요에 따라 적절..

6장: 데이터 타입저번 시간에 끝까지 읽지 못해서 간략하게 정리. 원시타입: number, string, boolean, undefined, null, symbol객체 타입: object, function, array  \'작은따옴표 (')\"큰따옴표 (")\\백슬래시 ()\n줄 바꿈 (Newline)\r캐리지 리턴 (Carriage Return): 커서를 처음으로 이동.\t수평 탭 (Tab)\b백스페이스 (Backspace)\f폼 피드 (Form Feed)\v수직 탭 (Vertical Tab)\0널 문자 (Null Character)\uXXXX유니코드 문자, XXXX는 4자리 16진수, 예시로 '\u0041'은 'A'\xXX16진수 ASCII 문자, XX는 2자리 16진수 새로운 문자열 표기법: 백틱(..

가장 아래의 코드가 실행 되었을 때, “Passed ~” 가 출력되도록 getAge 함수를 채워주세요 var user = { name: "john", age: 20,};var getAged = function (user, passedTime) { // 여기를 작성해 주세요! // 깊은 복사 방식을 선택할까했지만, user라는 객체는 depth 가 1인 for loop로도 충분히 복사가 되고, // 상황에 맞는 얕은 복사 이용이 깊은복사보다 성능이 좋기 떄문에 나는 얕은 복사를 해볼 것이다. let newUser = { ...user }; newUser.age += passedTime; return newUser; // let newUser = {}; // for (let property..

- 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.- 그 객체 안에는 3가지가 존재한다.✓ VariableEnvironment ✓ LexicalEnvironment ✓ ThisBindings객체 지향 언어에서의 this = 클래스로 생성한 인스턴스자바스크립트에서는 this가 어디에서나 사용될 수 있음!!! this는 실행 컨텍스트가 생성될 때 결정됨(this를 bind한다(=묶는다)) 다시 말하면. this는 함수를 호출할 때 결정된다.   상황에 따라 달라지는 this: 1. 전역 공간에서의 this전역 공간에서 this는 전역 객체를 가리켜요.런타임 환경에 따라 this는 window(브라우저 환경) 또는 global(node.js 환경)를 각각 가리킵니다. 런타임 환경? ja..