기본 문법
목차
변수
메모리에 값을 저장, 읽어들여서 재사용
주요 개념
- 변수 이름: 변수의 고유 이름
- 변수 값: 저장된 값
- 변수 할당: 변수에 값을 저장하는 행위
- 변수 선언: 변수를 사용하기 위해 컴퓨터에 알리는 행위
- 변수 참조: 변수에 할당된 값을 읽어오는 것
변수 선언 방법
- var
- let
- const
차이점
| 재선언 | 재할당 | |
|---|---|---|
| 예시 | var myVar = 'Hello World'; var myVar = 'Hello World'; | var myVar = 'Hello World'; myVar = 'Hello World'; |
| var | O | O |
| let | X | O |
| const | X | X |
연산자
산술 연산자
+,-,*,/,%,**,,,,,,, ``
비교연산자
-
===,!== -
<,>,<=,>===와!=는 JavaScript에서 유효하지만===,!==와 다르다. 둘 다 값이 동일한지 확인하기 위해 사용하지만, 전자는 값의 데이터 타입은 테스트하지 않는다.오류가 적은 편인
===,!==을 사용하는 것을 권장한다.
증감연산자
++, --
let num = 0;
console.log(num++); // 0
console.log(++num); // 2
console.log(num--); // 2
console.log(--num); // 0
3++; // error : 변수에만 사용 가능대입 연산자
=, +=, -=, *=, /=
논리 연산자
&&, ||, !
조건문
if 문
if (조건1) {
// 조건1이 참(true)일 때, 실행
} else if (조건2) {
// 조건2가 참(true)일 때, 실행
} else {
// 조건1, 조건2가 모두 거짓(false)일 때, 실행
}
false,undefined,null,0,NaN,''(빈 문자열)은false이고 나머지 값들은 전부 true를 return한다.
switch 문
switch (expression) {
case choice1:
// expression === choice1 일 때, 실행
break;
case choice2:
// expression === choice2 일 때, 실행
break;
default:
// expression과 값이 같은 case가 없을 때, 실행
}삼항연산자
let variable = condition ? 'o' : 'x';condition 변수가 true라면 'o',
false라면 'x'가 variable 변수에 대입된다.
반복문
for 문
for (초기화식; 종료 조건; 증감식) {
// 실행할 코드
}while 문
초기화식
while (종료 조건) {
// 실행할 코드
증감식
}do-while 문
do-while 문에서, 중괄호 안의 코드는 종료 조건 확인 전에 항상 한 번은 실행된다.
초기화식
do {
// 실행할 코드
증감식
} while (종료 조건)break
break문은 즉시 반복문을 종료하고 브라우저가 반복문 뒤에 있는 코드로 이동하게 한다.
continue
continue문은 반복문을 완전히 탈출하는 대신, 이것은 반복문의 다음 반복으로 건너뛴다.
함수
사용하는 이유
같은 코드를 여러 번 타이핑하는 대신, 함수를 정의(declaration)하고 필요할 때마다 호출(invoke) 하여 기능을 여러 번 사용할 수 있다.
JavaScript 언어는 유용한 것들을 할 수 있게 해주는 많은 내장 함수를 가지고 있다. 또한, 브라우저 내부가 아닌 자신의 코드에서 정의하여 사용하는 함수를 사용자 정의 함수라고 한다.
사용법
function myFunction(param1) {
console.log('myFunction!! ' + param1);
return 'retVal!! ' + param1;
}
const retVal = myFunction(1); // myFunction!! 1
console.log(retVal); // retVal!! 1익명 함수
document.querySelector('button').onclick = function () {
console.log('button clicked!');
};
var func = function () {
console.log('func!!');
};
func(); // func!!- 익명 함수는 주로 이벤트 핸들러와 사용된다.
- 변수 속에 익명 함수를 넣을 수 있다.
함수 스코프
함수 바깥에 선언된 가장 상위 레벨의 스코프는 전역 스코프(global scope) 이다. 전역 스코프 내에 정의된 값들은 어디에서든 접근 가능하다
변수 및 함수 내 정의된 코드들은 그들만의 분리된 '스코프' 안에 자리하게 되는데, 외부에서 접근할 수 없게 된다.
이벤트
이벤트란 시스템에서 일어나는 사건이나 발생이다.
이벤트 핸들러 추가
이벤트 핸들러를 더하는 방법에는 이벤트 핸들러 프로퍼티와 addEventListener() 메서드가 있다.
addEventListener 함수는 removeEventListener()를 이용하여 이벤트 핸들러를 삭제할 수 있으며 다수의 리스너를 추가할 수 있다는 점에서 이벤트 핸들러 프로퍼티보다 강력하지만, 브라우저 호환성이 낮다.
const btn = document.querySelector('button');
function sayHi(e) {
console.log('hi');
console.log(e); // 이벤트 객체
}
function sayHi2() {
console.log('hi2');
}
// 1. 이벤트 핸들러 프로퍼티
btn.onclick = sayHi;
btn.onclick = sayHi2; // 덮어씀
// 2. addEventListener 함수
btn.addEventListener('click', sayHi);
btn.addEventListener('click', sayHi2); // 다수의 리스너 추가 가능
btn.removeEventListener('click', sayHi);인라인 이벤트 핸들러는 유지 보수에 좋지 않으므로 사용하지 말자!
<button onclick="sayHi()">Hi</button>
주석
// 헤헤
/*
히히
호호
*/