240112 엘리스 SW트랙 3주차 Day 15

* 자바스크립트 변수 정의 과정

- 실행 컨텍스트 생성 단계에서, 자바스크립트 엔진은 변수 선언을 읽어 변수를 실행 컨텍스트에 저장한다.

- 실행 컨텍스트 실행 단계에서, 자바스크립트 엔진은 변수 할당 구문을 읽어 실행 컨텍스트에 저장된 변수에 값을 저장한다

- 함수 선언문은 생성 단계에서 함수명과 함수 전체가 저장된다.

- 실행 컨텍스트 실행 단계에서, 자바스크립트 엔진이 변수명을 읽으면 렉시컬 환경에서 값을 읽는다.

---

* Window는 창을 지칭

* document는 html문서 자체를 나타내는 객체

---

* 자바스크립트 실행환경에 따라 전역객체는 다르다. 브라우저의 경우 window, nodejs 환경의 경우 global로 각각 프로퍼티가 다른 객체이다.

* globalThis는 환경의 전역변수를 가리킨다. 따라서 window와 globalThis는 같은 객체를 가리킨다.

* document 객체는 createElement 함수로 DOM 노드를 생성할 수 있다.

---

* 문자열이 모두 숫자라면, Number(str)로 정상적으로 number 타입으로 변환할 수 있다.

* isNAN() 함수는 입력값이 숫자로 변환되었을 때 NAN이 되는지를 검사한다.

* 숫자에 Number 객체의 메서드를 적용하면, 숫자는 Number 객체로 변환된다.

---

* BigInt 타입은 Math 객체를 이용한 연산이 불가능한다. 연산을 시도할 경우 TypeError가 발생한다.

* Math 객체는 생성자를 이용해 생성할 수 없다. Math 객체는 constructor가 없으므로, new 키워드를 이용하여 새로운 객체 생성 시 TypeError가 발생한다.

---

* new를 이용해 Date 객체를 생성하면, 실시간으로 현재 시간의 밀리초를 얻을 수 없다. new Date()로 Date 객체를 생성하면, 객체를 생성한 시점의 시간 정보만을 얻을 수 있다. 실시간으로 현재 시간의 밀리초를 얻기 위해서는 정적 메서드인 Date.now()를 활용해야한다.

* Date 객체로는 타임존 정보를 얻을 수 있다. Date 객체는 기본적으로 현재 컴퓨터의 시간대(타임존) 정보를 기반으로 생선된다. 따라서 Date 객체를 생성하면, 현재 시간대가 기준 UTC 시간대에서 얼마나 벗어나 있는지 알 수 있다.

* 문자열로 된 시간을 Date 객체로 변환하면, Date 객체가 생성된다. new Date('1/1/2021') 등으로 문자열로 된 시간을 Date 객체로 변환하면 정상적으로 Date 객체가 생성된다.

---

* 문자열을 String으로 감싸지 않고도 문자열 메서드를 호출할 수 있다. 자바스크립트는 자동으로 문자열을 String 래퍼 객체로 변환하므로, 문자열 메서드를 문제없이 호출 할 수 있다.

* new를 이용해 String 객체를 생성하면 타입이 객체가 된다. String(10) 등 new를 사용하지 않으면 문자열 타입을 반환한다.

* JSON.stringify()로 한번 문자열로 변한 객체는 다시 객체로 만들 수 있다. JSON.parse()를 이용해 문자열을 넘겨 다시 객체로 만들 수 있다.

---

*

let re = /[\W_]/g;

 

의 의미는 아래와 같다 !

 

- 이 코드는 str에 특수문자(예: 공백, 특수 문자 등)를 제거하기 위해 정규 표현식을 사용하여 작성되었는데, 정규 표현식의 역할은 특정 패턴을 찾는 데 사용하는 방법입니다.

- [\W_] 정규 표현식은 \W와 _를 모두 포함하는 패턴을 일치시링을 만들어 줍니다. \W은 제공된 패턴의 하나 이상을 일치시키지 않는 문자를 나타내며, 공백 문자와(즉, _), 특수 문자(“ 등)와 같은 다른 문자도 포함합니다.

- 정규 표현식 패턴 앞에 경우 대괄호 괄호( [])를 사용하여 패턴을 정의하면 정규 표현식 패턴은 키워드 안에 있는 하나 이상의 패턴을 일치시킬 수 있습니다.

- 따라서 let re = /[\W_]/g;는 정규 표현식을 정의하는 코드로, [\W_]를 일치시키도록 정규 표현식을 정의하는데, g는 전역 패턴을 지정합니다. 그래서 정규 표현식은 str에 모든 공백 문자 및 ‘특수 문자’에 해당하는 모든 문자를 일치시켜 제거합니다.

---

* 그리고 갑자기 기본적인게 헷갈려서 GPT한테 무러봄 !

 

- step++과 step+1의 차이 !

 

---

*

names.shift()

 

는 배열에서 첫 번째 요소를 제거하고 제거된 요소를 반환한다. 이 메서드는 names 배열에서 첫 번째 요소를 제거하고 배열의 요소 개수를 반환하는데, 그 결과는 배열의 다음 요소를 참조하는 데 사용된다.

---

*

 return templates[id].replace(/{name}|{n}/g, function (val) {
    return val === "{name}" ? names.shift() : names.length;
  }

 

이 코드의 의미는

위 코드는 템플릿 인수에서 특정 패턴을 찾아 대체합니다. 그런 다음 함수의 인수로 전달되는 {name} 또는 {n}의 값을 사용하여 찾은 패턴을 대체합니다. {name} 이라는 특정 패턴을 찾으면 names 배열에서 첫 번째 요소를 제거하고 그 값을 반환합니다. {n}의 특정 패턴을 찾으면 names 배열의 길이를 반환합니다.

 

위와 같은 코드에 익숙해지자 !

---

 * 01 자바스크립트 실행 > [퀴즈 2] 자바스크립트 Hoisting 문제 다시 한번 보기 !

 

* 01 자바스크립트 실행 > [실습 2] 현재 시간 구하기도 한번더 보기 ! 

const Clock = {
  getCurrentTime: function (date) {

 

이 부분 !

 

* 01 자바스크립트 실행 > [실습 3] 알파벳 카운터 만들기 뭔가 정확히는 다 이해가 안됨 !

* 01 자바스크립트 실행 > [실습 4] 상대 시간 표시 앱 구현하기 이해가 되긴함 ,, 근데 혼자 못짤듯

* 01 자바스크립트 실행 > [실습 5] 복리 계산기 구현하기 이해는 감 ,,

* 01 자바스크립트 실행 > [실습 6] 주식 수익률 계산기 구현하기 이해는 가는데 어떻게 짜야할지 막막 ,,

 

* 03 자바스크립트 문제집 > 처음부터 끝까지 한번 더 코드 분석해보기 !

---

지금 TIL이 밀려서 혼자 고군분투하고 있었눈데 ,,

엘리스에서 블로그 챌린지 한다고 해서 몬가 기분이 좋았다 희희 ..

중꺾마에 힘을 실어주는 것같은 너낌 ..?! 우헤헤

밀려도 다 해낼수 이따 ! 아자아자 화이팅이닷 ! 

---