<Console 객체>
- console 객체는 아무 전역 객체에서나 접근할 수 있다.
- time과 timeEnd의 매개변수에는 똑같은 문자열을 넣어줘야 한다.
<var, let, const>
- 자바스크립트에서 변수를 선언할 때, var, let, const를 사용한다.
1. [변수 선언 방식]
- var : 중복 선언과 재할당이 가능하다.
- let(ES6) : 중복 선언은 불가하며, 재할당은 가능하다.
- const(ES6) : 중복 선언과 재할당 둘 다 불가능하다.(※ const로 선언했어도 배열과 객체의 값을 변경하는 것은 가능하다.)
2. [유효한 참조 범위]
- var : 함수 레벨 스코프(function-level-scope)
- 아래와 같이 함수 내에서 선언된 변수는 함수 내에서만 유효하다.
- 하지만, 함수 외부에서는 참조할 수 없다.
- let / const : 블록 레벨 스코프(block-level scope)
- 함수, if문, for문, while문, try/catch문 등의 모든 코드 블록 내부에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에선는 참조할 수 없다.
3. [호이스팅]
- 호이스트(Hoist)의 뜻은 무언가를 들어 올리거나 끌어 올리는 동작을 설명한다. 자동차를 강에서 올린다(Hoist)라고 할 수 있다.
- Javascript에서 호이스팅은 코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬 범위(유효 범위)의 맨 위로 들어올려지거나 끌어올려지는 경우를 설명한다.
- var 선언문 호이스팅
- 아래 예에서는 아직 생성하지 않은 변수에 대한 콘솔 로그를 사용하여 시작한다. 다음으로 allu 라는 이 변수를 선언하고 문자열 dachshund를 할당한다. 코드가 실행되면 undefined가 반환된다. 이 코드가 에러를 발생시키지 않는 이유는 호이스팅 때문이다.
- 함수 선언문 호이스팅
- 함수 선언문도 함수 생성전에 호출하면 호이스팅이 발생해 'hosting test'가 제대로 출력된다.
- let / const 선언문 호이스팅
- let 또는 const로 변수를 선언하면 실제로 변수는 여전히 호이스팅 된다.
- 그러나, var과의 차이점은 var는 실제 할당 값이 할당되기 전까지 undefined 값이 할당되는데, let / const 를 사용하면 변수 초기에 어떤 값도 할당되지 않는다.
- 이번에도 호이스팅이 되지만, 변수는 초기에 undefined로 초기화된 var과 달리 초기에 초기화되지 않는다. 코드가 실행되면 변수에 값을 할당하기 전에 콘솔 로그가 발생하므로, 위의 오류가 발생한다. let 으로 변수를 선언해도 같은 방식으로 동작한다.
- 이러한 일이 발생하는 이유는 TDZ(Temporal Dead Zone) 때문인데, 일시적 데드 존은 변수를 사용할 수 없는 일시적인 비활성 상태를 나타낸다.
정리하자면, 변수를 생성할 때 재할당이 필요없다면 const를 사용하고, 재할당이 필요하면 let을 사용하지만 변수의
scope를 최대한 좁게 만들어서 사용해줍니다.
<Data Type in Javascript>
- 원시 타입 : Boolean, String, Number, null, undefined, Symbol (불변성을 가지고 있다.) => 고정된 크기로 Call Stack 메모리에 저장, 실제 데이터가 변수에 할당
- 참조 타입 : Object, Array => 데이터 크기가 정해지지 않고 Call Stack 메모리에 저장, 데이터의 값이 heap에 저장되며 변수에 heap 메모리의 주소값이 할당
기본적으로 JS는 원시타입에 대한 값을 저장하기 위해 Call Stack 메모리 공간을 사용하지만,
참조타입의 경우 Heap 이라는 별도의 메모리 공간을 사용한다. 이 경우, Call Stack은 개체 및 배열 값이 아닌 Heap 메모리 참조 ID를 값으로 저장한다.
- 자바스크립트는 느슨한 타입의 동적 언어이다. (Lossely typed, dynamic) ←→ 대부분의 다른 언어(Java,C++,TypeScript)는 정적타입이다.(static)
- 변수는 어떤 특정 타입과 연결되지 않고, 모든 타입의 값으로 할당 및 재할당이 가능하다.
- 같은 변수가 여러개의 타입을 가질 수 있고 타입을 따로 명시하지 않아도 된다.
- 배열도 Object의 일부이기 때문에, 단순히 typeof를 쓰는 것이 아니라 Array.isArray() 로 배열인지 아닌지 판별할 수 있다.
<타입 변환>
- JS 변수는 새 변수 및 다른 데이터 유형으로 변환할 수 있다.
- 1. JavaScript 함수를 사용하여
- 2. JavaScript 자체에 의해 자동으로
1. 함수를 사용해서 변환
2. Javascript 자체에 의해 자동으로 변환
<연산 및 Math Object>
<Template Literals>
- JS 에서 backtick(`) 문자를 사용하여 문자열을 표현한 것을 템플릿 리터럴이라고 한다.
이렇게 사용하면
(1) 줄 바꿈을 쉽게 할 수 있고
(2) 문자열 내부에 표현식을 포함할 수 있게 된다.
<Loops>
- JS 에서 루프(Loop)를 사용하면 코드 블럭을 여러 번 실행할 수 있게 해준다.
[루프의 종류]
1. for
: 코드를 여러 번 반복한다.
2. for/ in
: 객체의 속성(property)를 따라 반복한다.
3. while
: 지정된 조건이 true인 동안 코드 블록을 반복
4. do/while
: do/while 루프는 while 루프의 변형이다. 이 루프는 조건이 true인지 검사하기 전에, 코드 블록을 일단 한 번 실행한다. 그 후에 조건이 true인 동안 루프를 반복한다.
[배열을 Loop로 컨트롤하기]
- 보통 배열에서는 map 을 많이 사용한다.
※ for vs foreach
- for 루프는 원래 사용되었던 접근 방식이지만, forEach는 배열 요소를 반복하는 새로운 접근 방식이다.
- for 루프는 필요한 경우 break 문을 사용하여 for 루프를 중단할 수 있지만, forEach에서는 이와 같은 작업을 수행할 수 없다.
- for 루프는 await 와 함께 작동하지만 forEach는 await(비동기)와 완벽하게 작동하지 않는다.
(forEach는 (async)비동기 함수를 기다려주지 않는다.) 더 자세히 알고 싶으면? 클릭
- for 루프를 사용한 성능은 forEach 루프보다 빠르다.(물론, forEach가 더 빠른 테스트케이스도 있다. 상황에 따라 사용!)
참고 자료
따라하며 배우는 자바스크립트 A-Z
'컴퓨터 공부 > 🕸️ Web' 카테고리의 다른 글
| Javascript 기본 - 2) Window 객체 및 DOM (0) | 2023.11.30 |
|---|---|
| Javascript 에서 forEach 함수는 비동기함수를 기다리지 않아요! (0) | 2023.11.29 |
| Javascript 에서의 setInterval(함수,간격) (0) | 2021.05.29 |
| Javascript 에서의 toogle 함수 (0) | 2021.05.28 |
| Javascript 에서의 '이벤트'에는 어떤 것들이 있을까? (0) | 2021.05.28 |