[목차]
01. 내장객체
💡
new 연산자를 활용하여 생성자 함수를 호출하여 객체를 생성한다.
➡️ const 변수 = new 생성자함수();
02. 날짜
💡
날짜 정보를 가지고 오거나, 날짜 관련 작업이 필요할 때 쓰인다.
기본 날짜 정보를 사용자의 컴퓨터 기준으로 날짜 정보로 가지고 온다.
➡️ const 변수 = new Date();
[코드예제] 내장객체(날짜)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>내장객체</title> <link rel="icon" href="data:,"> </head> <body> <h1>내장객체</h1> - 문자, 날짜, 배열, 수학 개체 등이 있다. <br> - 주로 new 연산자를 활용하여 객체화 한다. <br> <h2>날짜 내장객체</h2> - 날짜 정보를 얻거나, 날짜 정보에 관련된 작업을 할때 쓰인다. <br> - 날짜의 정보는 사용자의 컴퓨터의 시간을 참조한다. <br> - 구문 : let date = new Date(); <br> - 1000의 정수값은 1초이다. <br> <script type="text/javascript"> const date1 = new Date(); const date2 = new Date('2023-04-20 10:00:00'); const date3 = new Date('2023/04/20'); const date4 = new Date(2023, 3, 32); console.log(date1); console.log(date2); console.log(date3); console.log(date4); </script> <h3>날짜객체 메서드 종류</h3> <script type="text/javascript" // 실습1. 오늘 날짜를 '2023년 00월 00일 (요일)' 이라고 출력하시오. const formatNum = num => (num < 10) ? `0${num}` : num; const formatDate = paramDate => { const dayArr = ['일', '월', '화', '수', '목', '금', '토']; let year = paramDate.getFullYear(); let month = formatNum(paramDate.getMonth()+1); let date = formatNum(paramDate.getDate()); let day = dayArr[paramDate.getDay()]; let result = `${year}년 ${month}월 ${date}일 (${day}요일)`; return result; } const today = new Date(); let print = formatDate(today); console.log(print); // 실습2. 오늘 날짜에서 25일이 지난 날짜를 위의 포맷 방식으로 출력하시오. today.setDate(today.getDate()+25); print = formatDate(today); console.log(print); </script> </body> </html>
03. 수학
💡
최댓값, 반올림, 최솟값 등 산술 연산자로 구할 수 없는 값을 구할 수 있는 객체이다.
종류
➡️ 절댓값 : Math.abs(숫자);
➡️ 소숫점 반올림 : Math.round(숫자);
➡️ 소숫점 올림 : Math.ceil(숫자);
➡️ 소숫점 내림 : Math.floor(숫자);
➡️ 소숫점 2번째 자리 반올림 : Math.round(숫자 * 10) / 10;
[코드예제] 내장객체(수학)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>내장객체</title> <link rel="icon" href="data:,"> </head> <body> <h2>수학 객체</h2> - 난수, 반올림, 내림, 올림, 절댓값 등의 기능을 가진 객체 <script> // 절대값 let digit1 = -10; console.log(Math.abs(digit1)); // 반올림 (소수점 첫째자리만) // 소수점 둘째자리 반올림시 기존의 값에 10을 곱하고 // 반올림 후 반올림한 값을 10으로 나누어 처리한다. let digit2 = 10.45; console.log(Math.round(digit2*10)/10); // 올림 let digit3 = -10.1; console.log(Math.ceil(digit3)); // 내림 Math.floor vs parseInt console.log(Math.floor(digit3), '<--Math.floor'); console.log(parseInt(digit3), '<--parseInt 소수점 절삭'); // 난수 추출 Math.random() 1~45 1게임 : 6 // 실습1. 로또 번호 추출 (중복번호 없이) const lotto = []; for(let i = 0; i < 6; i++) { let num = Math.floor(Math.random()*45)+1; // 난수 발생 1~45 let isContain = false; // 로또배열의 요소에 난수 포함여부 확인 // 반복문을 통해서 로또의 담긴 요소의 일치 여부 확인 for(let checkNum of lotto) { // 로또 배열요소와 난수와 일치시 if(num == checkNum) { isContain = true; // 포함 i -= 1; break; } } if(isContain) continue; // if(lotto.includes(num)) { // i -= 1; // continue; // } // 배열에 찾는 값이 있으면 인덱스 반환, 없으면 -1 // if(lotto.indexOf(num) > -1) { // i -= 1; // continue; // } lotto.push(num); } console.log(lotto); </script> </body> </html>
04. 배열
💡
하나의 데이터 저장소를 쪼개서 데이터를 저장할 수 있는 객체이다.
여러 개의 값을 순차적으로 나열한 자료구조이다.
➡️ const arr = new Array();
종류
➡️ arr.isArray(값)
👉🏻배열인지 아닌지 확인, ture/false 반환➡️ arr.indexOf(값) / (값, 값)
👉🏻전달된 요소를 검색해서 인덱스 반환 두번째 인수는 검색을 시작할 인덱스➡️ arr.push(’값’)
👉🏻인덱스 마지막에 삽입, 배열의 길이 반환➡️ arr.unshift(’값’)
👉🏻인덱스 제일 앞자리에 삽입, 배열의 길이 반환➡️ arr.pop()
👉🏻인덱스 마지막 자리 제거, 제거한 요소 반환➡️ arr.shift()
👉🏻인덱스 0번째 자리 제거, 제거한 요소 반환➡️ arr.concat(값)
👉🏻인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환➡️ arr.join()
👉🏻원본 배열을 모두 문자열로 변환한 후 인수로 전달받은 구분자로 연결한 문자열을 반환- 기본 구분자는 콤마
➡️ arr.splice(시작인덱스, 제거할 요소수, 삽입할 요소)
👉🏻원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 사용- arr.splice(1, 2, 30, 40) → 인덱스 1부터 2개 요소를 제거하고 그 자리에 새로운 요소 30, 40을 삽입
- 제거한 요소 배열로 반환
➡️ arr.slice(복사할 시작 인덱스, 복사 종료할 인덱스)
👉🏻인수로 전달된 범위의 요소들을 복사하여 배열로 반환- arr.slice(0, 1) → 0번째 부터 1번째 미만까지 복사
- 원본 배열은 바뀌지 않는다.
➡️ arr.flat
👉🏻인수로 전달할 깊이만큼 재귀적으로 배열을 평탄화원본 배열을 바꾸지 않는다.
- arr.flat(Infinity) → 모두 평탄화
➡️ arr.sort()
👉🏻배열의 요소를 정렬(오름차순)- -1 : 작은수부터, +1 : 큰 수 부터, 0 : 정렬안함
- arr.sort((a, b) ⇒ a - b); → 오름차순, 반환값이 0보다 작으면 a를 우선 정렬
- arr.sort((a, b) ⇒ b - a); → 내림차순
➡️ arr.map(ele ⇒ ele)
👉🏻자실을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출- 콜백 함수의 반환 값들로 구성된 새로운 배열을 반환
- 원본 배열을 바꾸지 않는다.
➡️ arr.filter(num ⇒ num%2 == 1)
👉🏻콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환➡️ arr.forEach((요소, 인덱스) ⇒ 요소 인덱스)
👉🏻배열의 요소만큼 반복(순회) 구문
[코드예제] 내장객체(배열)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>내장객체</title> <link rel="icon" href="data:,"> </head> <body> <h2>배열 객체</h2> - 하나의 저장소의 공간을 나누어 데이터를 저장하는 객체 <br> - 배열의 요소의 주소는 index이며, 0번 부터 시작한다. <br> - 배열객체의 메서드 종류 <br> 1) push() -> 인덱스 마지막 부터 데이터 저장과 인덱스 자동 증가 <br> 2) unshift() -> 인덱스 0번째에 데이터 저장 (데이터 밀림) <br> 3) pop() - > 배열의 마지막 번째 데이터 제거 <br> 4) shift() -> 인덱스 0번째 데이터 제거 (데이터 당김) <script> const arr1 = new Array(3); console.log(arr1); arr1.push(3); console.log(arr1); // ... : 배열의 확장연산자(스프레드), [...arr] 깊은복사 const arr2 = [100,[10,20],200,300,400]; const arr3 = [...arr2]; console.log(arr2 == arr3); console.log(arr2[1] == arr3[1]); // 배열안의 객체는 주소를 복사한다. // ...arr2 배열안에 있는 값을 출력 console.log(...arr2); console.log(arr3.join(', ')); // 배열 여부확인(배열일 경우 true반환, 배열이 아닐경우 false반환) let result = Array.isArray(arr1); console.log(`arr1의 배열여부확인 ${result}`); result = Array.isArray(date1); console.log(`date1의 배열여부확인 ${result}`); // 배열 요소 인덱스반환 - [해당배열].indexOf(차증려는 요소값) // 요소가 있으면 : 배열 요소의 인덱스 반환 // 요소가 없으면 : -1 반환 // if(arr.indexOf(값) > -1) = arr.includes(값) result = arr2.indexOf(100); console.log(`arr2배열에 100요소 있는지 검증한후 인덱스 반환 ${result}`); result = arr2.indexOf(600); console.log(`arr2배열에 600요소 있는지 검증한후 인덱스 반환 ${result}`); // push and pop // stack 자료구조 사용(last in frist out) result = arr2.push(600); console.log(`arr2배열에 600요소 추가후 배열의 길이반환 ${result}`); result = arr2.pop(); console.log(`arr2배열에 마지막요소를 삭제한 후 삭제된 요소반환 ${result}`); // unshift and shift const arr4 = [1, 2, 3, 4]; result = arr4.unshift(100, 200); console.log(arr4); console.log(`arr4배열의 앞부분에 100,200 요소 추가후 배열의 길이반환 ${result}`); result = arr4.shift(); console.log(`arr4배열의 첫번째 요소를 삭제한 후 삭제된 요소반환 ${result}`); // concat : 2개의 배열을 하나로 합치고 새로운 배열을 반환 (순수함수 : 기존배열을 훼손시키지 않음) const arr5 = [1, 2]; const arr6 = [3, 4]; result = arr5.concat(arr6); console.log(arr5); console.log(result, '새로운 배열 반환'); console.log(`arr5배열과 arr6배열을 합치고 새로운 배열을 반환 ${result}`); // splice (시작할 인덱스, 제거할 요소 수, 추가할 요소...) // 메소드 호출 후 제거한 요소가 담긴 배열로 반환 const arr7 = [1, 2, 3, 4]; result = arr7.splice(2, 1, 100, 200); // 2번째 인덱스에서 1개 삭제 후 100, 200 추가 console.log(arr7); console.log(result, '제거한 요소가 담긴 배열 반환'); result = arr7.splice(1, 0, 300, 400); // 배열 중간에 요소 삽입 console.log(arr7); console.log(result); // slice (복사를 시작할 인덱스, 종료 인덱스 미만) const arr8 = [1, 2, [100, 200], 3, 4]; result = arr8.slice(1, 3); console.log(result, '새로운 배열 반환'); // 인수가 없을 시 새로운 배열을 반환하여 요소 복사 // 복사하는 요소가 객체타입일 경우 얕은 복사 const copyArr = arr8.slice(); console.log(arr8); console.log(copyArr); console.log(copyArr == arr8); // 새로운 배열을 생성한거라 false // flat 배열의 평탄화 (인수가 없을 시에는 default 1) const arr9 = [1, [2, [3, [4]]]]; result = arr9.flat(); console.log(result, '새로운 배열로 반환'); result = arr9.flat(2); console.log(result, '배열의 깊이가 2인 배열 평탄화'); result = arr9.flat(Infinity); console.log(result, '배열에 담긴 모든 배열 평탄화'); // reverse 배열의 요소 순서를 거꾸로 바꾼 후 반환 const arr10 = [1, 2, 3, 4]; result = arr10.reverse(); console.log(arr10); console.log(result); // 고차함수 계열 // sort const arr11 = [40, 100, 1, 5, 2, 25, 10]; arr11.sort((a, b) => a - b); // 오름차순 정렬 console.log(arr11); arr11.sort((a,b) => b - a); // 내림차순 정렬 console.log(arr11); const arr12 = ['일길동', '이길동', '삼길동', '사길동', '오길동']; arr12.sort(); // 문자 요소가 있는 배열일 경우 인수없이 오름차순 정렬 // arr12.reverse(); 내림차순 정렬 console.log(arr12); arr12.sort((a,b) => (b > a) ? 1 : ((a > b) ? -1 : 0)); // b가 a보다 크면 1로 큰 수부터 정렬 // 아니라면 (a > b) ? -1 : 0 로 가서 다시 한번 더 체크(중복확인) // a가 b보다 크면 -1로 작은 수부터 정렬 아니라면 0으로 정렬 안함 console.log(arr12); // map 요소 수대로 순회하면서 콜백함수를 실행 // return 된 값을 새로운 배열에 담아 반환 const arr13 = [ {course : 'ks47', name : '일길동'}, {course : 'ks47', name : '이길동'} ]; const nameArr = arr13.map(function(ele) { return ele.name; }); const nameArr1 = arr13.map(ele => ele.name); console.log(arr13); console.log(nameArr); console.log(nameArr1); /* // 원형객체에 프로토타입 생성(map 비슷하게) Array.prototype.mapLike = function(callback){ const returnArr = []; for(let ele of this) { let returnValue = callback(ele); returnArr.push(returnValue); } return returnArr; } const arrEx = [1, 2, 3, 4]; const mapArr = arrEx.mapLike(function(ele) { if(ele > 2) return ele+1; }); console.log(mapArr); */ // filter 콜백함수의 return ture(해당요소반환), false(반환하지 않음) const arr14 = [1, 2, 3, 4, 5]; result = arr14.filter(num => (num % 2 == 1)) console.log(result, '필터 메소드 사용'); /* // 원형객체에 프로토타입 생성(filter 비슷하게) Array.prototype.filterLike = function(callback) { const returnArr = []; for(let ele of this) { if(callback(ele)) returnArr.push(ele); } return returnArr; } const filterArr = [1, 2, 3, 4, 5].filterLike(ele => (ele%3==1)); console.log(filterArr); */ // foreach 배열의 요소만큼 (순회)반복구문 const arr15 = [1, 2, 3, 4]; result = arr15.forEach((ele, idx) => console.log(`요소:${ele}, 인덱스:${idx}`)); console.log(result); // 리턴값 없음 Array.prototype.forEachLike = function(fn) { for(let i = 0; i < this.length; i++) { let ele = this[i]; let idx = i; fn(ele, idx); } } arr15.forEachLike((ele, idx) => console.log(`요소:${ele}, 인덱스:${idx}`)); </script> </body> </html>
05. 문자열
💡
문자열을 생성하면 문자열 객체
➡️ 문자열 객체를 생성하면 문자열 메서드와 속성을 사용 가능
종류
➡️ length : 문자열 크기
➡️ indexOf(’찾을 문자열’) : 인수값에 해당되는 문자열을 찾아 인덱스값 반환, 일치하는 문자열이 없다면 -1 값 반환
➡️ lastIndexOf(’찾을 문자열’) : 문자열 오른쪽부터 인수값에 해당되는 문자열을 찾아 인덱스값 반환, 일치하는 문자열이 없다면 -1값 반환
➡️ substring(인덱스, 인덱스) : 첫번째 인수 인덱스 값부터 두번째 인덱스값 까지 문자열을 잘라 반환
➡️ split(’검색문자열’) : 인수값에 해당되는 문자열 기준으로 문자열을 쪼개 배열로 반환
➡️ replace(’검색문자열’, ‘새로운 문자열’)
➡️ trim() : 앞뒤 공백 제거
[코드예제] 내장객체(문자열)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>내장객체</title> <link rel="icon" href="data:,"> </head> <body> <h2>문자열 객체</h2> - 문자열을 생성하면 문자열 객체이다. - 문자열을 생성하면 문자열 객체의 메서드를 사용 할 수 있다. <script type="text/javascript"> let str = '가나다라마바사'; // 유사배열이므로 배열의 메소드를 활용할 수 없다. /** * str.foreach(function(item, idx) { * console.log(item); * }) */ // indexOf : 찾으려는 문자열의 첫번째 인덱스 번호를 반환한다. let str1 = 'ksmart47'; result = str1.indexOf('rt4'); console.log(result); if(str1.indexOf('ksmart') > -1) console.log('ksmart문자열 포함'); // lastIndexOf : 찾으려는 문자열의 대상 문자열 뒤부터 찾아 // 인덱스번호 반환 let str2 = 'ksmart47ksmart'; result = str2.indexOf('ksmart'); console.log(result, 'indexOf 앞에서'); result = str2.lastIndexOf('ksmart'); console.log(result, 'lastIndexOf 뒤에서'); // match 문자열을 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 찾은 문자를 반환 let str3 = 'ksmart'; result = str3.match('r'); console.log(result); result = str3.match('z'); console.log(result, '없는 문자열은 null 반환'); // replace 문자열을 왼쪽부터 검색한뒤 두번째 인수값으로 교체 let str4 = 'ksmart47ksmart'; result = str4.replace('ksmart', '한국스마트정보교육원'); console.log(str4); console.log(result, '문자열 왼쪽부터 검색 후 교체하고 다음 작업은 안함'); // search 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 // 제일 먼저 일치하는 인덱스번호를 반환한다. let str5 = 'ksmart47 홍길동'; result = str5.search('홍길동'); console.log(result); result = str5.search('이길동'); console.log(result, '-1 반환'); // substring : (시작할 인덱스, 종료 인덱스) let str6 = 'ksmart47'; result = str6.substring(6, str6.length); console.log(result, '시작 ~ 종료(미만)으로 문자열 자름'); // substr : (시작할 인덱스, 추출할 문자갯수) result = str6.substr(6, 2); console.log(result); // split(구분자) 문자 -> 배열 let str7 = '한국스마트정보교육원'; result = str7.split(); console.log(result); result = str7.split(''); result.forEach(ele => console.log(ele)); console.log(result); result = str7.split('트'); console.log(result); // String은 유사배열이기에 length 프로퍼티를 가진다. let str8 = 'ksmart'; console.log(str8.length); // trim : 좌, 우에 해당되는 공백만 제거 let str9 = ' 한국 스마트 정보교육원 '; result = str9.trim(); console.log(result); // 전체 문자열의 공백 제거 result = str9.split(' '); console.log(result.join('')); </script> </body> </html>
06. 내장객체 실습
[코드예제] 실습
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>내장객체 실습</title> <link rel="shortcut icon" href="#" type="image/x-icon"> </head> <body> <h1>내장객체 - 날짜객체 실습</h1> <h2>실습1</h2> 실습. 아래에 선언된 날짜 객체에서 이틀 후의 날짜 정보로 변경하여 결괏값을 출력하시오. 2023-02-28 <!-- 출력: 2023년 03월 02일 (목) --> <script type="text/javascript"> const dayArr = ['일', '월', '화', '수', '목', '금', '토'] const numFormat = num => num < 10 ? `0${num}` : `${num}`; const dateFormat = returnDate => { let year = returnDate.getFullYear(); let month = returnDate.getMonth(); let date = returnDate.getDate(); let day = dayArr[returnDate.getDay()]; let result = `${year}년 ${numFormat(month)}월 ${numFormat(date)}일 (${day})`; return result; } const returnDate = new Date(2023, 4, 2); returnDate.setDate(returnDate.getDate()+2); let result = dateFormat(returnDate); console.log(result); </script> <h2>실습2</h2> 실습. 오늘 날짜에서 2023-04-01 날의 차이를 계산하도록 하시오. <!-- 입력하신 날짜는 20일 이후 날짜입니다. --> <!-- 입력하신 날짜는 20일 이전 날짜입니다. --> <script type="text/javascript"> const currentDay = new Date(); const targetDate = new Date('2023-04-01'); result = parseInt((currentDay - targetDate)/1000/60/60/24); let print = ''; if(result >= 0) { print += `입력하신 날짜는 ${Math.abs(result)}일 이후 날짜입니다.`; } else { print += `입력하신 날짜는 ${Math.abs(result)}일 이전 날짜입니다.`; } console.log(print); </script> <h2>실습3</h2> 실습. 아래의 배열에 날짜정보가 담겨있다 오늘 날짜 보다 큰 날짜 객체의 정보는 몇개인지 출력하시오. <script type="text/javascript"> const dateArray = [ new Date('2022-06-21'), new Date('2023-07-25'), new Date('2022-11-25'), new Date('2021-12-21'), new Date('2024-07-22') ]; const today2 = new Date(); const tommorow = new Date(); // for문 // let count = 0; // for(let date of dateArray) { // let diff = parseInt((today2 - date)/1000/60/60/24); // if(diff < 0) count += 1 // } // console.log(count); let filterArr = dateArray.filter(date => date > today2); let mapArr = filterArr.map(ele => dateFormat(ele)); console.log(`날짜 : ${mapArr.join(' | ')}\n갯수 : ${mapArr.length}`); </script> <h1>문자열 객체 실습</h1> <h2>실습4</h2> 실습. 아래의 회원 중 금암동에 사는 회원의 이름을 출력하시오. <script type="text/javascript"> const userArray = [ {userName : '홍길동', userAddr : '전주시 덕진동 227'}, {userName : '고길동', userAddr : '전주시 서노송동 88'}, {userName : '유관순', userAddr : '전주시 덕진동 1길 774'}, {userName : '이순신', userAddr : '전주시 반월동 3길 55'} ] let arrFilter = userArray.filter(userInfo => userInfo.userAddr.match('덕진동')); let name = arrFilter.map(nameInfo => nameInfo.userName); console.log(name.join()); const filterArry = userArray.filter(userInfo => (userInfo.userAddr.indexOf('덕진동') > -1)); console.log(filterArry); const nameArr = filterArry.map(nameInfo => nameInfo.userName); console.log(nameArr.join()); </script> <h2>실습5</h2> 실습. 아래의 메일 주소가 담긴 배열이 있다. 메일 주소의 문자열을 활용하여 사이트의 명을 찾아 출력하도록 하시오. (abc@naver.com -> naver) <script type="text/javascript"> const mailArray = [ 'abc123@naver.com', 'abc456@daum.net', 'ksmart@gmail.com', 'ksmart123@hot.co.kr' ] console.log('최종 결괏물 -> ', 'naver, daum, gmail, hot'); const mail = mailArray.map(mailInfo => mailInfo.split('@')[1].split('.')[0]); console.log('최종 결괏물 -> ', mail.join(', ')); const domainNameArr = mailArray.map(email => email.substring(email.indexOf('@')+1, email.indexOf('.'))); console.log('최종 결괏물 -> ', domainNameArr.join(', ')); </script> <h2>실습6</h2> 실습. 아래의 url과 결괏물을 확인하고 최종 결괏물이 나올 수 있도록 코드를 완성하시오. <script type="text/javascript"> // http : 통신 // url : 폴더구조 // uri : 파일의 개념이 아니다. let myUrl = 'http://localhost:8080/user/userList?userCode=00001&userNum=10'; // 출력물 // {userCode : 00001, userNum : 10} let param = myUrl.substring(myUrl.indexOf('?')+1); console.log(param); let paramArr = param.split('&'); console.log(paramArr); const urlInfo3 = {}; paramArr.forEach((item, index) => { const dataArr = item.split('='); console.log(dataArr); urlInfo3[dataArr[0]] = dataArr[1]; }); console.log(urlInfo3); // 출력물 // [{userCode : 00001}, {userNum : 10}] let param1 = myUrl.substring(myUrl.indexOf('?')+1); console.log(param); let paramArr1 = param1.split('&'); console.log(paramArr1); let paramMap = paramArr1.map(ele => { const urlInfo = {}; const dataArr = ele.split('='); urlInfo[dataArr[0]] = dataArr[1]; return urlInfo; }); console.log(paramMap); </script> </body> </html>
tag : #javascript #내장객체 #날짜 #수학 #배열 #문자열
Uploaded by N2T