빅데이터 부트캠프 80일차

※ 렌더링 = HTML,CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정

함수 정의

1. 선언식

function 함수명(인자) {실행식}

※ JS에서는 Java와 다르게 정의된 인자수 보다 초과되는 인자를 입력해도 초과되는 인자가 무시되어 실행됨

ex) function add(x, y){return x+y} => add(2,5) = add(2,5,9) = 7

 

2. 표현식

let 함수명 = function(인자) {실행식}

 

3. 화살표 함수 (표현식에서 function 대신 => 입력)

let 함수명 = (인자) => {실행식}

※ 일반적으로 화살표 함수로 함수 정의를 하는 추세

 

즉시 실행 함수

- 함수가 정의되자마자 바로 실행되도록 설정하는 방법

- 함수의 실행식{} 다음에 (인자)를 한번 더 입력한 뒤 전체적인 함수의 정의를()로 감싸주면 적용 

ex) function add(x, y){return x+y} => (function add(x, y){return x+y}(x, y))

 

생성자 함수와 객체

- Java와 마찬가지로 사용자 정의 생성자 함수 생성시 실행문에 this를 활용하여 입력해주면 나중에 new로 객체 생성한 후 .인자/메소드명을 통해 해당 인자/메소드를 호출할 수 있음

 

- [delete 객체명.요소명]을 통해 객체에서 해당 요소 제거 가능

ex) function Car() {this.color= 'blue', this.price = 20000, this.start = () => {console.log('start');}}car1 = new Car() console.log(car1.color) = 콘솔 창에 'blue' 출력, car1.start() = 콘솔 창에 'start' 출력

 

ex) function Student(name, grade) {this.name = name, this.grade = grade}student1 = new Student('Mike', 'junior')console.log(student1.name) = 콘솔 창에 'Mike' 출력, console.log(student1.name) = 콘솔 창에 'junior' 출력 

 

얕은 복사, 깊은 복사

- 객체.assign(객체1, 객체2, 객체3,...) = 객체 1에 나머지 객체들 병합(깊은 복사, 주소 참조 X)

- 등호(=)를 이용한 복사 = 얕은 복사(주소 참조 O)

 

호이스팅(hoisting) 

- 변수/함수 선언 전에 해당 변수/함수와 관련된 명령을 실행하는 것

- 변수의 경우 var는 hoisting 적용 가능(undefined), const/let은 hoisting 적용 불가능(error)

- 함수의 경우 선언식은 hoisting 적용 가능(정상 실행), 표현식은 hoisting 적용 불가능(error)

 

Number 타입 관련 함수

- isFinite() = 해당 숫자 데이터가 유한수일때 true 반환
- isInteger() = 해당 숫자 데이터가 정수일때 true 반환
- isNaN() = 해당 숫자 데이터가 NaN일때만 true 반환
- toFixed() = 해당 숫자 데이터의 반올림 값 반환
- toString() = 숫자를 문자열로 변환

 

Math

- 수학적인 상수와 함수를 위한 내장 객체
- abs() = 절대값 표현
- round() = 반올림 정수
- ceil() / floor() = 소수점 이하의 올림 정수 / 내림 정수
- random() = 0 ~ 1까지 임의의 수를 생성(0은 포함, 1은 미포함)
- max() / min() = 가장 큰 수 / 작은 수 반환

 

Date

- 날짜&시간 데이터 타입

- 객체 생성 => new Date(년, 월, 일, 시, 분, 초, 밀리초) 

- getFullYear() = 해당 날짜의 연도(4자리) 반환

- getDay() = 해당 날짜의 요일 반환 (1:월, 2:화, 3:수, ...)

- toDateString() = 해당 데이터에서 날짜만 문자열로 반환

- toTimeString() = 해당 데이터에서 시간만 문자열로 반환 

- parse() = 해당 텍스트 데이터를 date 밀리초 데이터로 변환

(밀리초가 아닌 날짜로 나타내려면 new Date(Date.parse()) 사용)

 

간단한 데이터 타입 변환 방법

문자열로 변환

- 해당 데이터 뒤에 + '' 입력하면 해당 데이터의 타입이 String으로 변환됨

숫자로 변환

- 해당 데이터 앞에 + 입력하면 해당 데이터의 타입이 Number로 변환됨

 

Falsy

- 항상 거짓으로 평가되는 값

- false, null, undefined, 0, NaN, ''

 

단축평가

- true && value => value 반환
- true || value => true 반환
- false && value => false 반환
- false || value => value 반환

- a && b => b 반환

- a || b => a 반환

 

정규식 (re)

- . = 임의의 문자 1개

- [] = [] 안에 있는 문자들을 or로 연결하여 적용

- ^를 [] 바깥에 입력 =  ^다음으로 입력된 텍스트로 시작, ^를 [] 안에 입력 = ^다음으로 입력된 텍스트 제외

ex) /^https/ = https로 시작하는 텍스트, /[^0-9]/ = 숫자 제외

- $ = 해당 텍스트로 끝남 

ex) /com$/ = com으로 끝나는 텍스트

- ? = 앞에 있는 텍스트가 1번이라도 나오든 안나오든 적용

- + = 앞에 있는 텍스트가 최소 1번이라도 나오는지

- \D = 숫자 제외, \d = 숫자 포함

- \s = 띄어쓰기, 공백

 

문자열 기본 함수

- indexOf() = 지정 문자열을 검색하여 첫번째 결과값의 인덱스를 반환
- includes() = 지정 문자열을 검색하여 존재하는 경우 true 반환
- startsWith() / endsWith() = 지정 문자열로 시작/끝 여부를 반환
- charAt() = 지정 인덱스의 문자열 반환
- substring() = 지정한 범위만큼 문자열 반환
- slice() = substring과 같음(단, slice는 음수 사용 가능)
- toUpperCase() / toLowerCase() = 대상 문자열을 모두 대/소문자로 변경
- replace() = 지정한 문자열을 원하는 문자열로 변경
- split() = 지정 문자열을 기준으로 모두 분리하여 배열로 반환