I. Javascript 내장 객체
객체
객체 - 함수와 데이터의 집합
• 자바스크립트에서 객체를 만드는 방법 3가지
1. 객체 리터럴
2. 함수 생성자
3. 클래스
• OOP 는 Object Oriented Programming 의 약어이며 ‘객체지향 프로그래밍’이라고 한다.
객체를 선언하고 객체를 이용해 코드를 작성하는 기법을 이야기 하는 용어이며 자바스크립트 뿐만 아니라대부분의 소프트웨어 언어에서 화자되는 용어이다.
어떤 소프트웨어 언어에서 OOP 를 지원한다는 이야기는 그 언어에서 객체를 선언하고 이용하는 방법을 지원한다는 이야기이며, OOP 문법이라는 것은 객체를 선언하고 이용하기 위한 언어의 문법을 의미한다.
▼ 내장 객체
• 개발자가 직접 객체를 선언해서 필요한 객체를 만들 수도 있고 이미 존재하는 객체를 이용할 수도 있다.
애플리케이션을 개발하면서 이미 존재하는 객체를 내장 객체라고 한다.
내장 객체는 애플리케이션을 개발하기 위한 소프트웨어 언어에서 제공되는 객체일 수도 있고 그 애플리케이션을 실행시켜 주는 플랫폼에서 제공되는 객체일 수도 있다.
• 자바스크립트 소프트웨어 언어에서 제공되는 객체일 수도 있으며 프런트 웹 애플리케이션이라면 브라우저에서 제공되는 객체일 수도 있고 반대로 백앤드 애플리케이션이라면 Node.js 에서 제공되는 객체일 수도 있다.
Array
▼ 배열
• 배열은 여러 개의 데이터를 하나의 변수로 활용하기 위한 프로그래밍 기법이며
자바스크립트에서는 Array타입의 객체이고 배열을 이용한다는 것은 객체를 선언하고
그 객체에 여러 개의 데이터를 담아 이용하겠다는 의미이다.
▼ 배열 객체 선언 – [ ] 표기법
• 배열 객체를 선언하고 싶다면 대괄호( [ ] )을 이용하면 된다.
[ ] 으로 배열 객체를 선언하면서 콤마( , )를 구분자로 여러 데이터를 [ ] 안에 추가한다.
//[] 기법으로 배열 선언
let product1 = ['book1', 'book2']
let product2 = []
//instanceof - 연산자 true/false
//왼쪽 객체가 오른쪽 타입인가?
console.log(product1 instanceof Array)//true
console.log(product2 instanceof Array)//true
//new Array() 로 배열 선언
let product3 = new Array('book3', 'book4')
let product4 = new Array()//빈 배열 객체..
console.log(product3 instanceof Array)//true
console.log(product4 instanceof Array)//true
▼ 배열 데이터 개수 파악
• 배열에는 여러건의 데이터가 담기는데 경우에 따라
몇 개의 데이터가 저장되어 있는 것인지 알아야 하는 경우가 있고 이를 위해 length 프로퍼티를 제공한다.
▼ 배열 데이터 획득
• 배열의 데이터를 획득하는 가장 기본적인 방법은 [ ]에 데이터의 위치인 인덱스를 명시해서 획득하는 것이다.
▷ forEach()
• 배열에 데이터를 저장된 순서대로 하나하나 획득해서 로직을 실행시키려면 forEach() 함수를 이용할 수도있다.
• forEach() 의 매개변수에는 함수를 지정해야 하며, 배열의 개수만큼 함수가 반복적으로 호출된다.
• 함수가 호출될대 첫번째 매개변수에는 배열의 데이터, 두번째 매개변수에는 데이터의 인덱스 값이 전달되게 된다.
▼ 배열 데이터 수정
• 배열에 저장된 데이터를 수정하는 가장 기본적인 방법은 [ ] 로 데이터의 위치를 지정하고
그 위치에 새로운값을 대입해서 수정하는 방법이다.
▼ 배열 데이터 추가
• push() 함수를 이용해 배열에 데이터를 추가하면 배열의 마지막 위치에 데이터가 추가된다.
//length
//. : 객체.멤버(변수,함수)
//. : 객체 멤버 접근 연산자..
console.log(product1.length)
//배열 객체가 가지고 있는 모든 데이터를 순차적으로 획득해서 로직을 돌리고 싶다..
//for loop
for(let i = 0; i < product1.length; i++){
console.log(`array[${i}] = ${product1[i]}`)
}
//forEach
//매개변수에 전달한 개발자 함수를 배열의 갯수만큼 호출..
//호출하면서 순차적으로 배열에 담긴 데이터 - index 를 개발자 함수의 매개변수에
product1.forEach((value, index) => {
console.log(`array[${index}] = ${value}`)
})
//배열 데이터 수정.
product1[0] = 10
product1[1] = 20
console.log(product1)//(2) [10, 20]
//배열에 데이터 추가.
product1.push(30)
product1.push(40)
console.log(product1)//(4) [10, 20, 30, 40]
배열의 함수들
▷ concat()
• 두 배열을 결합시켜 새로운 배열을 만들어 주는 함수
let array1 = [10, 20]
let array2 = [30, 40]
//두 배열 데이터를 합쳐서 새로운 배열로 만들기
let array3 = array1.concat(array2)
console.log(array3)//(4) [10, 20, 30, 40]
▷ join()
• 배열의 데이터를 하나로 묶어서 문자열로 만드는 함수
• 각 데이터를 구분할 문자열을 join() 함수의 매개변수로 구분해 준다.
//배열의 모든 데이터를 구분자로 결합해서 하나의 문자열로 만들기.
let result1 = array3.join('a')
console.log(result1)//10a20a30a40
▷ push(), unshift()
• 배열에 데이터를 추가하는 함수는 push() 와 unshift() 가 있다.
• 두 함수의 차이는 추가되는 위치이고 push() 함수는 마지막 위치에 데이터가 추가되며
unshift() 는 맨 처음 위치에 데이터가 추가된다.
• push(), unshift() 함수의 매개변수에 지정한 데이터가 배열에 추가되는데
한꺼번에 여러 개의 데이터를 추가할 수도 있다.
//배열에 데이터 추가, 맨뒤, 맨앞.
array3.push(100)
array3.unshift(200)
console.log(array3)//(6) [200, 10, 20, 30, 40, 100]
//한꺼번에 여러개 추가 가능.
array3.push(1000, 2000)
array3.unshift(3000, 4000)
console.log(array3)//(10) [3000, 4000, 200, 10, 20, 30, 40, 100, 1000, 2000]
▷ pop(), shift()
• 배열에 있는 데이터를 제거하기 위해 pop(), shift() 함수가 제공된다.
두 함수의 차이는 제거되는 데이터의 위치로
pop() 함수는 배열의 마지막 데이터가 제거되며 shift() 는 맨앞의 데이터가 제거 된다.
//배열에 데이터 삭제, 맨앞, 맨뒤.
array3.pop()
array3.shift()
console.log(array3)//(8) [4000, 200, 10, 20, 30, 40, 100, 1000]
▷ splice()
• 중간 특정 위치에 데이터를 추가하거나, 제거 혹은 교체해야 하는 경우가 있다 이때 사용되는 함수가splice() 이다.
• splice() 함수는 매개변수로 배열의 특정 위치를 지정하고 그 위치에 데이터를 추가, 제거, 교체할 수 있는 함수이다
.
▷ – splice() – 데이터 추가
• splice() 함수의 첫번째 매개변수에 데이터가 추가되어야 하는 위치를 인덱스로 지정하고
두번째 매개변수에 0 을 지정한다.
• splice() 함수의 두번째 매개변수는 교체하고자 하는 데이터 개수인데 이 값을 0으로 지정하면
교체하는 데이터 개수가 0 임으로 기존의 데이터는 변경되지 않고 데이터 추가만 된다.
//splice - 추가.
//매개변수 : 인덱스 - 갯수 - 데이터
let array = [10, 20, 30, 40]
//갯수를 0으로 하면 삭제 데이터 없다는 의미이다. 결국 추가.
array.splice(2, 0, 'hello')
console.log(array)//(5) [10, 20, 'hello', 30, 40]
▷ splice() – 데이터 여러 개 추가
• splice() 함수를 이용해 특정 위치에 데이터 여러 개를 한꺼번에 추가할 수 있고
이때는 추가하고자 하는 데이터를 세번째 매개변수부터 여러 개를 나열하면 된다.
//여러개 추가.
array.splice(2, 0, 'one', 'two')
console.log(array)//(7) [10, 20, 'one', 'two', 'hello', 30, 40]
▷ splice() – 데이터 교체
• splice() 의 두번째 매개변수가 교체되는 데이터 개수이며 1로 지정하면 1개를 교체하게 되며
2라고 지정하면 2개를 한꺼번에 교체하게 된다.
//교체. 갯수에 0 이상의 숫자. 그 갯수만큼 삭제후 추가.
array.splice(2, 3, 'html', 'css', 'js')
console.log(array)//(7) [10, 20, 'html', 'css', 'js', 30, 40]
▷ splice() – 데이터 삭제
• slice() 함수는 배열의 데이터를 획득할 때 사용된다.
• slice() 를 사용하면 두개의 인덱스를 지정하고 그 인덱스 사이의 데이터 여러 개여 한꺼번에 획득할 수 있다.
• slice() 에 의해 획득되는 데이터가 여러 개임으로 slice() 는 획득한 데이터를 배열로 반환한다.
//삭제. 추가하는 데이터를 지정하지 않으면 된다.
array.splice(2, 3)
console.log(array)//(4) [10, 20, 30, 40]
▷ – slice()
• 만약 slice() 함수를 이용하면서 매개변수를 1개만 지정하게 되면
그 인덱스 위치의 데이터부터 오른쪽의 모든 데이터가 획득되게 된다.
//slice 위치지정하고 여러개 획득할때. 여러개임으로 반환값은 배열.
//데이터 획득
let result2 = array.slice(1, 4)
console.log(result2)//(3) [20, 30, 40]
//숫자를 하나만 지정하면 그 위치부터 나머지 다.
let result3 = array.splice(2)
console.log(result3)//(2) [30, 40]
▷ – filter()
• filter() 함수는 배열의 데이터 중 조건에 맞는 데이터만 추출하고자 할 때 사용하는 함수이다
filter() 의 매개변수에 함수가 지정되고 이렇게 되면 배열의 개수 만큼
순차적으로 매개변수에 지정된 함수가 호출되게 되고 매개변수의 함수에서
true 를 반환하는 데이터만 추출해서 결과를 반환한다.
▷ every()
• every() 함수는 배열의 데이터가 특정 조건에 모두 만족하는 데이터인지를 판단하기 위해서 사용된다.
매개변수에 함수를 지정하고 그 함수에 배열의 데이터가 순차적으로 전달되며 결과는 true/false 가 반환되며
함수의 반환 값이 모두 true 이면 최종 every() 함수의 최종 결과 값이 true 이며 하나라도 false 를 반환하면every() 함수의 최종 결과 값은 false이다.
let array = [11, 3, 20, 15, 5]
//배열 데이터 중에서 10보다 큰 수만
let result = array.filter((value) => {
//filter 함수는 조건을 명시하기 이해서 사용. 이 함수의 리턴값은 true/false
//ture 가 리턴되는 value 만 모아서 전달한다.
return value > 10
})
console.log(result)//(3) [11, 20, 15]
//배열의 데이터가 모두 조건에 만족하는지? 최종 결과는 true/false
result = array.every((value) => {
//every 에 지정한 함수의 반환 값은 조건 판단임으로 true/false
return value > 4
})
console.log(result)//false
▷ map()
• map() 함수는 배열의 데이터로 특정 로직을 실행하고 그 결과를 다시 모아서 반환할 때 사용되며
배열의 데이터가 3개라면 최종 반환되는 배열의 데이터도 3개이다.
▷sort 정렬
//sort. 정렬. 내림차순 정렬. 작은거 먼저.
//정렬 알고리즘은 개발자 알고리즘. 함수로 매개변수 지정.
//정렬을 하려면 두 데이터중 어느것이 큰지에 대한 판단이 있어야.
//매개변수 두개.
result = array.sort((data1, data2) => {
//반환 값은 1, 0, -1
//1 : data1 이 data2 보다 크다.
//0 : 두 데이터가 동일
//-1 : data2 가 data1 보다 크다.
if(data1 > data2) return 1
else if(data1 == data2) return 0
else return -1
})
console.log(result)//(5) [3, 5, 11, 15, 20]
//오름차순.
result = array.sort((data1, data2) => {
if(data1 > data2) return -1
else if(data1 == data2) return 0
else return 1
})
console.log(result)//(5) [20, 15, 11, 5, 3]
▼ Date
• 시간/날짜 데이터는 애플리케이션에서 이용할 때 다양한 형태로 이용되며 다양한 연산이 필요한데
이를 도와주기 위한 자바스크립트 내장 객체가 Date 이며
이 Date 의 다양한 함수를 이용해 시간/날짜를 이용하게된다.
▷ Date() 객체 이용하기
• Date 객체는 new 를 이용하여 생성합니다. 생성된 Date 객체의 데이터는 현재 시간이다.
• 시간을 한국어를 적용해서 출력하고 싶다면 toLocaleString() 이라고 지정한다.
• new Date() 로 객체를 생성하면 현재 시간의 데이터를 가지는 객체가 생성되는데
만약 특정 시간을 설정하고 싶다면 매개변수에 시간을 지정해 준다.
//현재 시간/날짜.
//new - 객체 생성(선언) 연산자. 모든 객체는 new 로 생성해야 한다.
let date1 = new Date()
console.log(date1.toString())
console.log(date1.toLocaleString())
//특정 시간을 지정해서 객체 생성.
let date2 = new Date('2024-09-19 10:14:10')
console.log(date2.toLocaleString())//2024. 9. 19. 오전 10:14:10
//월 데이터는 0부터 시작, 0이 1월
let date3 = new Date(2024, 9-1, 19, 10, 10, 10)
console.log(date3.toLocaleString())//2024. 9. 19. 오전 10:10:10
▷ 원하는 데이터만 추출 하고자 할 때
• Date 객체가 가지는 시간 날짜 데이터중 원하는 데이터만 추출하기 위한 함수를 제공한다.
- getFullYear() : 년도를 반환
- getMonth() : 월을 반환, 0이 1월
- getDate() : 일을 반환
- getDay() : 요일을 반환, 0이 일요일
- getHours() : 시간을 반환
- getMinutes() : 분을 반환
- getSeconds() : 초를 반환
- getTime(): 타임스템프값 반환
//특정 데이터만 추출.
console.log('year', date1.getFullYear())//2024
console.log('month', date1.getMonth())//8
console.log('date', date1.getDate())//19
console.log('day', date1.getDay())//4
console.log('seconds', date1.getSeconds())//54
console.log('timestamp', date1.getTime())//1726708854450
• 또한 Date 객체를 비교해 어느 객체의 시간이 더 이전 시간인지를 판단하는 경우도 많다.
두 Date 객체의 데이터를 비교하는 여러가지 방법이 있지만 타임스템프 값을 비교해서
어느 시간이 더 이른 시간인지를 판단할 수 있다.
//date 비교
//이벤트 시간 가정
let eventStartDate = new Date('2024-09-01T00:00:00')
let eventEndDate = new Date('2024-09-30T23:59:59')
//예약시간
let regDate = new Date('2024-10-19T14:00:00')
//비교
if(regDate.getTime() < eventStartDate.getTime()){
console.log('예약하신 시간은 이벤트 시작 전입니다.')
}else if(regDate.getTime() > eventEndDate.getTime()){
console.log('예약하신 시간은 이벤트 종료 후 입니다.')
}else {
console.log(`${regDate.toLocaleString()}로 예약이 완료 되었습니다.`)
}
▼ Math
• 수학과 관련된 다양한 작업이 필요하며 이를 도와주기 위한 Math 라는 내장객체를 제공한다.
- Math.PI – 원주율 값을 가지는 프로퍼티
- Math.abs() – 절대값을 반환하는 함수
- Math.ceil() – 올림 값을 반환하는 함수
- Math.floor() – 내림 값을 반환하는 함수
- Math.round() – 반올림 값을 반환하는 함수
- Math.max() – 최대값을 구하는 함수
- Math.min() – 최소값을 구하는 함수
- Math.pow() – 제곱근을 구하는 함수
- Math.random() – 난수를 구하는 함수
• Math 객체의 함수 중 가장 많이 사용되는 함수는 난수 발생 함수이며
난수 발생은 Math.random() 함수를 이용하며 발생하는 난수는 0 과 1 사이의 실수 값이다.
//round 반올림
console.log(Math.round(0.56))//1
console.log(Math.round(1))//1
console.log(Math.round(1.1))//1
console.log(Math.round(-0.56))//-1
console.log(Math.round(-1.1))//-1
//ramdom, 0~1 사이의 실수
console.log(Math.random())//0.8390870996625084
//0~100 사이의 난수
console.log(Math.random() * 100)//79.04249092089498
//51~70사이의 난수
let max = 70
let min = 51
console.log(Math.random() * (max - min) + min)
//min, max
console.log(Math.min(39, 45, 21, 60))//21
console.log(Math.max(39, 45, 21, 60))//60
//배열에 숫자 데이터가 있다. 배열의 데이터중 min, max
let array = [39, 45, 21, 60]
//1 : rest parameter - 함수의 마지막 매개변수를 rest parameter 로 선언
//2 : spread operator - 배열의 데이터를 전체 나열할때
//array => 39, 45, 21, 60
console.log(Math.min(...array))//21
console.log(Math.max(...array))//60
'BootCamp Review' 카테고리의 다른 글
| 2024.09.20-23 (Day 11, 12) - JavaScript Implicit Object 3 (0) | 2024.09.23 |
|---|---|
| 2024.09.19-20 (Day 10,11) - JavaScript Implicit Object 2 (0) | 2024.09.20 |
| 2024.09.12 (Day 8) - JavaScript Event Programming (0) | 2024.09.12 |
| 2024.09.11 (Day 7) - JavaScript Scope 와 Hoisting (0) | 2024.09.12 |
| 2024.09.11 (Day 7) -JavaScript Function (0) | 2024.09.11 |