[JavaScript] 표기법, 자료형, DOM API, 데이터 타입 확인

표기법

📌 dash-case (kebab-case)

[ HTML, CSS ] 단어와 단어 사이에 대쉬 '-' 를 사용한다.

ex) the-quick-brown-fox

 

📌 snake_case

[ HTML, CSS ] 단어와 단어 사이에 언더바 '_' 를 사용한다.

ex) the_quick_brown_fox

 

📌 camelCase

[ js ] 제일 앞의 첫글자는 소문자이며 뒤에 첫글자부터는 대문자로 시작한다.

ex)  theQuickBrownFox

 

📌 PascalCAse

[ js ] 모든 첫글자는 대문자로 시작한다.

ex)  TheQuickBrownFox

 

📌 Zero-based Numbering

0 기반 번호 매기기 👉 특수한 경우를 제외하고 0부터 숫자를 시작합니다.

 

주석

// 한 줄

/*
 	여러 줄
*/

/**
* 여러 줄
* 메모1
* 메모2
*/

자료형

📌 Undefined

값이 할당되지 않은 상태

 

📌 Null

어떤 값이 의도적으로 비어있음

변수

: 데이터를 저장하고 참조(사용)하는 데이터의 이름

 

📌 let

1️⃣ 재사용이 가능

let a = 2;
let b = 5;

console.log(a+b); // 7
console.log(a-b); // -3

 

2️⃣ 값(데이터)의 재할당 가능

let a = 12;
console.log(a);	// 12

a = 999;
console.log(a); // 999

 

📌 const

1️⃣ 값(데이터)의 재할당 불가

const a = 12;
console.log(a);	// 12

a = 999;
console.log(a); // TypeError : Assignment to constant variable

예약어

: 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어

DOM API ( Document Object Model, Application Programming Interface )

📌 DOM API

자바스크립트로 HTML을 제어하는 명령들

DOM : HTML 내용 , API : 명령

 

브라우저는 코드를 위에서 아래로 내려 읽어간다.

script 태그를 title 태그 아래에 쓰게 되면, 아래의 body 내용을 읽지 못한다.

<script defer src="./main.js"></script>

 

script 태그에 defer 속성을 추가 👉 HTML 코드를 다 읽고 main.js 를 실행함

 

1️⃣ 

 

✅ ClassList.add(' ')

선택한 요소에 클래스를 추가한다.

 

✅ ClassList.contains(' ')

선택한 요소에 클래스가 존재하는지 확인한다.

 

✅ ClassList.remove(' ')

선택한 요소의 클래스를 제거한다.

<div class="box"></div>

let boxEl = document.querySelector('.box');

boxEl.addEventListener('click', function() {
	boxEl.classList.add('active');
    console.log( boxEl.classList.contains('active'); 	// true
    
    boxEl.classList.remove('active');
    console.log( boxEl.classList.contains('active'); 	// false
})

 

2️⃣ 

 

<div class="box"> 1 </div>
<div class="box"> 2 </div>
<div class="box"> 3 </div>
<div class="box"> 4 </div>

const boxEls = document.querySelectorAll('box');

boxEls.forEach(function(boxEl,index) {
	boxEl.classList.add(`order-${index+1}`);		// 요소에 'order-@' 클래스가 추가됨
});

 

3️⃣ 

 

메소드 체이닝

split : 문자를 인수 기준으로 쪼개서 배열로 반환

reverse : 배열을 뒤집기

join : 배열을 인수 기준으로 문자로 병합해 반환

const a = 'Hello~';
const b = a.split('').reverse().join(''); // 메소드 체이닝

console.log(a); // Hello~
console.log(b); // ~olleH

 

데이터 타입 확인하기

1️⃣ typeof

console.log(typeof 'Hello')		// 'string'
console.log(typeof 123)			// 'number'
console.log(typeof undefined)		// 'undefined'
console.log(typeof null)		// 'object'
console.log(typeof {})			// 'object'
console.log(typeof [])			// 'object'

 

null , Object , Array는 'object'로 리턴되므로 확인 불가능하다.

 

2️⃣ constructor

console.log([].constructor)	// Array()
console.log({}.constructor)	// Object()
console.log(null.constructor)	// TypeError: Cannot read properties of null (reading 'constructor')

 

null은 확인 불가능하다.

 

3️⃣ Object.prototype.toString.call

console.log(Object.prototype.toString.call(null).slice(8,-1))		// 'Null'

 

⭐ 타입체크하는 함수 만들기

function checkType(data) {
  return Object.prototype.toString.call(data).slice(8,-1)
}

console.log(checkType('Hello'))		//'String'
console.log(checkType(123))		// 'Number'
console.log(checkType(undefined))	// 'Undefined'
console.log(checkType([]))		// 'Array'
console.log(checkType({}))		// 'Object'
console.log(checkType(null))		// 'Null'

 

 

 

 

출처

프론트엔드 웹 개발의 모든 것 초격차 패키지