Javascript 기본 문법 정리

변수(var, let, const)

1. var

   var name = 'Mike';
   console.log(name); // Mike 
   
   var name - 'Jane';
   console.log(name); //Jane

   var는 한번 선언된 변수를 다시 선언할 수 있다.

   var name;
   console.log(name); //undifined
   name = 'Mike'

   var는 선언하기 전에 사용할 수 있다

2. let

   let name = 'Mike';
   console.log(name); // Mike 
   
   let name = 'Jane';
   console.log(name); //SyntaxError!!

   let은 한번 선언된 변수는 다시 선언할 수 없다.

   console.log(name); // ReferenceError
   let name = 'Mike';

   let과 const는 TDZ(Temporal Dead Zone)의 영향을 받는다 즉 할당을 하기 전에는 사용할 수 없다.

3. const

   let name;
   name = "Mike";
   
   var age;
   age = 30;
   
   const gender;
   gender = "male"; //syntaxError!!

   const는 재할당이 안되는 변수임으로 선언과 동시에 할당이 되어야 한다.

Hosting

스코프 내부 어디서든 변수선언은 최상위에 선언된 것 처럼 행동

함수선언문, 함수 표현식

함수 선언문

function hello(){
	console.log("hello");
}

함수 표현식

let hello = function(){
	console.log("hello");
}

함수선언문 : 어디서든 호출 가능 (호이스팅)

함수표현식 : 코드에 도달하면 생성

화살표함수(arrow function)

//return 값이 있을 경우
let add=(num1, num3)⇒{
	return num1+num2;
}

//return 값이 없을 경우
let add=(num1, num2)=>(
	num1+num2;
)

html 요소 찾기

1. Document.getElementBy..

• Id, class를 붙혀 해당 selector의 document요소를 찾음

2. Document.querySelector()

• jquery의 $(”selector”)와 같이 #, . 과같은 selector로 요소 검색
• 해당셀렉터로 요소를 검색했을때 여려개가 존재 할 경우 가장 첫번째 요소 반환
• 만약 여러개의 요소를 모두 가져와야 할 경우 Document.querySelectorAll()를 사용하면여러 요소에 대한 배열 값을 반환

Javascript Class 추가/삭제/읽기 및 toggle

1. 자바스크립트 class 추가

const h1 = document.querySelector("div.hello:first-child h1");

//class 추가
h1.classList.add();

//class 삭제
h1.classList.remove();

//class 유무 판단
h1.classList.contain();

2. class toggle

function handleTitleClick() {

    h1.classList.toggle("clicked")

}

h1.addEventListener("click", handleTitleClick);