Javascript 정리(7)
✅ Number
👉 Math.round
반올림 함수 (소숫점이 5 이상이면 올림)
console.log(Math.round(2.5)); // 3 console.log(Math.round(2.49)); // 2 console.log(Math.round(2)); // 2 console.log(Math.round(2.82)); // 3
🚩 '멜론' 앱에서 사람들이 노래 평점을 매길 때, 별 0~5개 중에 선택해야 한다면, 모든 사람들의 점수를 더해 평균을 내면 소수점이 나올 수 있다(평균 3.56)
이럴 때Math.round
함수를 사용하여 반올림 한 값을 낼 수 있다.
👉 Math.floor
내림 함수 (소숫점은 다 없앰)
console.log(Math.floor(2.5)); // 2 console.log(Math.floor(2.49)); // 2 console.log(Math.floor(2)); // 2 console.log(Math.floor(2.82)); // 2
👉 Math.ceil
올림 함수 (소숫점은 다 올림)
console.log(Math.ceil(2.5)); // 3 console.log(Math.ceil(2.49)); // 3 console.log(Math.ceil(2)); // 2 console.log(Math.ceil(2.82)); // 3
🚀 Math객체 관련 참고 site
https://www.w3schools.com/js/js_math.asp
👉 랜덤함수
⛵ Math.random();
let randomNumber = Math.random(); console.log(randomNumber);
⏩ 0.00000000000에서 0.99999999999 사이의 값에서 랜덤수를 제공
⛵ Math.floor();
var randomNumber = Math.random(); console.log(Math.floor(randomNumber*10));
⏩ randomNumber*10 의 값은
1의 자리수
에 엄청 긴 소수자리로 이루어져 있다.
ex) 9.697009826327621
❗Math.random
과Math.floor
를 활용하여 0~10사이의 랜덤수를 구할 수 있다
✨✨ 로또, 이벤트 당첨자 등을 뽑을 때 유용하게 사용
⛵ min <= randomNumber(정수) <= max
// 최댓값, 최솟값 포함 function randomNumber(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; //최댓값도 포함, 최솟값도 포함 }
⛵ min <= randomNumber(정수) < max
// 최솟값 포함, 최댓값 미포함 function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; //최댓값은 제외, 최솟값은 포함 }
/* 최소(min), 최대값(max)을 받아 그 사이의 랜덤수를 return하는 함수를 구현해주세요. */ function randomNumber (min, max) { let randomNum = Math.random(); return Math.floor(randomNum*(max-min+1))+min; //최댓값도 포함, 최솟값도 포함 } randomNumber (5,9);
✅ Object
- 객체는
{ }
(중괄호)로 감싸져 있다- property 이름은 중복될 수 없다.
property 이름
과property 값
사이에:
(콜론)으로 구분한다.쉼표로 분리
된 목록의 형태(property를 추가할 때는,
(쉼표)를 붙여준다.)- property 값에는 어느 type이나 가능하다(string, number, array, object, function..)
⏩ 다시 말하면 객체는이름과 값으로 구성된 프로퍼티들의 집합
이다.
👉 객체의 property값에 접근
방법(1) 마침표(.)
연산자를 사용
접근하려는 객체명은 왼쪽에, 프로퍼티명은 오른쪽에 위치.
방법(2) 대괄호([])
를 사용
접근하려는 객체명은 왼쪽에, 프로퍼티명은 쌍따옴표("")와 함께 대괄호 안에 작성.
❗ 대괄호 안에는 변수
가 들어갈 수 있다.
let plan1 = { name: "Basic" }; // 방법(1) 마침표를 사용하여 속성값에 접근 console.log(plan1.name); // 방법(2) 대괄호를 사용하여 속성값에 접근 console.log(plan1["name"]); let plan1 = { name: "Basic" }; let propertyName = "name"; // 방법(2) 대괄호를 사용하여 속성값에 접근(변수가 들어갈 수 있기때문) console.log(plan1[propertyName]); let myObj = { property1: "hello", // 속성값으로 숫자(Number) property2: [1,2,3,4,5], // 속성값으로 배열(object) property3: { // 속성값으로 함수(object) childproperty: "haha" } }; let name = "property"; console.log(myObj[name+"1"]); // =console.log(myObj[property1] = "hello" 출력 console.log(myObj[name+"2"]); // =console.log(myObj[property2] = "[1,2,3,4,5]" 출력 console.log(myObj[name+"3"]); // =console.log(myObj[property3]) = "{ childproperty: "haha" }" 출력 console.log(myObj[name+"3"]["child"+name]); // =console.log(myObj[property3][childproperty]) = "haha" 출력 console.log(myObj.property1); // 'hello' console.log(myObj.property2); // [1,2,3,4,5] console.log(myObj.property3); // { childproperty: 'jaja' } console.log(myObj.property3.childproperty); // 'haha'
/* - 인자로 받은 데이터를 조합해서, 구조를 바꿔서 리턴합니다. - getData에 배열 세 개를 인자로 넘길 것이고, 이 배열 세 개를 조합해서 하나의 새로운 객체를 만들 것입니다. - getData는 세 개의 배열을 인자로 받는 함수입니다. - salesArr: 날짜별 판매량 - ex) [["20190401", 34], ["20190402", 23], ["20190403", 29]] - reviewArr: 날짜별 리뷰수 - ex) [["20190328", 3], ["20190401", 0], ["20190403", 1]] - likeArr: 날짜별 좋아요수 - ex) [["20190328", 98], ["20190401", 102], ["20190403", 125]] 위의 예시로 보여드린 배열은 단지 예일뿐, 날짜별 판매량 배열은 365일치 요소가 들어있을 수도 있습니다. 객체는 프로퍼티명으로 바로 접근 가능하니까, 날짜만 알면 반복문을 돌지 않아도 바로 데이터를 얻을 수 있습니다. 그래서 객체의 형태로 데이터 구조를 바꾸려는 것입니다. 다음 요구사항을 충족하는 객체를 만들어서 return 해주세요. objData가 갖고 있는 property는 3개 입니다. - sumAmount: 총 판매량 - sumReview: 총 리뷰개수 - sumLike: 총 좋아요수 */ const salesArr = [["20190401", 34], ["20190402", 23], ["20190403", 29]] const reviewArr = [["20190328", 3], ["20190401", 0], ["20190403", 1]] const likeArr = [["20190328", 98], ["20190401", 102], ["20190403", 125]] let salesSum = 0 for (let i=0; i<salesArr.length; i++) { salesSum += salesArr[i][1] } let reviewSum = 0 for (let i=0; i<reviewArr.length; i++) { reviewSum += reviewArr[i][1] } let likeSum = 0 for (let i=0; i<likeArr.length; i++) { likeSum += likeArr[i][1] } const objData = { sumAmount : salesSum, sumReview : reviewSum , sumLike : likeSum }
✅ includes ( ) 메소드
👉 includes ( )
배열
또는 문자열
이 특정 요소를 포함하고 있는지 확인하는 메소드.
❗ 문자나 문자열을 비교할 때, includes()
는 대소문자를 구분
👉 fromIndex
arr.includes(valueToFind, fromIndex)
◾ 문자열에서 찾기 시작하는 위치를 나타내는 인덱스 값. 기본값은 0. 어떤 정수라도 가능.
◾ 만약 fromIndex
값이 음의 정수이면 전체 문자열을 찾게 된다.
◾ fromIndex가 배열의 길이보다 같거나 크면(fromIndex >= str.length) false
반환.
◾ valueToFind 값을 찾을 수 없으면 -1
반환
string.includes ( searchString, length ) // searchString: 검색할 문자열로 필수요소. 대소문자 구분함 // length: 검색을 시작할 위치. 선택요소로써 값이 없으면 전체 문자열을 대상으로 한다.
'abzcd'.includes('z') // true 출력 ('abzcd'가 'z'를 포함하는지 검사) 'abzcd'.includes('z', 2) // true 출력 ('zcd'가 'z'를 포함하는지 검사) 'abzcd'.includes('z', 3) // false 출력 ('cd'가 'z'를 포함하는지 검사) 'abzcd'.includes('Z', 3 ) // false 출력 (대소분자를 구분하므로 대문자'Z'는 없기때문에 false. const arr = [1,2,3]; console.log(arr.includes(2)); // true 출력 const pets = ['cat', 'dog', 'bat']; console.log(pets.includes('cat')); // true 출력 console.log(pets.includes('at')); // false 출력 [1, 2, 3].includes(2); // true (2가 존재) [1, 2, 3].includes(4); // false (4가 존재) [1, 2, 3].includes(3, 3); // false (전체 문자열은 2번째 까지이므로 3은 전체 문자열보다 크기 때문에 false) [1, 2, 3].includes(3, -1); // true (fromIndex값이 음의 정수이면 전체 문자열에서 찾는다. 3이 있으므로 true) [1, 2, NaN].includes(NaN); // true
✅ switch 문
👉 조건 제어문에 속한다 (cf. if 문
) 그러나 if 문은 조건식에 부등식(<,<=,>,>=)이 사용되지만 switch문은 오직 ==만 비교할 수 있다
.
❗ if문은 조건식이 true일 경우에 block이 실행된다고 하면, switch문은 비교할 변수가 어떤 값을 가지냐에 따라 실행문을 선택
한다.)
switch (변수) { case 값1 : 실행문; break; case 값2 : 실행문; break; default : 실행문; }
❗ switch문은 괄호 안의 (변수)의 값과 동일한 값을 갖는 case로 가서 실행문을 실행시킨다. (case실행 후 break이 되어 switch문이 종료된다)
만약 괄호안의 (변수)의 값과 동일한 값의 case가 존재하지 않다면 default로 가서 실행문을 실행시킨다(default는 생략 가능
)
let score = 80; switch (score/10) { case 9 : console.log("A등급 입니다"); break; case 8 : console.log("B등급 입니다"); break; case 7 : console.log("C등급 입니다"); break; case 6 : console.log("D등급 입니다"); break; default : console.log("F등급 입니다"); } // "B등급 입니다" 출력
switch (new Date().getDay()) { case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; } // 현재 오늘 요일을 반영하여 해당하는 case에서 break;
/* class 생성을 연습해보겠습니다. - MyMath라는 class를 생성해주세요. - constructor에서는 숫자 2개를 인자로 받아 프로퍼티로 저장합니다. - 총 4개의 메서드를 구현해주세요. - getNumber: 두 개의 숫자가 무엇인지 배열로 반환하는 메서드 ex) [1, 2] - add: 두 개의 숫자를 더하는 메서드 - substract: 두 개의 숫자를 빼는 메서드 - multiply: 두 개의 숫자를 곱하는 메서드 */ class MyMath { constructor(a,b) { this.getNumber = [a,b], this.add = a+b, this.substract = a-b, this.multiply = a*b } } let result = new MyMath(3,2) console.log(result) // 출력결과 : // MyMath { // getNumber: [ 3, 2 ], // add: 5, // substract: 1, // multiply: 6, // __proto__: MyMath { constructor: ƒ MyMath() } // }
✅ Array methods
👉 arrow function을 가장 많이 사용할 때는 call back
함수로 사용할 때이다.
❗ 콜백함수
란, 인자로 전달되는 함수를 뜻함.
👉 Array.map ( 콜백함수 )
map 메소드는 배열을 반복해 준다. callback함수에서 return한 값으로 각각의 요소를 수정해준다.
map 매소드의 return값은 수정된 값으로 다시 생성된 배열이다.
const arr = [1,2,3]; arr.map( (e) => { return e * e; } ) // [1, 4, 9] 출력(기존 arr의 배열은 그대로 두고, 새로운 배열 출력)
❗ Array 타입의 데이터 요소 갯수 만큼 반복한다(각각의 요소를 전부 새로운 배열로 return)
❗ 수정하고 싶은대로 map 메소드 안에 로직을 구현하고 return해주면 된다
👉 Array.forEach ( 콜백함수 )
forEach
는 for
대신 사용하는 반복문이다.
map과 가장 큰 차이는, forEach함수 자체가 return하지 않는다는 것이다. 그냥 forEach 함수를 탈출하고 싶을 때 return을 사용하면 된다.
그래서 forEach로 전달되는 콜백함수에서도 return하는 것이 없다. 단지 for문 대신 사용하는 반복 method일 뿐이다.
let empty = []; let names = ['a', 'ab', 'cbb', 'ada']; names.forEach(el => { if (el.includes('a')) { empty.push(el); } }); console.log(empty) // 출력결과 : [ 'a', 'ab', 'ada' ]
Author And Source
이 문제에 관하여(Javascript 정리(7)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kirin/replit-Javascript-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)