전체 글

클로저의 활용전역 변수로 카운터 만들기의 문제전역 변수는 누구나 접근할 수 있음으로 이건 당연히 문제가 발생할 확률이 높다let num = 0const increase = function () { return ++num;}console.log(increase()) // 1console.log(increase()) // 2console.log(increase()) // 3그렇다고 함수 내부에 값을 선언해놓으면 그 값이 유지되지 않는다.const increase = function () { let num = 0 return ++num;}console.log(increase()) // 1console.log(increase()) // 1console.log(increase()) // 1여기까진 뽀삐도 설명할 ..

개요실행 컨텍스트는 자바 스크립트가 평가되고 실행되는 모든 원리를 결정한다 소스코드의 타입이건 또 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르단다 레 전 드전역코드전역 스코프임 그냥. 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다함수코드이건 지역 스코프임. 지역변수, 매개변수, arguments 객체를 관리해야 한다.특이한건 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결함eval코드strict mode에서 자신만의 독자적인 스코프를 생성한다. 이를 위해 eval 코드가 평가되면 eval 실행 컨텍스트가 생성된다 (코드 이발소 ㅋㅋ)모듈코드독립적인 모듈 스코프를 생성한다 (MZ 스코프 ㅋㅋ)소스코드의 평가와 실행짜쓰는 소스 코드의 평가와 실행, 2과정..

this나는 나다this 키워드일단 읽기도 너무 이상함그냥 이상함const circle = { radius = 5; getDiameter() { return 2 * circle.radius; }}getdiameter가 호출되는 시점엔 이미 circle 변수에 객체 리터럴이 할당된 상태임그래서 getDiameter는 해당 객체의 radius 값을 참조하게 된다.하지만 자기 자신을 재귀적으로 참조하는건 딱봐도 이상함function Circle(radius) { // 이 시점에는 this가 뭔지 알 수 없음. 생성자 함수가 실행되지 않았기 때문이지 ????.radius = radius;}Circle.prototype.getDiameter = function () { // 이 시점에는 생성자 함수 자신이 생성..

개요함수는 객체다근데 객체는 함수 아님17.1 Object 생성자 함수new Object() 로 빈 객체를 생성하고 프로퍼티를 동적으로 추가하는 방식. 빌트인 생성자 함수(String, Number, Boolean, Function, Array, Date, RegExp, Promise 등)도 생성이 가능하다.자바에서는 너무나도 친숙한 이 방법이 객체 리터럴이라는 방식에 먹혀 사용되지 않는다고 한다... 이럴수가17.2 생성자 함수17.2.1 객체 리터럴에 의한 객체 생성 방식의 문제점이놈도 문제가 있긴 있음그것은 바로 반복해서 객체를 생성해야할때 매번 추가해줘야하는것const person1 = { name: "Kim", age: 20, introduce() { console.log(`안녕하세요..

개요나는 var가 싫다var를 패고싶다왜 내가 var를 패고싶은지 지금부터 하나씩 알아보겠다var 키워드로 선언한 변수의 문제점변수 중복 선언 허용이건 그럴수도 있다.Python도 그렇고 허용되는 언어가 좀 있으니깐var x = 1;var y = 2;var x = 100;var y; // 초기화문이 없는 변수 선언문은 무시된다console.log(x); // 100console.log(y); // 2초기화문이 없는 변수 선언문은 무시되는게 좀 골때리기는 하지만 그래도 뭐 이정도는 인정한다아무든 var는 재할당이 가능하기 때문에 의도치않은 동작이 발생할 수 있어 조심해야한다.왜 중복 선언이 허용되고 초기화문은 무시될까var는 ES6 이전 자바스크립트의 오래된 변수 선언 방식이다.초기 자바스크립트는 지금처럼..

전역 변수의 문제점개요전역변수는 위험하다왜 그런지 알아보자변수의 생명 주기지역 변수의 생명 주기함수 호출 시 생성되고 함수가 종료되면 소멸함함수의 생명주기와 동일하다function foo() { var x = 'local'; console.log(x); return x;}foo();console.log(x) // 레퍼런스 에러골때리는게 호이스팅인데 얘는 함수가 실행되는 시점에 지역 스코프에 소속된 변수들을 호이스팅 한다고 함추가로 지역변수가 함수보다 오래 생존하는 경우도 있다고 한다함수 외부에서 함수 내부에 선언된 지역변수를 참조하고 있다면 아직 GC가 정리할 수 없어서 값이 남아있게 된다.이는 스코프도 마찬가지고이를 클로저라고 하는데 24장에서 자세하게 풀어준단다전역 변수의 생명 주기var 전역 변수는..

스코프개요스코프는 변수라는 양을 가둬놓는 울타리와 같다오늘 회사 앞에 양이 왔다 (진짜임) 스코프란?스코프란 유효범위로 특정 변수를 참조할 수 있는 범위 라고 생각하면 된다function add(x, y) { console.log(x, y) // 2 5 return x + y}add (2, 5)console.log(x, y); // 레퍼런스 에러변수는 자신이 선언된 위치에 의해 자신이 유효한 범위를 뜻함그래서 이렇게 동작함var x = 'global';function foo() { var x = 'local'; console.log(x); // local}foo()console.log(x); //global이렇게 코드가 어떤 변수를 참조해야 할 것인지를 결정해야하는데 이를 식별자 결정 이라 한..

함수란?함수다매개변수를 전달받아 주어진 로직대로 수행한 뒤 반환하는것을 함수라 함// 함수 정의function add(x, y) { return x + y;}// 함수 호출add(2, 5); // 7함수를 사용하는 이유코드의 재사용: 같은 로직을 필요할 때마다 호출 → 중복 제거유지보수의 편의성: 고칠 데가 한 군데신뢰성: 중복이 줄면 버그 날 구석도 줄어듦가독성: 잘 지은 함수 이름은 그 자체로 코드를 읽기 쉽게 만든다 (코드는 곧 문서)// 매번 직접 계산하면 중복 + 실수 가능성var a = (1 + 2) / 2;var b = (10 + 20) / 2;// 함수로 추상화하면 이름만 봐도 의도가 보임function average(x, y) { return (x + y) / 2;}average(1, 2..

개요원시타입, 객체타입이란 뭐냐!원시타입은 원시값이고 객체타입은 객체임 (진짜임)이번 챕터 진행하면서 지능 -10 됐음원시 값변경 불가능한 값원시값의 가장 큰 특징중 하나로는 변경이 불가능하다 라는 특징이 있다.한번 생성된 값은 읽기 전용으로써 변경이 불가능하다는 뜻var test = 10; // 여기서 '10' 은 죽을때까지 10임근데 그럼 변수에 값을 재할당 하는건 뭐냐! 라고 했을때그건 값을 버려버리고 새집을 얻는다는 것var test = 10; // 여기서 '10' 은 죽을때까지 10임test = 20; // 니 값은 이제부터 20이여이때 중요한 건, 값이 바뀌는 게 아니라 변수가 가리키는 대상이 바뀐다는 것이다.재할당이 일어나면 기존 값(10)을 수정하는 것이 아니라 새로운 원시값(20)이 생..

모던 자바스크립트 Deep Dive 10장개요자바스크립트의 모든것은 원시값을 제외하고 객체로 이뤄져있다객체는 변경 가능한 값이다핵심 개념객체는 프로퍼티(상태)와 메서드(동작)의 집합객체 리터럴 {}로 가장 간단하게 생성 가능프로퍼티 키는 문자열 또는 심벌, 값은 아무거나 OK객체란?원시값 또는 다른 객체를 하나로 구성한 복합적인 자료구조임프로퍼티는 객체의 상태를 나타내는 값, 메서드는 프로퍼티를 참조하고 조작할 수 있는 동작참고로 객체 == 함수 수준으로 연관성이 짙다고 함객체 리터럴에 의한 객체 생성{자바스크립트의 객체 생성 방식들 중 가장 일반적인 방법}보통의 언어들은 new 연산자와 함께 생성자를 호출하여 인스턴스를 생성한다// 이궈궈던 ㅋㅋResponseDTO dto = new ResponseDT..