코드 유인원

JavaScript/기초 검색 결과

해당 글 10건

garbage collector

우리가 만든 함수나 객체 중에 더이상 사용되지않는 것들이 있을 때 가비지 컬렉터가 그것들을 삭제해서 메모리를 관리해준다 그럼 메모리 관리의 기준은 어떻게 될까? 바로 도달 가능성이라는 개념을 이용하는데 이 개념을 갖고 있지 않은 값들은 삭제되고 아래와 같이 도달 가능성을 가지고 있는 값들은 삭제되지 않는다 현재 함수의 지역 변수와 매개변수 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 전역 변수 이런 값들은 루트라고 부르고 이 루트들이 체이닝으로 참조하는 값들도 도달 가능성을 가지고 있기 때문에 삭제되지않는다 이 가비지 컬렉터는 다양한 알고리즘을 가지고 있지만 기본적으로 끊임없이 작동하고 있는다 예시를 보자 let user = { name: "John" }; 그림처럼 user가 객체를 참조하..

JavaScript/기초 2020. 10. 23. 15:19

Array.sort

자바스크립트에서 배열을 정렬할 때는 배열 내장 메소드인 sort를 이용하면 쉽다 const arr = [123, 142, 145, 100, 190, 200]; console.log(arr.sort()); 정렬이 된 모습 하지만 맨뒤에 35를 추가해 보자 const arr = [123, 142, 145, 100, 190, 200, 35]; console.log(arr.sort()); 35가 뒤로간 걸 볼 수 있는데 이는 sort메소드가 정렬을 할 때 숫자로 하는 것이 아닌 묵시적으로 문자열로 변환, 그 후에 유니코드 포인트 코드로 정렬을 하기 때문이다 이렇기 때문에 제대로 정렬된 결과를 보기 위해서는 sort메소드의 인자로 compareFunction이라고 불리는 콜백 함수를 정의해주어야하는데 이때 com..

JavaScript/기초 2020. 10. 22. 18:33

prototype

프로토타입 자바스크립트의 모든 객체는 자신의 프로토타입(부모)을 가르키는 [[Prototype]] 이라는 숨겨진 프로퍼티를 가지고 있다 var a = { b:1, c:"123", d:{ e: 'e' } }; console.log(a.toString()); 이 결과는 살짝 의문점을 갖게 만든다 우리는 객체 a에 toString()이라는 메소드를 생성해 준적이 없는데 아무런 에러 없이 정상적인 출력이 되고 있다 어째서 일까? console.dir(a); 로 객체 a를 크롬에서 출력해보면 다음과 같은 값을 얻을 수 있다 순서대로 b,c,d의 값이 출력되는 것을 볼 수 있지만 맨 마지막의 __proto__는 뭘까? 바로 이 프로퍼티가 맨 위에서 얘기한 숨겨진 프로퍼티인 [[Prototype]]이며 다른 객체를 ..

JavaScript/기초 2020. 10. 3. 22:02

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