> 기초/Javascript
-
TIL-2024.02.26 - JS - 실행 컨텍스트-3. 렉시컬 환경-2> 기초/Javascript 2024. 2. 26. 22:27
var x = 1; const y = 2; function foo(a){ var x = 3; const y = 4; function bar(b){ const z = 5; console.log(a + b + x + y + z); // 20 + 10 + 3 + 2 + 5 } bar(10); } foo(20); // 42 ------- 실행 컨텍스트의 생성과 식별자 검색 과정 ? (실행 컨텍스트 생성 및 코드 실행 결과 관리, 실행 컨텍스트를 통한 식별자 검색) 과정/순서: 1. 전역 실행 컨텍스트 생성 2. 전역 렉시컬 환경 생성 2.1. 전역 환경 레코드 생성 2.1.1. 객체 환경 레코드 생성 2.1.2. 선언적 환경 레코드 생성 2.2. this 바인딩 2.3. 외부 렉시컬 환경에 대한 참조 결정 (상..
-
TIL-2024.02.25 - JS - MAP과 예제> 기초/Javascript 2024. 2. 25. 22:55
------- map 객체와의 차이: - Map 객체는 키와 값의 쌍으로 이뤄진 컬렉션. 구분 객체 Map 객체 키로 사용할 수 있는 값 문자열 | 심벌 값 객체를 포함한 모든 값 이터러블 X O 요소 갯수 확인 Object.keys(obj).length map.size 생성: // 기본 생성 const map1 = new Map(['key1','value1'], ['key2','value2']) console.log(map1) // Map(2) {'key1' => value1','key2' => value2'} // 중복된 키 > 덮어써짐 const map1 = new Map(['key1','value1'], ['key1','value2']) console.log(map1) // Map(1) {'key..
-
TIL-2024.02.23 - JS - 실행 컨텍스트-2. 실행 컨텍스트 스택과 렉시컬 환경> 기초/Javascript 2024. 2. 23. 22:28
------- 실행 컨텍스트 스택 ? 설명: 코드의 실행 순서를 스택구조(LIFO)로 관리 실행에 따라 실행 컨텍스트가 추가되고 제거된다. 예제: const x = 1; function foo() { const y =2; function bar(){ const z = 3; console.log(x + y + z) } bar(); } foo(); // 6 전역 코드의 평가와 실행: - 전역 코드를 평가해 전역 실행 컨텍스트를 생성하고 실행 컨텍스트 스택에 푸시 - 전역 변수 X 와 전역 함수 foo가 전역 실행 컨텍스트에 등록 - 이후 전역 코드가 실행되기 시작하여, 전역 변수 X에 값이 할당되고 전역 함수 foo가 호출 foo 함수 코드의 평가와 실행 - 전역 함수 foo가 호출되면 전역 코드의 실행은 ..
-
TIL-2024.02.21 - JS - 실행 컨텍스트-1> 기초/Javascript 2024. 2. 21. 21:06
------- 실행 컨텍스트: 정의: 실행 컨텍스트는 소스코드를 실행하는 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 이를 통해 실행되고 관리 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리 && 코드 실행 순서는 실행 컨텍스트 스택으로 관리 유형: 전역 실행 컨텍스트(Global Execution Context): 코드가 처음 실행될 때 생성되는 실행 컨텍스트입니다. 전역 스코프와 전역 변수, 전역 함수를 관리합니다. 함수 실행 컨텍스트(Function Execution Context): 함수가 호출될 때마다 생성됩니다. 각 함수 호출에 대해 고유의 실행 컨텍스트가 생성되며, 해..
-
TIL-2024.02.20 - JS - 스코프> 기초/Javascript 2024. 2. 20. 22:48
------- 스코프 (범위) ? 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정 > 식별자가 유효한 범위 var x = 'a'; function foo(){ var x = 'b'; console.log(1, x); // 1, a } foo(); console.log(2, x); // 2, a 예제와 같이 다른 영역에서 각기 변수 x 를 선언&참조한 경우 , JS 엔진은 같은 이름을 가진 변수중 어떤 것을 참조할 지 결정하는 것을 식별자 결정 (Identifer Resolution) 예제와 같이, [어떤 것을 참조할 지 결정하는 것] > 코드의 문맥은 실행되는 코드의 환경이나 상태, 즉 코드 문맥 (Context)을 고려 > 관련해서는 추후 진행 --..
-
TIL-2024.02.19 - JS - 변수 - 2. 호이스팅 관점에서 본 var, let, const> 기초/Javascript 2024. 2. 19. 16:16
------- var 특징: 변수의 중복 선언 허용 : var 키워드로 선언한 변수는 중복선언 가능 함수레벨 스코프: var 키워드로 선언한 변수는 함수의 코드 블록만을 지역 스코프로 인정함으로, 함수 외부에서 선언된 var 변수는 코드 블록 내에서 선언해도 모두 전역 변수로 작용 var x = 1; if(true){ // x는 전역변수. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언 됨 // 이때, 의도치 않게 전역 변수값이 1 > 10으로 변경되는 side-effect 발생 var x = 10; } console.log(x) // 10 var 변수의 호이스팅: 변수 호이스팅에 의해 var 변수는 선언문 이전에 참조가능하지만, undefined 노출 // 이 시점에 변수 호이스팅에 의해 이..
-
TIL-2024.02.18 - JS - 변수 - 1. 변수 원리> 기초/Javascript 2024. 2. 18. 21:08
------- 변수? 의미: 변수란 하나의 값을 저장하기 위해 확보한 메모리 공간을 식별하기 위해 붙인 이름. > 하나의 값을 저장하기 위해 확보한 메모리 공간 ?? 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장 (아래의 사진같이) 저장된 값을 사용하기 위해 변수라는 메카니즘을 통해 불러옴 선언(declaration), 초기화 (Initialization), 할당 (assignment), 참조 (reference) 선언: 값을 저장하기 위한 메모리 공간을 확보(allocate)하고 변수 이름과 확보된 메모리 공간의 주소를 연결 (name binding)해서 값을 저장할 수 있게 준비 > 변수를 생성 초기화: 주로 선언과 초기화가 같이 발생하는데, 변수 선언에 의해 확보된 메모리 공간은 JS 엔진에 ..
-
TIL-2024.02.15 - JS - 고차함수와 Reduce> 기초/Javascript 2024. 2. 15. 21:50
------- 고차함수 란? 고차함수: JS에서 함수는 일급 객체이므로 함수를 값처럼 인수로 전달할수 있고, 반환 가능. 고차 함수는 외부 상태의 변경이나 가변 데이터를 피하고 immutability (불변성)을 지향하는 함수형 프로그래밍에 기반을 둠 ------- Reduce 란? Reduce 특징: 고차함수: 함수를 인수로 전달받거나 함수를 반환하는 함수 순수함수: 동일한 인자가 들어오면 항상 같은 값이 나와야하고 return 값으로만 소통하고 데이터베이스 호출이나 HTTP 호출 등 외부의 데이터 구조를 변형하는 호출을 허용하지 않는 함수 설명: 자신을 호출한 배열의 모든 요소를 순회하며, 인수로 전달받은 콜백 함수를 반복 호출. 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫번째 인수로 전달하..