JavaScript DAY3

호이스팅(hoisting)

- 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
- var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화
- let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않음

함수                                         
fucn1();                                    인터프리팅 결과   
                        함수 호이스팅          fucntion func(){
    function func1(){  ---------->          ....;
        ...;                                }
    }                                       func1();

익명함수 에러 발생
func2();                                    let func2();
                        변수 호이스팅           func2();
let func2 = function(){ ---------->
    ....;                                   function func2(){
}                                           ....;
                                            }

 

화살표 함수

- fucntion 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현
- 화살표 함수는 항상 익명

매개변수가 없을 경우
const 상수 = () => {
    함수가 호출 되었을 때 실행될 문장;
    ...
}

const 상수 = () => 함수가 호출되었을 때 실행될 문장;

매개변수가 있을 경우
const 상수 = (매개변수1, 매개변수2, ... ) => {
    함수가 호출 되었을 때 실행될 문장;
    ...
}

const 상수 = (매개변수1, 매개변수2, ...) => 함수가 호출되었을 때 실행될 문장;


✓ 매개변수가 1개인 경우

const 상수 = 매개변수1 => 함수가 호출되었을 때 실행될 문장;
(소괄호를 생략할 수 있음)

 

객체(object)

하나의 주제를 가지고 관련있는 프로퍼티(property)를 가지고 있는 집합

 

프로퍼티(property)

- 이름과 값으로 구성된 정렬되지 않은 집합
- 프로퍼티는 함수도 저장할 수 있음 -> 프로퍼티 메서드

 

★객체를 생성하는 방법

1. 리터럴 표기법

const 객체명 = {
        프로퍼티명1:값1, 
        프로퍼티명2:값2, 
        ...
        프로퍼티명n:function(){
            프로퍼티가 호출되면 실행할 문장;
            ...
        }
    }

 

2. 생성자를 이용

- 객체를 만드는 함수

    function 생성자명(매개변수1, 매개변수2, ...){
        this.프로퍼티명1 = 값1;
        this.프로퍼티명2 = 값2;
        ...
        this.프로퍼티명n = function(){
            프로퍼티가 호출되면 실행할 문장;
            ...
        }
    }

    const 객체명1 = new 생성자명(값1, 값2, ...);
    const 객체명2 = new 생성자명(값1, 값2, ...);

✓ 생성자를 이용하여 객체를 만들면 ...

- new 연산자를 사용하여 객체를 생성하고 초기화할 수 있음
- 객체를 생성할 때 사용하는 함수를 생성자라고 함

- 새롭게 생성되는 객체를 초기화하는 역할
- 같은 형태의 객체를 여러개 생성할 때 유리

 

3. 클래스를 이용

- 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, ...);

 

상속

- 클래스 기반의 객체지향 언어와 다름
- 자바스크립트는 프로토타입 기반의 객체지향언어

 

프로토타입(prototype)

- 모든 객체는 프로토타입이라는 객체를 가지고 있음
- 모든 객체는 프로토타입으로부터 프로퍼티와 프로퍼티 메소드를 상속받음
- 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며 상속되는 정보를 제공하는 객체를 프로토타입이라고 함

    const dog = new Dog(); // Dog.prototype, object.prototype 2개 혹은 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; //false

length : 문자열의 길이를 반환하는 프로퍼티
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월

Date 객체를 생성하는 방법
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(년, 월, 일, 시, 분, 초, 밀리초) : 해당 날짜와 시간을 저장한 객체가 생성

 

window 객체

웹 브라우저의 창이나 탭을 설정하기 위한 객체들이며, 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현할 수 있음

    window.alert()
    window.confirm()
    window.prompt()

setTimeout()
일정 시간이 지난 후 매개변수로 제공된 함수를 실행

    const 상수명 = function() {
        실행문;
        ...
    }

    const st = setTimeout(상수명, 밀리초);

clearTimeout()
일정 시간후에 일어날 setTimeout()을 취소함

setInterval()
일정 시간마다 매개변수로 제공된 함수를 실행

clearInterval()
일정 시간마다 일어날 setInterval()을 취소함