[JavaScript] 스코프(Scope)
2022. 11. 5. 18:40
프로그래밍 언어/JavaScript
스코프란? 일반명사) 유효 범위 고유명사) 참조하려는 대상의 식별자를 찾아내기 위한 규칙 변수는 어디에 저장되어 있는가? 필요할 때 프로그램은 어떻게 변수를 찾는가? 특정 장소에 변수를 저장하고 나중에 그 변수를 찾는데는 잘 정의된 규칙이 필요하다. 이런 규칙을 “스코프(Scope)” 라고 한다. 식별자 이름으로 변수를 찾기 위한 규칙의 집합 스코프는 크게 2가지로 구분할 수 있다. 전역 스코프 : 코드 어디서든 참조할 수 있는 스코프. 지역 스코프 : 함수 코드 블록이 만든 스코프로 함수 자신과 그 하위 함수에서만 참조할 수 있는 모든 변수는 반드시 스코프를 갖는다. 전역 변수 : 전역에서 선언된 변수이며 전역 스코프를 가지므로 코드 어디서든 참조할 수 있는 변수 지역 변수 : 지역 내에서 선언된 변수..
[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 메서드가 어떤 퍼포먼..
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라는 문법이 ..