오늘 새로 배운 것
엄격모드 - 'use strict';
모던 JS에서 지원하는 기능을 활성화하려면 스크립트 최상단이나 함수 본문 최상단에 'use strict'를 적어줘야함
클래스와 모듈을 사용할 경우는 use strict를 붙이지 않아도 자동으로 적용됨
상호작용 함수
prompt(question, [default])
confirm(question)
alert(message)
논리 연산자 &&, ||
&&
일단 ||연산자보다 더 우선순위가 높다. if문 안에서 첫번째 falsy한 값을 반환하고 만약 if문 안에 falsy한 값이 없다면 가장 마지막 truthy한 값을 반환한다.
||
&& 연산자와 마찬가지로 if문 안에서 첫번째 truthy한 값을 반환하고 truthy한 값이 없다면 마지막 falsy한 피연산자를 반환한다.
NOT(!)
위의 2개 논리 연산자보다 우선순위가 더 높으며 피연산자 앞에 이 Not이 두 개(!!)붙으면 Boolean값으로 바뀐다.
nullish 병합 연산자 ??
a ?? b
=> a가 null도 아니고 undefined도 아니면 a, 그 외의 경우는 b
||연산자와 언틋 비슷해보이지만 ||는 첫번째 truthy한 값을 반환하는데 비해 ??는 첫번째 정의된 값을 반환한다.
let a = 0;
alert(a || 100); // a = 100
alert(a ?? 100); // a = 0 => ||는 0을 falsy하게 판단하지만 ??는 0은 null, undefined가 아니기 때문에 0을 출력한다
nullish 병합 연산자를 사용하여 변수에 null이나 undefined가 들어올 경우 지정한 기본값을 할당하는 용도로 사용한다.
삼항 연산자 ? 오른쪽에는 break나 continue를 사용할 수 없다.
q ? a1 : a2
함수 선언문과 함수 표현식의 차이
1. 문법의 차이
// 함수 선언문
function sum(a, b) {
return a + b;
}
// 함수 표현식
let sum = function(a, b) {
return a + b;
};2. JS 엔진의 함수 생성 시기 차이
함수 선언문은 JS 스크립트 실행 전 준비단계에서 전역에 선언된 함수 선언문들이 생성되고 그 다음 스크립트가 실행되기 때문에 함수 선언문이 정의되기 전 코드에 함수 호출이 있어도 실행할 수 있다.
반면에, 함수 표현식은 실행 흐름이 해당 함수에 도달했을 때 함수가 생성되기 때문에 실행 흐름에서 함수가 생성되기 전에 접근하는 것이 불가능하다.
3. 스코프 차이
함수 선언문이 코드 블록 내(예를 들면 if문 안)에 위치하면 블록 안에서만 함수가 유효하기 때문에 밖에서 접근이 불가하다.
반면에 함수 표현식은 블록 밖에 선언한 변수에 블록 내 함수 표현식으로 만든 함수를 할당해도 코드가 동작한다.
=> 코드 구성과 가독성 측면에서 함수 선언문을 이용해 함수를 선언하는 것을 먼저 고려하고 조건에 따라 함수를 선언할 경우라면 함수 표현식을 사용해야 한다.
💻 DOM 개념 메모
(출처 : https://ko.javascript.info/browser-environment)
🔎 DOM??
Parcing : 브라우저가 서버로부터 html 문서를 받아서 랜더링 엔진으로 한줄씩 분석(해석)하면서 object로 만드는 과정
해석한 결과가 DOM Tree
HTML에 CSS 포함되있으면 CSSOM 트리 구성
DOM은?
Document(HTML)을 JS가 알아먹을 수 있는 Object 형태로 Modeling 한 것!
DOM이 브라우저에 내장되어있기 때문에 '접근'할 수 있고 '제어'할 수 있다
DOM을 제어하기 위해서는 먼저 접근해야한다.
🔎 DOM에서 Node??
node 마디, 교점
DOM Tree에서 document의 head, body 하나하나가 node고 node는 곧 '객체'
node마다 속성과 메서드를 가지고 있다
document.getElementById("demo").innerHTML = ""
에서
getElementById()는 메서드, innerHTML은 속성!
object의 속성에 접근할 때는 object.
object의 메서드에 접근할 때는 object()
select 하는 방법
1. 태그
2. id
3. class
🔎 id와 class의 차이
id와 class의 차이
getElementById
getElement's'ByClassName
id는 identification
class는 군집, 특성을 공유하는
id는 하나만 존재
class는 여러군데 존재 가능
🔎 요소 만들기 및 append하기
const div = document.createElement('div');
document.body.append(div)
🔎 innerHTML과 innerText의 차이
document.querySelector('h1').innerHTML = 'TEST'
document.querySelector('h1').innerText = 'TEST'
이렇게 보면 결과는 차이가 없어보이지만 ''안에 tag 요소를 넣어줄 경우는 결과가 다르다!
innerHTML은 querySelector한 대상 요소의 HTML을 읽어오거나 쓸 수 있음
innerText는 그냥 다 Text로 인식해서 넣어줌! 또는 사용자에게 보여지는 텍스트 값을 읽음
textContent는 innerText와 달리 <script>나 <style> 태그와 상관없이 해당 노드가 가지고 있는 텍스트 값 그대로 읽음. 숨겨진 텍스트 문자열도 출력하게 할 수 있음.
🔎 setAttribute
attribute 속성
setAttribute('class',클래스명)
class를 동적으로 추가하는 게 필요한 이유?
클릭, 마우스오버를 통해 class를 바꾸도록
🔎 hidden
요소를 숨길 때 <div hidden>이런 식으로 사용하기도 하고 JS 안에서도 요소.hidden = true; 이런 식으로 사용하기도 하며 이는 CSS의 display:none과 동일하다.
🔎 value
<input>, <select>, <textarea>의 값이 저장되며 대응하는 클래스는 HTMLInputElement, HTMLSelectElement 등
하루를 돌아보며...
많은 양의 JS 개념을 소화하려고 하니까 집중이 잘 안됐던 것 같다. 그래도 조금씩 어렴풋이 알았던 부분에 살이 붙어가는 느낌이다. 하지만 내용이 너무 방대하다. 이런 언어를 단 10일만에 개발한 브랜든 아이크라는 사람은 대체... 계속 반복해서 보다보면 익숙해지는 날이 오겠지...
