JS 동작 원리 (Stack, Queue)

자바스크립트는 동기적 처리를 기본으로 하는 단일 스레드 기반 언어이다. 즉 프로그램 제어에 사용되는 자원이 1개씩 존재한다. 그럼에도 불구하고 자바스크립트가 비동기 처리를 할 수 있는 이유는 비동기 처리를 담당하는 Web API, 콜백 큐, 이벤트 루프(브라우저, Node JS(libuv 라이브러리)가 지원)가 있기 때문이다. 1. 자바스크립트 코드가 실행되는 순서 Call Stack : 실행될 코드가 한 줄 단위로 할당되어 실행되는 자료구조 Memory Heap : 메모리 할당이 일어나는 곳 Web APIs : 비동기 처리를 담당하는 곳 (ajax 요청, 이벤트 리스너, setTimeout 등), 브라우저가 자체 지원 Callback Queue : 비동기 처리가 끝난 후 실행되어야 할 콜백함수가 할당되..

• format_list_bulleted JavaScript/JS 문법 정리
• · 2022. 9. 15.
• textsms

동기/비동기, 콜백함수

1. 동기/비동기 필자가 자바스크립트의 문법에 대해 깊이있게 공부하려고 한 이유 중 하나가 바로 동기/비동기이다. Node Js를 통해 무언가를 만드는 과정에서 외부 코드를 읽으면 항상 async, await, then 등을 보았다. 이것들이 도대체 왜 쓰이는 가를 찾아보면 자바스크립트의 실행 과정에 있어서 동기와 비동기가 결합되어 있고, 일반적인 프로그래밍 언어와는 조금 다른 양상을 보인다는 것이다. 그렇다면 동기라는 건 과연 무엇일까? 비동기는 동기의 반댓말이니 동기의 뜻만 알면 될 것 같다. 파이썬이나 자바 등 우리가 평상 시 작성하는 코드는 위에서 부터 순차적으로 실행된다. 자바스크립트 또한 마찬가지로 위에서 부터 순서대로 한 줄씩 읽어가면서 코드가 실행된다. 즉, 자바스크립트는 동기식 처리이다...

• format_list_bulleted JavaScript/JS 문법 정리
• · 2022. 9. 14.
• textsms

Destructuring, import/export

1. Destructuring, 구조 분해 디스트럭쳐링이란 배열이나 오브젝트에 있는 값들을 분해하여 각각의 변수에 할당하는 것을 말한다. 원소가 3개 짜리인 배열이라면 각각의 원소를 변수로 담는 것이 어렵지 않지만 개수가 100개, 1000개가 넘을 경우 일일이 지정하는 것은 여간 복잡한 일이 아니다. var arr = [2,3,4]; // 직접 지정하기 var a = arr[0]; var b = arr[1]; var c = arr[2]; // Destructuring var [a,b,c] = [2,3,4]; // or var [a,b,c] = arr var [a,b,c=10] = [2,3]; a = 2, b = 3, c = 10 var [a,b,c=10] = []; // a,b undefined Des..

• format_list_bulleted JavaScript/JS 문법 정리
• · 2022. 9. 13.
• textsms

extends, getter/setter (객체 지향 4)

클래스를 만들면 여러 오브젝트를 생성자를 통해 만들고 관리할 수 있다. 그런데 만약에 특정 클래스에서 몇몇 속성이나 함수를 추가하여 새로운 클래스를 만들고 싶다면 어떻게 해야 할까? 이럴 때는 특정 클래스를 상속 받는 클래스를 만들면 된다. 이때 사용하는 문법이 extends이다. extends는 자바에서도 클래스 간 상속을 할 때 사용한다. 1. 클래스 상속 extends extends는 class를 상속하는 기능이다. 이를 통해 연관된 클래스를 만들 수 있다. class 할아버지 { constructor(name){ this.성 = 'Kim'; this.이름 = name; } } var 할아버지1 = new 할아버지('만덕'); class 아버지 extends 할아버지 { constructor(nam..

• format_list_bulleted JavaScript/JS 문법 정리
• · 2022. 9. 12.
• textsms

ES5, ES6 상속 (객체 지향 3)

상속을 사용하는 객체지향 문법은 Object를 여러 개 만들어야 하는 경우에 사용한다. 물론 다른 이유도 있다. 그건 여러가지 개념들을 공부하면서 알게 될 것 같다. 앞선 글에서 설명한 prototype에 직접 지정하는 방식은 구 문법이다. ES5, ES6 문법에서는 새로운 방법으로 상속을 사용한다. 1. ES5 상속 var 부모 = { name : 'Kim', age : 50 }; var 자식 = Object.create(부모); 자식.age = 20; // 자식에 key 값을 추가한다. -> 50이 아닌 20을 우선 출력한다. var 손자 = Object.create(자식); // 자식의 상속 // 손자.name = 'Kim' (부모인 '자식'의 prototype) // 손자.age = 20 (부모인..

• format_list_bulleted JavaScript/JS 문법 정리
• · 2022. 9. 7.
• textsms

상속, Prototype (객체지향 2)

생성자를 통해 인스턴스를 만든다는 것은 생성자라는 부모를 상속받는 것과 같다. 따라서 생성자의 여러 속성들을 사용할 수 있는 것이다. 이때 상속을 할 수 있는 방법 중 자바스크립트 언어만이 가지고 있는 특징이 하나 있다. 그것이 바로 Prototype이다. 프로토타입의 뜻은 원형, 표준 예라고 할 수 있으나 좀 더 와닿는 표현이 있다. 강의에서는 유전자라고 표현하였다. 1. Prototype, 자바스크립트에서의 상속 function Student(이름){ this.name = 이름; this.age = 15; this.sayHi = function(){ console.log('안녕하세요 ' + this.name + ' 입니다.'); }; Student.prototype.gender = '남' var 학생..

• format_list_bulleted JavaScript/JS 문법 정리
• · 2022. 9. 6.
• textsms