13. function - 여러 인자
문제
index.js에서 meetAt 함수를 만들어주세요.
- 인자를 세개 받습니다.
- 첫번째 인자는 년도에 해당하는 숫자입니다.
- 두번째 인자는 월에 해당하는 숫자입니다.
- 세번째 인자는 일에 해당하는 숫자입니다.
- 년도 인자만 받았을 경우 →
"1234년"과 같은 형식의 문자열을 리턴 해주세요. - 년도,월 인자를 받았을 경우 → 년도와 월을 조합해서
"1234년 5월"과 같은 형식의 문자열을 리턴 해주세요. - 년도,월,일 인자를 전부 받았을 경우 → 년도,월,일을 조합해서
"1234/5/6"과 같은 형식의 문자열을 리턴 해주세요.
meetAt(2022); // 결과 --> "2022년"
meetAt(2032, 3); // 결과 --> "2032년 3월"
meetAt(1987, 10, 28); // 결과 --> "1987/10/28"풀이
function meetAt(year, month, date) {
let todayYear = year;
let todayMonth = month;
let todayDate = date;
if (todayDate) {
return `${todayYear}/${todayMonth}/${todayDate}`;
}
if (todayMonth) {
return `${todayYear}년 ${todayMonth}월`;
}
if (todayYear) {
return `${todayYear}년`;
}
}
// ✅ Date 를 먼저 해야만 하는 이유는 ?
// 위에서 아래로 계산하니까 빡빡한 조건을 위로 (정확한 조건 )
// if ()가 true라면, 진실이라면16. for 문
문제
findSmallestElement 함수를 구현해 주세요.
-
findSmallestElement의arr인자는 숫자 값으로만 이루어진 배열입니다. -
arr의 값들 중 가장 작은 값을 리턴 해주세요. -
만일
arr가 비어있으면 0을 리턴 해주세요. -
예를 들어, 다음과 같은 배열이 인자(input)으로 들어왔다면 1이 리턴 되어야 합니다.
[20, 200, 23, 1, 3, 9]
풀이
function findSmallestElement(arr) {
let result = arr[0];
if (arr.length === 0 ) {
return 0;
}
for (let i = 1;i < arr.length; i++){
if(result > arr[i]){
result = arr[i];
}
}
return result;
}
function smallNumber(arr) {
let small = arr[0];
if (arr.length === 0) {
return 0;
}
for(i = 1; i < arr.length; i++ ) {
if (small < arr[i]) {
}
else {
small = arr[i];
}
} return small;
}
smallNumber([20, 200, 23, 1, 3, 9])17.배열 조작하기
문제
divideArrayInHalf 함수를 다음과 같이 구현해주세요.
-
divideArrayInHalf함수는 array를 인자로 받습니다. 이 array는 숫자 값으로 만 구성되어 있으며 총 5개의 요소(element)들로 구성되어 있습니다. -
divideArrayInHalf함수는 인자로 들어온 array 로 부터 새롭게 구성된 배열 result 을 리턴합니다. -
array 요소들 중 10과 같거나 작은 값의 요소들은 result의 맨 앞으로, 10보다 큰 값의 요소들은 result의 맨 뒤로 재구성된 배열을 리턴 해주세요.
-
재구성이 되는 순서는 array의 맨 뒤 요소부터 맨 앞 요소까지 입니다. 즉, 배열의 뒷 요소 부터 재구성을 진행해주세요.
-
예를 들어, 인자로 들어오는 array가 다음과 같을 때,
[1, 20, 10, 5, 100]result 배열이 만들어 지는 순서는 다음과 같습니다.
-
[100]
-
[5, 100]
-
[10, 5, 100]
-
[10, 5, 100, 20]
-
[1, 10, 5, 100, 20]
따라서 아래와 같은 result가 리턴 되어야 합니다.
[1, 10, 5, 100, 20]
풀이
-
function divideArrayInHalf(array) {
let newArr = [];
// for (let i = 0; i < array.length; i++ ) {
for (let i = array.length - 1; i >= 0; i-- ) {
if (array[i] <= 10) {
newArr.unshift(array[i]);
} else {
newArr.push(array[i]);
}
}
return newArr;
}
19 String
문제
String의 slice() 는 자주 사용 되는 문자열 메소드 중 하나 입니다.
먼저 slice 에 대한 설명을 가볍게 읽어봅시다 👉 slice설명
그 후 sliceCityFromAddress 함수를 구현해 주세요.
-
sliceCityFromAddress함수는address를 인자로 받습니다. -
address는 주소를 나타내는 string 입니다. -
주어진 주소가 어느 도시 인지를 찾아 해당 주소에서 도시 부분만 삭제한 새로운 주소를 리턴해 주세요.
-
도시는 무조건 "시" 로 끝납니다. 예를 들어, "서울시".
-
"도" 와 "시" 는 주소에 한번 밖에 포함되어 있지 않습니다.
-
예를 들어, 다음과 같은 주소가 주어졌다면;
"경기도 성남시 분당구 중앙공원로 53"다음과 같은 값이 리턴되어야 합니다:
"경기도 분당구 중앙공원로 53"
풀이
function sliceCityFromAddress(adress) {
const city = adress.indexOf('시');
const space = adress.indexOf(' ');
const doo = adress.indexOf('도');
if (doo !== -1) {
const first = adress.slice(0, doo+1)
const last = adress.slice(city + 2, adress.length);
return `${first} ${last}`;
}
if (doo === -1) {
const qw = adress.slice(city + 2);
console.log(qw);
return `${qw}` ;
}
}
sliceCityFromAddress("서울특별시 강남구 테헤란로 123-23");
sliceCityFromAddress("경기도 성남시 분당구 중앙공원로 53");21. 날짜와 시간
문제
만으로 계산한 나이를 구하는 함수인 getWesternAge 함수를 구현해 봅시다.
-
이 함수는
birthday라는 인자를 받습니다. -
이
birthday는Date객체 입니다.birthday라는 인자를 넣었을 때, 현재를 기준으로 만으로 계산한 나이를 리턴 해주세요. -
birthday는 string이 아닌Date객체라는 걸 명심하세요 :) -
예를 들어, 오늘이 2020년 7월 21일이고,
birthday값이 다음과 같다면:1990-03-21T00:45:06.562Z리턴 값은 30 이 되어야 합니다.
풀이
function getWesternAge(birthday) {
let today = new Date();
let myBirthday = birthday;
let age = today.getFullYear() - myBirthday.getFullYear();
if (
(myBirthday.getMonth() > today.getMonth()) ||
((myBirthday.getMonth() === today.getMonth())&&( myBirthday.getDate() > today.getDate()))
) {
return age - 1;
} else {
return age;
}
}Object
문제
**getData함수는 세 개의 배열을 인자로 받습니다.**salesArr: 날짜별 판매량- ex)
[["20190401", 34], ["20190402", 23], ["20190403", 29]]
- ex)
reviewArr: 날짜별 리뷰수- ex)
[["20190328", 3], ["20190401", 0], ["20190403", 1]]
- ex)
likeArr: 날짜별 좋아요수- ex)
[["20190328", 98], ["20190401", 102], ["20190403", 125]]
- ex)
- 위의 예시로 보여드린 배열은 단지 예시일 뿐, 날짜별 판매량 배열은 365일치 요소가 들어있을 수도 있습니다.
- 왜 각각 세 개의 배열을 하나의 객체로 구조를 바꿔야 할까요?
위의 배열에서 4월 1일에 판매량, 리뷰수, 좋아요 수를 확인하려면 세 개의 배열을 각각 for문으로 반복해서 날짜를 확인해야 하므로 좋은 구조의 데이터라고 할 수 없습니다. (날짜가 365일이라고 하면, 세 개의 배열이 각자 365번 돌아야 하니까요) - 그래서 세 개의 배열을 사용하기 좋게 객체로 바꿀 것입니다. 객체는 프로퍼티명으로 바로 접근 가능하니까, 날짜만 알면 반복 문을 돌지 않아도 바로 데이터를 얻을 수 있습니다. 그래서 객체의 형태로 데이터 구조를 바꾸려는 것입니다.
- 다음 요구사항을 충족하는 객체를 만들어서 return 해주세요.
- 리턴되는 객체가 갖고 있는 property는 3개 입니다.
sumAmount: 총 판매량sumReview: 총 리뷰개수sumLike: 총 좋아요수
풀이
방법 1
function getData(salesArr, reviewArr, likeArr) {
let newObj = {};
let sumS = 0;
let sumR = 0;
let sumL = 0;
for (let i = 0; i < salesArr.length; i++) {
sumS = sumS + salesArr[i][1];
newObj.sumAmount = sumS;
}
for (let i = 0; i < reviewArr.length; i++) {
sumR += reviewArr[i][1];
newObj.sumReview = sumR;
}
for (let i = 0; i < likeArr.length; i++) {
sumL += likeArr[i][1];
newObj.sumLike = sumL;
}
return newObj ;
}조금 더 깔끔한 방법 2
function getData(salesArr, reviewArr, likeArr) {
let salesNum = 0;
let reviewNum = 0;
let likeNum = 0;
for (let i = 0; i < salesArr.length; i++) {
salesNum += salesArr[i][1];
}
for (let i = 0; i < reviewArr.length; i++) {
reviewNum += reviewArr[i][1];
}
for (let i = 0; i < likeArr.length; i++) {
likeNum += likeArr[i][1];
}
let allAcount = {};
allAcount.sumAmount = salesNum;
allAcount.sumReview = reviewNum;
allAcount.sumLike = likeNum;
return allAcount;
}25. Class
문제
class 생성을 연습해보겠습니다.
MyMath라는 class를 생성해주세요.constructor에서는 숫자 2개를 인자로 받아 프로퍼티로 저장합니다.- 총 4개의 메서드를 구현해주세요.
getNumber: 두 개의 숫자가 무엇인지 배열로 반환하는 메서드 → ex) [1, 2]add: 두 개의 숫자를 더하는 메서드substract: 두 개의 숫자를 빼는 메서드multiply: 두 개의 숫자를 곱하는 메서드
풀이
class MyMath {
constructor(a, b) {
this.a = a;
this.b = b;
}
getname() {
let arr = [];
arr.push(this.a);
arr.push(this.b);
return arr;
}
add() {
return this.a + this.b;
}
substract() {
return this.a - this.b;
}
multiply() {
return this.a * this.b;
}
}
const math = new MyMath(1, 2);
console.log(math);
console.log(math.add);Object-접근하기
문제
getAnswer 함수를 구현해 주세요.
-
getAnswer 함수는 아래의 객체에서 '샐러드' 라는 값을 출력합니다.
let myProfile = { name: '김개발', address: { email: 'geabal@gmail.com', home: '위워크' }, 'my favorite': { food: [{ name: '샐러드', price: 3500 }, { name: '삼겹살', price: 15000 }], hobby: ['축구'] } }
풀이
function getAnswer() {
const salad = myProfile["my favorite"].food[0].name;
return salad;
}
getAnswer();28 다시 풀기
29 Array Method(map, foreach)
32 DOM
문제
index.js에 아래의 내용을 구현해주세요.
p태그를 생성하고 (hint:createElement),- 해당 요소에 dom 이라는 class 이름을 주고 (hint:
className) - 해당 요소에 "DOM" 이라는 텍스트를 넣어서 (hint:
innerHTML) h1요소 내부에 추가 (hint:appendChild)
.title {
color: red;
}풀이
const p = document.createElement("p");
const h1 = document.querySelector('h1')
p.className = "dom";
p.innerHTML = "DOM"
h1.appendChild(p);33. Event
문제
이벤트가 발생하면 실행될 함수에 아래의 기능을 만들어주세요.
input#re-password에keyup이벤트를 추가해주세요.input#password와input#re-password의value속성을 통해 input에 작성된 값을 가져오고,- 서로 같은지 아닌지 확인해서 같지 않다면
<p>태그의.alert클래스에"비밀번호가 일치하지 않습니다"라는 문구를 넣어주세요.- 서로 비밀번호가 같다면
""빈 문구를 넣어주시면 됩니다.
풀이
- 처음 풀었을 때
const rePw = document.querySelector("input#re-password");
rePw.addEventListener('keyup', function() {
const pw = document.querySelector("input#password").value;
const rePw2 = document.querySelector("input#re-password").value;
if ( pw !== rePw2) {
document.querySelector("p.alert").innerHTML = '비밀번호가 일치하지 않습니다';
return;
}
if ( pw === rePw2) {
document.querySelector("p.alert").innerHTML = "";
return;
}
});- 두 번째 풀었을 때
const pw = document.querySelector("input#password");
const rePw = document.querySelector("input#re-password");
const not = document.querySelector("p.alert");
rePw.addEventListener("keyup", function () {
if (pw.value !== rePw.value) {
not.innerHTML = "비밀번호가 일치하지 않습니다."
} else {
not.innerHTML = ""
}
return;
});선언이 모여져있어서 가독성이 좋다. 그런데 글로벌 선언을 안할수롣 좋다고했는데 선언은 아래가 더 낫나?
document.querySelector("p.alert").innerHTML ====> not.innerHTML
