Javascript (10) 썸네일형 리스트형 자바스크립트 동작원리 동작원리를 알아보기 전, 동작에 필요한 엔진을 살펴보자. 여러가지 자바스크립트 엔진 중에서 가장 많이 사용하는 V8엔진에 대해 알아보자. 구글의 V8엔진은 다음과 같이 구성되어있습니다. 메모리 힙(Momory Heap) 과 콜 스택(Call Stack) 두 가지로 구성되어있습니다. 메모리힙에서는 메모리 할당이 발생하고, 콜스택은 코드가 실행될 때마다 스택이 하나씩 쌓이는 곳입니다. 이 V8엔진이라는 것은 결국 자바스크립트를 바이트코드로 컴파일하고 실행하는 방식입니다. 그리고 대부분이 사용하는 크롬웹브라우저는 V8엔진이 탑제된 자바스크립트 런타임입니다. 여기서 런타임이란, 프로그래밍 언어가 구동되는 환경을 말합니다. 추가적으로, V8엔진은 자바스크립트 엔진임과 동시에 웹 어셈블리 엔진이기도 합니다. 웹 어.. 자바스크립트 this 키워드 먼저 mdn문서에서 정의를 확인해보자. JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다. 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다 (이는 렉시컬 컨텍스트안의 this값을 유지합니다). 대부분 this키워드는 함수를 호출하는 방법에 의해 결정된다. 이 부분이 핵심이다. 결국 누가 호출했냐를 알려주는 키워드가 this 이다.. 객체에 키값 동적으로 할당하기 객체로 만들 부분을 빈 배열로 만들고 [ ]방식으로 프로퍼티를 설정하는 방법을 이용하면 키 값을 동적으로 설정 할 수 있습니다. var keyname = "my"; var postfix = "Age"; var value = 27; var something = {}; something[keyname + postfix] = value; //console.log : {myAge : 27} 추가로 es2019에 의하면 아주 간단하게 동적으로 키를 할당 가능합니다 const name = "who"; const person = { [name]: "nkh" }; // {who: 'nkh'} addEventListener 사용법 addEventListener()는 document의 특정요소(Id,class,tag 등등..) event(ex - click하면 함수를 실행하라, 마우스를 올리면 함수를 실행하라 등등.. )를 등록할 때 사용합니다. const Div = document.getElementbyId("Box") Div.addEventListener("click", click) //아래와 같은 구조를 가진다. addEventListener("이벤트이름", 실행할 함수) 예를 들면, 위의 코드에서는 Div에 addEventListener()를 지정하여, Div를 클릭하면 두번째 인자의 click함수가 실행되는 형태이다. 아래는 자주 사용되는 addEventListener의 이벤트 종류이다. (외울 필요 없다. 그냥 필요할 때.. 1.1 + 0.1 == 1.2 가 false인 이유 위 수식이 false인 이유를 알아보기 전에, 우리의 컴퓨터가 실수를 표현하는 원리에 대해 알아보면 좋을 것 같다. 컴퓨터는 0과 1로 이루어진 2진법으로 데이터를 저장한다. 그리고, 정수뿐만 아니라 소수가 포함된 실수또한 2진법으로 저장해야한다. 이렇게 실수를 표현하는 방식은 두 가지로 나뉜다. 고정 소수점 방식과 부동 소수점 방식 고정 소수점 방식(fixed-point) 고정 소수점 방식은 메모리를 정수부와 소수부로 고정으로 나눈다. 소수부의 자릿수를 미리 정하고 고정된 자릿수의 소수를 표현하기 때문에 직관적이다. 직관적이나, 표현가능범위가 매우 작다. 컴퓨터는 효율성과 공간낭비방지를 위해 부동 소수점 방식을 사용한다. 부동 소수점 방식(floating-point) 부동 소수점은 고정 소수점 방식과는.. JavaScript의 ES란?, ES5/ES6 문법 차이 ES란, ECMA Script를 말한다. ECMA는 유럽 컴퓨터 제조업자 협회의 줄임말이라고 한다. 뒤에 script는 직역하면 대본이라는 뜻이니까 컴퓨터언어 내에서의 규격같은 거라고 이해했다. JavaScript는 언어이고, ES는 표준, 문법등을 뜻한다. 그리고 꾸준하게 언어의 문법이 바뀌다보니, ES5, ES6 이런식으로 구분을 한다. 가장 최근에 바뀐 것은 ES6이다. 깨알지식으로는 ES6가 2016년에 시작된 것 같지만, 2015년부터 바뀐 문법이다. 그래서 ES2015라고도 한다. 그렇다면 2009년에 나온 ES5와 ES6의 차이점에는 어떠한 것들이 있을까? let, const 키워드 추가 이전에는 var 키워드만을 사용했다. var는 함수스코프를 가지고, TDZ에 해당하지 않는다. 복습할 겸.. 자바스크립트 동기와 비동기 매우 간단하게 동기와 비동기를 적어보았다. 좀 더 자세하게 작동하는 방식을 알고 싶다면, 맨 아래 링크로 들어가는 것을 추천한다. JavaScript는 동기식 언어이다 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 말한다.이러한 동작을 단일 스레드(싱글 스레드), 동기(Synchronous)라고 부른다. 마치 음식점에 여러 사람들과 갔을 때, 키오스크를 이용하여 한 사람씩 결제하는 것과 유사하다. 자바스크립트는 한 번에 하나의 작업을 수행한다. 그렇다면 비동기는 무엇일까? 하지만 비동기는 어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식을 말한다. 동기방식은 설계가 매우 간단하고 직관적이지만 결과가.. 호이스팅과 TDZ 스코프 = "변수가 영향을 미치는 범위" 호이스팅 = "스코프 내부 어디서든 변수 선언은 최상위에 미리 선언되는 것" *선언만 될 뿐, 실제로 값이 할당되는 않는다. 위의 호이스팅 방식에서 var, let, const 이 3개의 변수선언 코드는 차이점을 가진다. var let const 1단계 변수 선언 + 초기화(undefined) 선언 선언+초기화+할당 2단계 value 할당 초기화(undefined) 3단계 할당 위의 표와 같이, 단계별로 작동되는 방식이 다르다. 그렇기에 아래와 같이 코드를 사용할 때 나타나는 값이 다르게 된다. console.log(name) var name = "a" //undefined console.log(name1) let name1 = "a" //error.. 이전 1 2 다음
