호이스팅(hoisting)
- 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
- var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화
- let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않음
func1() // 함수 선언 전에 호출해도 함수가 실행됨
func2() // 함수 선언 전에 호출하면 에러가 뜬다
function func1(params) {
alert('func1() 호출')
}
const func2 = function(params) {
alert('func2() 호출')
}화살표 함수
- function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현
- 화살표 함수는 항상 익명
//문법1
const func4 = () =>{
...
};✔ 매개변수가 1개인 경우
const func4 = 매개변수1 =>{
...
};객체(Object)
하나의 주제를 가지고 관련있는 프로퍼티(property)를 가지고 있는 집합
프로퍼티(property)
- 이름과 값으로 구성된 정렬되지 않은 집합
- 프로퍼티는 함수도 저장할 수 있음 -> 프로퍼티 메서드
객채를 생성하는 방법
- 리터럴 표기법
- 한번만 필요할때
const 객체명 = {
프로퍼티명1:값1,
프로퍼티명2:값2,
...
프로퍼티명n:function(){
프로퍼티가 호출되면 실행할 문장;
...
}
}- 생성자를 이용
- 객체를 만드는 함수
- 재활용이 가능하다.
function 생성자명(매개변수1, 매개변수2...){
this.프로퍼티명1 = 값1
this.프로퍼티명2 = 값2
...
this.프로퍼티명n:function(){
프로퍼티가 호출되면 실행할 문장;
...
}
}
const 객체명1 = new 생성자명(값1, 값2,..)✔ 생성자를 이용하여 객체를 만들면...
- new 연산자를 사용하여 객체를 생성하고 초기화할 수 있음
- 객체를 생성할 때 사용하는 함수를 생성자라고 함
- 새롭게 생성되는 객체를 초기화하는 역할
- 같은 형태의 객체를 여러개 생성할 때 유리
- 클래스를 이용
- ECMA Script6에 추가된 객체 생성 방법
- 내부적으로 생성자를 이용한 객체 생성 방법과 동일하게 작동
const 클래스명 = class{
constructor(매개변수1, 매개변수2, ...){
this.프로퍼티명1 = 값1;
this.프로퍼티명2 = 값2;
...
}
매소드명(매개변수1, 매개변수2, ..){
메소드가 호출되면 실행할 문장;
...
}
}
const 객체명1 = new 클래스명(값1, 값2);
const 객체명2 = new 클래스명(값1, 값2);상속
- 클래스 기반의 객체지향 언어와 다름
- 자바스크립트는 프로토타입 기반의 객체지향언어
✔ 프로토타입
- 모든 객체는 프로토타입이라는 객체를 가지고 있음
- 모든 객체는 프로토타입으로부터 프로퍼티와 프로퍼티 메소드를 상속받음
- 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며 상속되는 정보를 제공하는 객체를 프로토타입이라고 함
Math 객체
수학에서 자주 사용하는 상수와 함수들을 미리 구현한 자바스크립트 표준 내장 객체.
min(): 가장 작은 수를 반환. 매개변수가 전달되지 않으면 Infinity를 반환
max(): 가장 큰 수를 반환. 매개변수가 전달되지 않으면 -Infinity를 반환
round(): 소수점 첫번째 자리에서 반올림을 하여 그 결과를 반환
floor(): 소수점을 버림
ceil(): 소수점을 올림
random(): 0보다 크거나 같고, 1보다 작은 무작위 소수를 반환
String 객체
const str1 = 'JavaScript' //객체
const str2 = new String('JavaScript)' //리터럴
str1 == str2 // true
str1 === str2 // falselength: 문자열의 길이를 반환하는 프로퍼티
indexOf(): 특정 문자나 문자열이 처음으로 등장하는 위치를 인덱스로 반환
charAt(): 특정 문자열에서 전달 받은 인덱스에 위치한 문자를 반환
includes(): 특정 문자열에서 전달 받은 문자열이 포함되어 있는지 여부를 반환
substring(): 전달 받은 시작 인덱스부터 종료 인덱스 직전까지의 문자열을 추출
replace(): 원본 문자열의 일부를 전달 받은 문자열로 치환
split(): 구분자를 기준으로 나눈 후 나뉜 문자열을 하나의 배열에 저장
trim(): 문자열의 앞 뒤 공백을 제거
toUpperCase(): 문자열을 모두 대문자로 변환
toLowerCase(): 문자열을 모두 소문자로 변환
Date 객체
날짜, 시간 등을 쉽게 처리할 수 있는 내장 객체
const 상수명 = new Date(); //현재 날짜 시간
const 상수명 = new Date(년 , 월, 일, 시, 분, 초, 밀리초); // 입력한 날짜 시간에 대한 객체연도(year)
2자리로 표기: 예) 23년 -> 1923년으로 인식
4자리로 표기: 예) 2023 -> 2023년
월(month)
0 ~ 11, 예) 0 -> 1월, 11 -> 12월
Data 객체를 생성하는 방법
new Date(): 현재 날짜 시간을 저장한 객체를 생성
new Date('날짜 문자열'): 해당 특정 날짜와 시간을 저장한 객체가 생성
- 예) new date('2023-10-19 00:00:00');
new Date('밀리초'): 1970년 1월 1일 0시 0분 0초를 기준으로 해당 밀리초만큼 지난 날짜와 시간을 저장한 객체가 생성
- 예) new Date('32498723984');
new Date(년, 월, 일, 시, 분, 초, 밀리초): 해당 날짜와 시간을 저장한 객체가 생성
const current_time = new Date(2023,9,19,14,10,);
console.log(current_time);
console.log(`현재 연도: ${current_time.getFullYear()}`);
console.log(`현재 월: ${current_time.getMonth() + 1}`);
console.log(`현재 일: ${current_time.getDate()}`);
console.log(`현재 시간: ${current_time.getHours()}`);
console.log(`현재 분: ${current_time.getMinutes()}`);
console.log(`현재 초: ${current_time.getSeconds()}`);
console.log(new Date(1697691760000));window 객체
웹 브라우저의 창이나 탭을 설정하기 위한 객체들이며, 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현할 수 있음.
setTimeout(): 일정 시간이 지난 후 매개변수로 제공된 함수를 실행
const 상수 = function(){
실행문;
...
}
const st = setTimeout(상수명, 밀리초);clearTimeout()
일정 시간후에 일어날 setTimeout()을 취소함
setInterval()
일정 시간마다 매개변수로 제공된 함수를 실행
clearInterval()
일정 시간마다 일어날 setInterval()을 취소함
✔ 문제
현재 시간을 출력하는 문서를 만들어보자
단, 시작 버튼을 누르면 콘솔에 현재 시간을 초바다 출력하고,
중지 버튼을 누르면 시간이 정지됨, 다시 시작을 누르면 시간이 다시 출력됨)
let si;
function makeClock(){
const date = new Date();
yy = date.getFullYear();
mm = date.getMonth();
dd = date.getDate();
hh = date.getHours();
mm = date.getMinutes();
ss = date.getSeconds();
console.log(`${yy}-${mm}-${dd} ${hh}:${mm}:${ss}`);
}
function start() {
si = setInterval(makeClock, 1000)
}
const end = function() {
clearInterval(si)
}