(17)Javascript_기본문법(3)
사용자 정의 함수(function)
- 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록
- 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있음
- 코드를 재활용
1. 함수 선언식
function 함수명(매개변수1, 매개변수2 ..){
함수가 호출되었을 때 실행할 문장;
...
return 값;
}
함수명(값1, 값2 ...);
2. 함수 표현식(권장)
const 변수명 = function(매개변수1, 매개변수2 ..){
함수가 호출되었을 때 실행할 문장;
...
return 값;
}
변수명(값1, 값2 ...)
디폴트 매개변수
- 매개변수의 값을 설정하는 것
- 매개변수의 값을 정하지 않으면 기본값을 변수에 저장
function 함수명(매개변수1 = 값1, 매개변수2 = 값2 ...){
함수가 호출되었을 때 실행할 문장;
...
return 값;
}
함수명();
함수명(값1, 값2, ...);
나머지 매개변수
생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한 번에 지정할 수 있음
function 함수명(매개변수1, ...매개변수2){
함수가 호출되었을 때 실행할 문장;
...
return 값;
}
함수명(값1, 값2, 값3, 값4, 값5);
호이스팅(hoisting)
- 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
- var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화
- let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화 하지 않음
함수 정의 인터프리팅 결과
func1(); function func1(){
... 함수 호이스팅 ...;
function func1(){ ----> }
...;
} func1();
func2(); let func2;
let func2 = function(){ 변수 호이스팅 func2(); func
...; ----> function func2(){
} ...;
}
화살표 함수
- function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현
- 화살표 함수는 항상 익명
매개변수가 없을 경우
const 함수명 = () => {
함수가 호출되었을 때 실행될 문장;
...
}
const 함수명 = () => 함수가 호출되었을 때 실행될 문장;
매개변수가 있을 경우
const 함수명 = (매개변수1, 매개변수2 ..) => {
함수가 호출되었을 때 실행될 문장;
...
}
const 함수명 = (매개변수1, 매개변수2 ..) => 함수가 호출되었을 때 실행될 문장;
✔ 매개변수가 1개인 경우는 소괄호를 생략할 수 있음
const 함수명 = 매개변수1 => 함수가 호출되었을 때 실행될 문장;
객체(Object)
프로퍼티를 가지고 있는 집합
프로퍼티(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, ...);
...
const 객체명n = new 생성자명(값1, 값2, ...);
- new 연산자를 사용하여 객체를 생성하고 초기화할 수 있음
- 객체를 생성할 때 사용하는 함수를 생성자라고 함
- 새롭게 생성되는 객체를 초기화하는 역할
- 같은 형태의 객체를 여러개 생성할 때 유리
3. 클래스를 이용
- ECMA Script6에 추가된 객체 생성 방법
- 내부적으로 생성자를 이용한 객체 새성 방법과 동일하게 작동
const 클래스명 = class{
constructo(매개변수1, 매개변수2, ...){
this.프로퍼티명1 = 값1;
this.프로퍼티명2 = 값2;
...
}
메소드명(매개변수1, 매개변수2, ...){
해당 프로퍼티가 호출되면 실행할 문장;
...
}
}
const 객체명1 = new 클래스명(값1, 값2, ...);
const 객체명2 = new 클래스명(값1, 값2, ...);
...
const 객체명n = new 클래스명(값1, 값2, ...);
상속
- 클래스 기반의 객체지향 언어와 다름
- 자바스크립트는 프로토타입 기반의 객체 지향 언어
✔ 프로토타입(prototype)
- 모든 객체는 프로토타입이라는 객체를 가지고 있음
- 모든 객체는 프로토타입으로부터 프로퍼티와 프로퍼티 메소드를 상속받음
- 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며 상속되는 정보를 제공하는 객체를 프로토타입이라고 함
const dog = new Dog(); // Dog.prototype, Object.prototype
Math 객체
수학에서 자주 사용하는 상수와 함수들을 미리 구현한 자바스크립트 표준 내장 객체, 비교할 수 없는 값이 포함되어 있으면 NaN을 반환
min(): 가장 작은 수를 반환. 매개변수가 전달되지 않으면 infinite를 반환
max(): 가장 큰 수를 반환. 매개변수가 전달되지 않으면 -infinite를 반환
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(): 전달 받은 시작 인덱스부터 종료 인덱스 바로 직전까지의 문자열을 추출
substr(): 전달 받은 시작 인덱스부터 전달 받은 갯수만큼 문자열을 추출
replace(): 원본 문자열의 일부를 전달 받은 문자열로 치환
split(): 구분자를 기준으로 나눈 후 나뉜 문자열을 하나의 배열에 저장
trim(): 문자열의 앞 뒤 공백을 제거
toUpperCase(): 문자열을 모두 대문자로 변환
toLowerCase(): 문자열을 모두 소문자로 변환
Date 객체
날짜, 시간 등을 쉽게 처리할 수 있는 내장 객체
연도(year)
- 2자리로 연도를 표기: 1900년 ~ 1999년
- 4자리로 연도를 표기: 2000년 ~
월(month)
- 0 ~ 11 ,0(1월),11(12월)
Date 객체를 생성하는 방법
new Date(): 현재 날짜 시간을 저장한 객체가 생성
new Date('날짜 문자열'): 해당 특정 날짜와 시간을 저장한 객체가 생성
new Date('밀리초'): 1970년 1월 1일 0시 0분 0초를 기준으로 해당 밀리초 만큼 지난 날짜와 시간을 저장한 객체가 생성
new Date(년, 월, 일, 시, 분, 초 ,밀리초): 해당 날짜와 시간을 저장한 객체가 생성
window 객체
웹 브라우저의 창이나 탭을 표현하기 위한 객체들이며 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현할 수 있음
window.alert()
window.confirm()
window.prompt()
setTimeout()
일정 시간이 지난 후 매개변수로 제공된 함수를 실행
const 함수명 = function() {
실행문
}
const st = setTimeout(함수명, 밀리초);
clearTimeout()
일정 시간후에 일어날 setTimeout()를 취소함
clearInterval()
일정 시간마다 일어날 setInterval()를 취소함
form 객체
- 일반적인 폼 요소에 접근할 때 사용
- document.forms 컬렉션을 이용해서 접근할 수 있음
<form name = 'myform' id='regform' method = 'post' action='#'>
아이디 : <input type = "text" name = "userid" id = "id"> <br>
비밀번호 : <input type = "password" name = "userpw" id = "pw"> <br>
</form>
폼 접근하기
const frm = document.myform; // name
const frm = document.forms['myform']; // name
const frm = document.forms[0]; // 한 문서의 여러개의 폼 중 첫번째 폼
const frm = document.getElementById('regform'); // id
아이디 입력상자에 접근하기
const userid = frm.userid; // name
const userid = document.forms['myfrom'].elements[0]; // 한 문서의 myform 폼 중 첫번째 요소
const userid = document.forms['myfrom'].elements['userid']; // name
const userid = document.forms['myfrom'].elements[0][0]; // 한 문서의 여러개의 폼 중 첫번째 폼에 첫번째 요소
const userid = document.getElementById('id');