배워서 남주는 개발자 :)
반응형

JS 13

[ JS 딥다이브 ] 13주차 : 프로퍼티 어트리뷰트

1. 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 JS엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드이다. JS엔진에서 실제로 동작하지만, 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. 즉, 내부 슬롯과 내부 메서드는 JS 엔진의 내부 로직이므로 원칙적으로 JS는 내부 슬롯과 내부 메서드에 직접 접근하거나 호출할 수 있는 방법을 제공하지는 않는다. 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공한다. 2. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 JS엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티의 상태란 프로퍼..

JS 2023.05.06

[ JS 딥다이브 ] 12주차 : let, const 키워드와 블록레벨 스코프

1. Var 키워드로 선언한 변수의 문제점 ES5까지 변수를 선언할 수 있는 방법은 var키워드를 사용하는 것이 유일했다. 특히 var 키워드는 아래와 같은 특징이 있다. 이는 다른 언어와 구별되는 독특한 특징으로 주의하지 않으면 심각한 문제가 발생할 수 있다. 1-1. 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 JS엔진에 의해 var키워드가 없는 것처럼 동작한다. var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var y; console.log(x); // 100 console.log(y); // ..

JS 2023.05.06

[ JS 딥다이브 ] 11주차 : 전역 변수의 문제점

1. 변수의 생명주기 1-1. 지역 변수의 생명 주기 function foo() { //변수 x var x = 'local' // 변수 x에 local 값 할당 console.log(x) // local return x; // 변수 x 소멸 } foo(); console.log(x) // ReferenceError: x is not defined - 지역 변수 x는 foo가 호출되기 이전에는 생성되지 않는다. - 변수 선언문은 function foo가 실행되는 런타임 이전 단계에서 먼저 실행된다. - 함수가 종료될 때 변수 x는 소멸된다. (메모리에 저장된 값도 정리됨) - 즉, 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다. 1-2. 전역 변수의 생명 주기 var x = 'global' // 전..

JS 2023.04.23

[ JS 딥다이브 ] 10주차 : 스코프

1. 스코프란? 스코프는 식별자가 유효한 범위를 말한다. 변수는 자신이 선언된 위치에 따라서 자신이 유효한 범위, 즉 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정된다. let a = 'jason' function name() { let a = 'tom' console.log(a); // 1️⃣ } name() console.log(a); // 2️⃣ 위에서 코드의 가장 바깥 부분과 name 함수 내부에서 동일한 변수 a를 선언하고 1️⃣과 2️⃣에서 a 변수를 참조한다. 이때 JS엔진은 이름이 같은 두개의 변수 중에서 어떤 변수를 참조할지 결정한다. 이를 식별자 결정이라고 한다. JS엔진은 스코프를 통해 어떤 변수를 참조해야 할지 결정한다. 따라서 스코프란 JS엔진이 식별자를 검색할 때 사용하는..

JS 2023.04.22

[ JS 딥다이브 ] 9주차 : 함수

1. 함수란? 함수는 JS에서 가장 중요한 핵심개념이다. 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. // f(x,y) = x + y function sum(a, b){ return a + b } f(3, 9) = 12 sum(3,9) // 12 * 매개변수 - 함수 내부로 입력을 전달받는 변수 * 입력 - 인수 / 출력 - 반환값 함수는 정의를 통해 생성이 가능하다. 또한 인수를 매개변수로 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시하는 함수의 호출을 해야 코드 블록에 담긴 문들이 실행된다. 2. 사용이유 함수는 필요할 때 여러번 호출할 수 있다. ➡️ 코드의 재사용 측면에서 매우 유용하다. 함수의 이름은 자신의 역할을 잘 설명하도록 작성되어야 한다...

JS 2023.03.25

[ JS 딥다이브 ] 8주차 : 원시 값과 객체 비교

JS의 데이터 타입은 7가지이고 이는 크게 원시 타입 / 객체 타입으로 구분할 수 있다. 구분하는 이유는 무엇일까? 🛑 [원시 타입 - 객체 타입] 은 크게 3가지 측면에서 차이점이 있다. 1. 원시값 1.1) 변경 불가능한 값 (원시 타입의 값 = 원시 값) 은 변경 불가능한 값이다. 다시 말해서 한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다. 변경 불가능하다는 말은 원시값 자체를 변경할 수 없다는 것이지 변수 값을 변경할 수 없다는 것이 아니다. 변수는 언제든지 재할당을 통해 변수 값을 변경할 수 있다. 하지만 상수는 단 한번만 할당이 허용되기 때문에 변수 값을 변경 할 수 없다. 원시값을 할당한 변수에 새로운 원시값을 재할당하면 메모리 공간에 저장되어 있는 재할당 이전의 원시 값을 변경..

JS 2023.03.25

[ JS 딥다이브 ] 7주차 : 객체 리터럴

1. 객체란 JS는 객체 기반의 프로그래밍 언어이다. 원시값을 제외한 나머지 값(함수, 배열, 정규식 등)은 모두 객체다. 원시 타입은 하나의 값만 나타내지만, 객체는 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조이다. 또한 원시 값은 변경이 불가능하지만, 객체는 변경이 가능하다. ➡️ 객체는 0개 이상의 프로퍼티로 구성된 집합이고, 프로퍼티는 key - value로 구성되어 있다. let person = { firstName: 'Jason', //

JS 2023.03.10

[ JS 딥다이브 ] 6주차 : 타입 변환과 단축 평가

타입 변환 JS의 모든 값은 타입을 가지고 있음. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환 가능 명시적 타입 변환 / 타입 캐스팅 : 의도적인 타입 변환 암묵적 타입 변환 / 타입 강제 변환 : 의도와 상관없이 표현식을 평가하는 중에 JS엔진에 의해 암묵적으로 변환 *원시값은 변경이 불가능한 값이므로 변경할 수 없음 타입 변환이란 기존 원시값을 사용해서 다른 타입의 새로운 원시값 을 생성하는 과정. 암묵적 타입 변환 2-1. 문자열 타입으로 변환 템플릿 리터럴의 표현식 삽입 : 평가 결과를 문자열 타입으로 암묵적 변환 0 + `` // '0' 2-2. 숫자 타입으로 변환 산술연산자 / 비교연산자 삽입 : 피연산자 중에서 숫자 타입이 아닌 값을 숫자 타입으로 암묵적 타입 변환 수행 2-3. 불..

JS 2023.03.05

[ JS 딥다이브 ] 5주차 : 제어문

제어문 → 조건에 따라 코드블록을 실행 (조건문)하거나 반복 실행 (반복문)할 때 사용 → 일반적인 코드는 위에서 아래로 순차적으로 실행 ⇒ 이때, 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어 가능 🛑 하지만 코드의 실행 순서가 변경된다는 것은 직관적인 코드의 흐름을 혼란스럽게 할 수 있음 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치는 단점 이 있음 ⇒ 가독성이 좋지 않은 코드는 오류를 발생 시키는 원인이 됨 👉🏻 forEach, map, filter, reduce같은 고차함수 를 사용한 함수형 프로그래밍 기법에서는 제어문의 사용을 억제하여 복잡성을 해결하려고 노력 함 8.1 블록문 0개 이상의 문을 중괄호로 묶은 것 JS는 블록문을 하나의 실행단위로 취급함 8.2 조건문 주어진 조건식의..

JS 2023.03.05

[ JS 딥다이브 ] 4주차 : 연산자

연산자란? 하나 이상의 표현식을 대상 으로 산술/ 할당/ 비교/ 논리/ 타입/ 지수연산 등을 수행해 하나의 값으로 만드는 것 이때, 연산의 대상을 피연산자 라고 함 피연산자는 값으로 평가될 수 있는 표현식이어야 함 그리고 피연산자와 연산자의 조합으로 이루어진 연산자 표현식도 값으로 평가될 수 있는 표현식임 1.산술 연산자 의미 : 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자값을 만드는 연산자 (산술 연산이 불가능한 경우, NaN을 반환) 1-1.이항 산술 연산자 2개의 피연산자를 산술연산하여 숫자 값을 만드는 연산자 모든 이항 산술 연산자는 피연산자의 값을 변경하는 side effect가 없음 = 피연산자의 값이 바뀌지 않고 항상 새로운 값을 만듦 1-2.단항 산술 연산자 1개의 피연산자를 산술..

JS 2023.03.05
728x90