보완 및 개인과제

0.지난 시간 보완할 점 & 개인과제
(1)innerText와 innerHTML의 차이점 알아보기
참조 : https://hianna.tistory.com/480
-innerText : element안의 Text만을 가져온다, 만약 문자열에 html 요소가 포함되어 있을 경우 코드를 그대로 노출시킨다.

-innerHTML : element안의 html을 가져온다, 속성(attribute)에 html코드를 입력하면, 그 html의 element가 element안에 포함된다. 따라서 입력된 html이 해석된 결과를 노출시킨다.
(2)배열 복습하기, 정확히는 let x = document.getElementsByClassName("quiz-text")[0]; 이 부분에서.
-ClassName이 "quiz-text"인 모든 태그 중 첫 번째(컴퓨터는 0부터 카운팅 하므로)를 가져와 x라 선언한다는 의미.
-배열 : 수납상자 array(연관된 데이터 수납), 대괄호 사용하며 값 사이는 ','로 구분, 인덱스 0 즉 [0]부터 1로 취급.

<script>
var coworkers = ["a", "b", "c", 1, 2, 3]
document.write(coworkers[0]); 값 a		//배열의 첫번째는 a
document.write(coworkers[3]); 값 1		//배열의 4번째는 1
coworkers.push('d');					//배열 끝에 ~를 추가. 이후 아래 코드에 영향줌
document.write(coworkers[7]); 값 d
document.write(coworkers.length); 값 7 	//배열의 인덱스 숫자는?
</script>

(3)const, let, var 차이점 알아보기.
참조 : https://www.howdy-mj.me/javascript/var-let-const

1. var, let, const의 차이

*var의 문제점
-변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.
-함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
-변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.
-let과 const는 위의 세 가지 문제점을 해결하였음.

(1)변수 중복 선언 불가
1)let
-변수 중복 선언(재선언)이 불가, 재할당은 가능.

let name = 'kmj'
console.log(name) // output: kmj

let name = 'howdy' // output: Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'howdy'
console.log(name) // output: howdy

2)const
-let과의 차이점 : 반드시 선언과 초기화가 동시에 진행되어야 한다.
-변수 중복 선언 불가, 재할당 불가.
ㄴ재할당 : 원시값은 불가하나 객체는 가능하다. 즉, 재할당을 금지할 뿐 불변은 아니다.

const name; // output: Uncaught SyntaxError: Missing initializer in const declaration
const name = 'kmj'
---
// 원시값의 재할당
const name = 'kmj'
name = 'howdy' // output: Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const name = {
  eng: 'kmj',
}
name.eng = 'howdy'

console.log(name) // output: { eng: "howdy" }

(2)블록 레벨 스코프(식별자의 유효범위 - 전역/지역 스코프)
-전역 변수 : 전역에 선언되어 어디에서든지 참조가 가능. 전역 스코프 가짐.
-지역 변수 : 지역에 선언되어 자신의 지역 스코프와 그 하위 지역 스코프에서 유효. 지역 스코프를 가짐.
-블록 레벨 스코프 : 코드 블록을 지역 스코프로 인정.
ㄴ모든 코드 블록이 지역 스코프를 만듦.
-var는 함수 레벨 스코프; 오로지 함수의 코드 블록만을 지역 스코프로 인정하는 한계 존재.

var a = 1

if (true) {
  var a = 5
}

console.log(a) // output: 5

함수가 아닌 곳에서 var 키워드를 이용해 a를 선언했기 때문에 전역 변수로 취급한다. 기존에 있던 a 변수가 중복 선언되면서, 최하단의 console에서도 출력 값이 5로 바뀐 것을 확인할 수 있다.

-let, const 선언 변수는 코드 블록(함수, if, for, while, try/catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

let a = 1

if (true) {
  let a = 5
}

console.log(a) // output: 1

var 키워드로 선언한 경우 5가 나왔지만, let(const) 키워드로 선언한 경우 if 문 안에 있는 것은 지역 스코프를 가져 전역에서 console을 찍었을 경우, 전역에 있는 a가 결과 값으로 출력된다.

(3)변수 호이스팅
1)let
-let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 즉, 런타임 이전에 자바스크립트 엔진에 의해 선언 단계가 먼저 실행되지만, 초기화 단계가 실행되지 않았을 때 해당 변수에 접근하려고 하면 참조 에러가 뜬다.

console.log(name) // output: Uncaught ReferenceError: name is not defined

let name = 'kmj'

-런타임 이전에 선언이 되어 자바스크립트 엔진에 이미 존재하지만 초기화가 되지 않았기 때문에 name is not defined라는 문구가 떴다.
-따라서 let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점까지 변수를 참조할 수 없는 일시적 사각지대(Temporal Dead Zone: TDZ) 구간에 존재한다.
2) const
-const 키워드는 선언 단계와 초기화 단계가 동시에 진행된다.

console.log(name) // output: Uncaught ReferenceError: Cannot access 'name' before initialization

const name = 'kmj'

-선언과 초기화가 동시에 이루어져야 하지만 런타임 이전에는 실행될 수 없다. 따라서 초기화가 진행되지 않은 상태이기 때문에 Cannot access 'name' before initialization 에러 문구가 뜬다.

*결론 : 기본적으로 변수의 스코프는 최대한 좁게 만드는 것을 권장한다. 따라서, var 키워드 보다는 let과 const 키워드를 사용하며, 변경하지 않는 값(상수)이라면 let 보다는 const 키워드를 사용하는 것이 안전하다.

++추가 과제
이벤트 리스너에 사용되는 요소들 더 찾아보기.