코드 유인원

JavaScript 검색 결과

해당 글 77건

closure

closure 내가 배우고 이해한 걸로 스코프를 설명하고 싶지만 도저히 요약이 되지 않아서 '인사이드 자바스크립트'에서는 풀어서 쓴 정의를 인용하겠다 '클로저란 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수'라고 얘기하고있다 생명 주기가 끝난 외부 함수의 변수를 참조하려면 어떻게 해야할까? 사실 말 속에 이미 답이 있다 외부 함수의 스코프를 참조 할 수 있는 내부 함수의 리턴 값을 받아 사용하면 된다 function a(){ var out = 100; return function b(){ console.log(out); } } var test = a(); test(); function b()를 리턴 받은 test()는 console.log(out)을 실행하게 된다 하지만 b의 스코프안에는 ou..

JavaScript/기초 2020. 10. 3. 00:43

호출 스택, 이벤트 루프

원래는 클로저를 공부하면서 그에 관한 포스팅을 하려고 했는데 클로저의 예시 코드를 보다가 이해되지 않는 부분이 있어서 공부의 내용이 산으로 갔다 바로 setTimeOut과 같은 비동기 함수들의 동작 원리를 이해하지 않고서는 도저히 그 예시를 이해할 수 없을 것 같아 이 포스팅을 먼저 하려고한다 호출 스택 자바스크립트는 하나의 콜스택을 가진 싱글 스레드 언어이다 콜스택이 실행 컨텍스트와 비슷한 느낌이지만 무엇이고 어떤 일을 하는지 코드를 통해 살펴보자 function t1() { t2(); console.log('t1'); } function t2() { console.log('t2'); } t1(); 실행 과정과 결과는 쉽게 예측할 수 있다 아래는 코드 실행 과정에 따른 스택의 변화인데 t3()까지는 똑..

JavaScript/기초 2020. 10. 2. 19:52

생성자 함수

생성자 함수 자바스크립트에서 생성자 함수는 말그대로 객체를 생성하는 역할을 한다 이러한 생성자 함수는 형식이 다르게 정해져있진 않고 기존 함수에 new 명령어를 붙여서 호출하면 그 함수가 생성자 함수로 동작하게 된다 이렇게 생성자 함수와 일반 함수가 다르게 정해져 있지 않기 때문에 대부분의 개발자들이 생성자 함수의 이름 첫 글자를 대문자로 쓴다 var Student = function(name, grade){ this.name = name; this.grade = grade; } var st1 = new Student('아무개', '4학년'); Student생성자 함수로 st1객체를 만든 코드이다 궁금한 점이 생긴다 "이 this들은 뭘까?" 생성자 함수에서의 this 이전 포스팅을 기억한다면 저 함수 ..

JavaScript/기초 2020. 10. 1. 02:43

this binding

this 자바스크립트에서는 함수를 호출할 때 기존 매개변수로 인자값과 (암묵적으로)this인자가 함수의 내부로 전달된다. 이 this인자는 기본적으로 자기 자신의 객체를 가르키는데 상황에 따라 조금씩 다르다 크게 5가지 상황으로 나누어 질 수 있으며 지금부터 알아보자 1. 전역 공간 전역 공간이라는 것은 어떤 객체에 속하지 않은 상태를 얘기하는 것 console.log(this); 이 코드는 전역 공간에 속해있기 때문에 this가 전역 객체인 window를 가르킨다 ?? 맞다 객체에 속해있지 않다고 설명했었지만 사실 어디에도 속하지 않았다는 것은 전역 객체에 속해있다는 것을 의미한다 우리가 '자바스크립트 맨땅에 함수를 선언하고 변수를 선언하는 것은 곧 전역 객체 즉, window객체에 프로퍼티를 추가하는..

JavaScript/기초 2020. 9. 30. 03:44

실행 컨텍스트와 스코프

var scope = 'out'; var outScope = function () { console.log(scope); var inScope = function () { console.log(scope); var scope = 'in'; } inScope(); console.log(scope); } outScope(); console.log(scope); 이 코드의 실행 결과는 어떨까? 이를 이해하려면 컨텍스트와 스코프에 대해서 알아야한다 실행 컨텍스트 코드가 실행되는데 필요한 여러가지 정보(호이스팅등)를 담고 있는 것을 실행 컨텍스트라고 한다 실행 컨텍스트는 '실행 가능한 자바스크립트 코드 블록이 실행되는 환경'이다 여기서 말하는 코드 블록은 대부분이 함수이고 그 코드 블록 안에는 변수, 객체, 또 ..

JavaScript/기초 2020. 9. 28. 22:39

호이스팅

뜬금없이 코드로 시작해 보자 console.log(tHoist); 결과값은? tHoist라는 변수를 초기화하지도, 선언하지도 않았기 때문에 에러가 난다 console.log(tHoist); var tHoist; 의 결과값은 어떨까? 자바를 먼저 공부한 사람이라면 'tHoist라는 변수가 먼저 정의되지 않았기 때문에 제일 첫 코드와 같이 에러가 난다'라고 말 할 것이다 하지만 자바스크립트에서는 에러가 나지않고 선언은 했지만 초기화하지않은 tHoist의 값인 undefined라는 값이 콘솔창에 출력된다 어째서 일까? 바로 자바스크립트의 호이스팅(hoisting) 때문인데 자바스크립트 실행시에 변수와 함수의 선언 부분만 코드의 최상단에 끌어올려(hoist) 위치시키기 때문에 에러가 나지 않고 실행이 되는 것 ..

JavaScript/기초 2020. 9. 28. 02:59

자바스크립터의 데이터 타입

데이터 타입 자바스크립터의 데이터 타입은 총 8가지이다. Boolean : true 혹은 false 자료형 null : 어떤 값이 의도적으로 비어있음을 표현하는 자료형, 객체 var tNull = null; // console.log(typeof a); // object undefined : 값을 명시적으로 않으면 undefined 자료형. var tUndefined; // console.log(typeof a); // undefined Number : 정수 또는 소수점 자료형. BigInt : Number보다 큰 정수를 표현할 수 있는 자료형. var tBigInt1 = 9007199254740991n; var tBigInt2 = BigInt(9007199254740991); var tBigInt3 =..

JavaScript/기초 2020. 9. 27. 02:03