[JavaScript] 런타임 메모리 구조
2022. 11. 5. 18:22
프로그래밍 언어/JavaScript
런타임이란? 일반명사) 컴퓨터 프로그램 실행을 돕는 소프트웨어 고유명사) 특정 언어로 만든 프로그램들을 실행할 수 있는 환경(프로그램) 왜 사용하는가? 프로그래밍 언어로 작성된 프로그램을 실행하기 위해서 JavaScript 런타임 JavaScript 가 구동되는 환경 종류로는 브라우저(크롬, 파이어폭스, 익스플로러 등) 프로그램과 Node.js 라는 프로그램이 있음. JavaScript 엔진의 구성 : Memory Heap 과 CallStack 으로 구성되어 있음. 콜스택(CallStack) 실행 콘텍스트(Execution Context) 를 통해 원시 타입 데이터(정수, 실수, 문자, boolean 등) 가 저장된다. 함수의 호출부도 여기에 저장된다. 메모리 힙(Memory Heap) 참조 타입(객체 ..
[JavaScript] 변수 선언 방식 (var/ let/ const)
2022. 11. 5. 18:15
프로그래밍 언어/JavaScript
var / let / const 란 무엇인가? JavaScript 에서 변수 선언 시에 사용하는 예약어(키워드) 예약어(키워드) : 컴퓨터 프로그래밍 언어에서 이미 문법적인 용도로 사용되고 있기 때문에 식별자로 사용할 수 없는 단어들 1. var ES6(ECMAScript6) 이전에 변수 선언 방식이다. 변수 선언 및 초기화 후에 값을 재할당할 수 있다. 동일한 변수명으로 중복 선언이 가능하다. 예시) // 첫 번째 변수 선언 + 초기화 var a = 10; console.log(a); // 결과값: 10 // 값 재할당 a = 20; console.log(a); // 결과값: 20 // 두 번째 변수 선언 + 초기화 var a = 30; console.log(a); // 결과값: 30 // 세 번째 변..
[JavaScript] Primitive Type(원시 타입) 과 Reference Type(참조 타입)
2022. 11. 5. 17:59
프로그래밍 언어/JavaScript
자바스크립트의 자료형은 크게 원시 타입 과 참조 타입 으로 나뉜다. 원시 타입 (Primitive Type) 모두 하나의 값을 담고 있다. 값 자체에 대한 변경이 불가능(immutable) 하다. 예시) let myString = "hello"; myString[0] = 'B'; // 원시 타입이기 때문에 Bye 로 변경 불가능. 오류는 Throw 되지 않는다. console.log(myString); // bye 변수에 데이터를 재할당할 수 있다. 예시1) 문자열을 담고 있던 변수에 다른 문자열을 담을 수 있다. let myString = "hello"; myString = "bye"; // 재할당 가능 console.log(myString); // bye 예시2) 문자열을 담고 있던 변수에 숫자를 담..
[JavaScript] 자바스크립트 언어의 특징
2022. 11. 5. 17:54
프로그래밍 언어/JavaScript
자바스크립트의 특징 자바스크립트는 컴파일 언어이다. (자바스크립트는 코드 실행 전 코드 평가 과정을 거친다. 이 과정에서 선언된 모든 식별자에 대한 정보를 미리 수집해 메모리에 매핑시키는데, 이로 인해 코드 실행 시 호이스팅 문제가 발생한다.) 자바스크립트는 Lexical-Scoped 언어이다. (자바스크립트에서 함수 선언 시점에 스코프가 생겨나며, 함수를 선언하는 순간 함수 내부의 변수들은 자기 스코프로부터 가장 가까운 곳(상위 스코프에서) 에 있는 변수를 계속 참조하게 된다. 자바스크립트의 이런 특성으로 인해 생성되는 함수는 모두 클로저 함수라고 말할 수 있다.) 자바스크립트는 dynamically-typed 언어이다. (자바스크립트는 코드 실행 시점에 변수의 타입이 결정되고 변수 타입에 해당하는 메..
[Tip] function 은 되도록 사용하지 마세요.
2022. 11. 4. 21:07
프로그래밍 언어/JavaScript
다양한 곳에서 사용되어 오히려 헷갈리는 기존 function 키워드 예시 1) 일반 함수로 활용 출력 결과는 다음과 같습니다. 여기서 this 는 window 를 가리킵니다. 예시 2) 생성자 함수로 활용 출력 결과는 다음과 같습니다. 여기서 가리키는 this 는 Func 클래스에 의해 만들어진 인스턴스입니다. this 가 windows 가 아니기 때문에 func 라고 하는 인스턴스에 프로퍼티 args 를 만들어서 거기에 배열을 담고 있게 됩니다. 예시 3) 객체 메소드로 활용 출력 결과는 다음과 같습니다. 객체에 있는 메소드를 실행했을 때 this 는 . 앞에 있는 bar 가 됩니다. 위와 같이 function 키워드는 일반 함수로도 객체 생성자 함수로도 객체 메서드로 활용될 수 있다 보니 범용적으로 ..
[JavaScript] for, foreach, filter, map, reduce 기능 및 퍼포먼스의 차이
2022. 9. 24. 20:22
프로그래밍 언어/JavaScript
들어가며 나는 평소 백엔드 API 로부터 응답받은 데이터를 가져와 화면에 보여줄 때 forEach 함수를 자주 사용하곤 했다. for 문에 비해 가독성이 좋아서 forEach 를 사용했었다. 이외에도 케이스에 따라 filter, map, reduce 등을 사용하곤 했었다. 하지만 이들의 퍼포먼스 차이에 대해서는 아직까지 찾아본 적이 없었다. 오늘 백준에서 이진 탐색 알고리즘 문제를 풀던 중 filter, reduce 메서드 등을 사용하게 되었다. 코드가 올바르게 동작해 예상한 값이 출력되었지만, 메모리 초과로 계속 통과하지 못했다. 그러나, 이들 대신 forEach 메서드를 사용하니 메모리 초과 문제가 해결되며 통과했다. 이를 계기로 filter, reduce 메서드와 forEach 메서드가 어떤 퍼포먼..
[Typescript] Builder Pattern
2022. 8. 7. 21:25
프로그래밍 언어/TypeScript
들어가며 개발을 하면서 빌더 패턴에 대해서 정확히 알지 못한 상태로 사용 중이었다. 모르고 쓰는 것에 답답함을 느껴 찾아보게 되었다. 두고두고 볼 용도로 공부한 내용을 정리하고자 한다. Builder Pattern 이란? 클래스의 구축을 단순화하고, 사용자가 전문 지식 없이 클래스를 구축할 때 사용하는 패턴이다. 생성 패턴(인스턴스를 만드는 절차를 추상화하는 패턴)의 일종이다. 언제 쓰는가? “The builder pattern itself is used to separate the construction of complex object from its presentation.” - Wikipedia 예를 들어 함수가 여러 개의 인자를 받고 있고, 중간 중간에 null 값을 넘겨줘야 하는 인자가 있을 경..
Generator
2020. 11. 23. 17:22
프로그래밍 언어/JavaScript
JavaScript에서 iterator 객체를 쉽게 구현할 수 있는 방법에는 Generator가 있습니다. Generator 란? Generators are functions that can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances. - MDN. Generator 의 특징 generator의 특징은 함수가 특정 지점에서 끝나고 다음 실행 때는 끝난 시점에서 다시 시작된다는 것입니다. function* () { // syntax; } 위처럼 *를 붙이는 함수는 generator가 됩니다. 이 함수는 특별한 함수인데 일반적인 함수와는 다르게 내부에서 yield라는 문법이 ..