코드스테이츠 프론트엔드 부트캠프 43기 Day 3 - Date 객체, for ... of, 최댓값 찾기 등
- 단축키
한 번 쓴 줄을 그대로 밑에 복사해서 쓰고 싶을 때
option + shift + 아래 방향키
이미 작성한 줄을 이동시키고 싶을 때
option + 위 아래 방향키
한 번에 주석으로 만들어버리기 -> command + K + C
주석 풀기 -> command + K + U
if 문 하나를 빠져나왔단 건 이미 그 위에 것에 해당되지 않는다는 뜻!
- if 조건문
findShortestOfThreeWords
문제
차례대로 문자열 3개를 입력받아, 가장 짧은 문자열을 리턴해야 합니다.
입력
인자 1 : word1
- string 타입의 문자열
- word1.length는 10 이하
인자 2 : word2
- string 타입의 문자열
- word2.length는 10 이하
인자 3 : word3
- string 타입의 문자열
- word3.length는 10 이하
출력
- string 타입을 리턴해야 합니다.
주의 사항
- 동일한 길이의 문자열 중에서는 처음 입력받은 문자열을 리턴해야 합니다.
입출력 예시
let output = findShortestOfThreeWords('a', 'two', 'three');
console.log(output); // --> 'a'
output = findShortestOfThreeWords('c', 'b', 'a');
console.log(output); // --> 'c'
작성한 코드 1
let one = word1.length;
let two = word2.length;
let three = word3.length;
let minWord = Math.min(word1.length, word2.length, word3.length);
if (minWord === one) {
return word1;
} else if (minWord === two) {
if (two === one) {
return word1;
} else {
return word2;
}
} else if (minWord === three) {
if (three === one) {
return word1;
} else if (three === two) {
return word2;
} else {
return word3;
}
}
}
내가 쓴 코드에서는 첫 번째 if 문을 빠져나온 후에
두 번째 if 문에서 다시 two === one 을 비교한다.
근데 첫 번째 if 문, 즉 minWord === one 을 빠져나왔다는 뜻은
minWord !== one 을 의미하기에, 굳이 two === one 을 비교할 필요가 없다.
아래는 정리된 코드다.
작성한 코드 2
function findShortestOfThreeWords(word1, word2, word3) {
let one = word1.length;
let two = word2.length;
let three = word3.length;
let min = Math.min(wordOne, wordTwo, wordThree);
if (min === one) {
return word1;
} else if (min === two) {
return word2;
} else {
return word3;
}
}
훨씬 깔끔해졌다.
- Date 객체
문제
시, 분, 초를 입력받아 1초를 더한 결과값을 특정 형태의 메시지로 리턴해야 합니다.
입력
인자 1 : hour
- number 타입의 정수 (0 <= hour && hour < 24)
인자 2 : minute
- number 타입의 정수 (0 <= minute && minute < 60)
인자 3 : second
- number 타입의 정수 (0 <= second && second < 60)
출력
- string 타입을 리턴해야 합니다.
- 1초 뒤에 {hour}시 {minute}분 {second}초 입니다 형식으로 리턴해야 합니다.
입출력 예시
let output = addOneSecond(14, 17, 59);
console.log(output); // --> '1초 뒤에 14시 18분 0초 입니다'
output = addOneSecond(1, 59, 59);
console.log(output); // --> '1초 뒤에 2시 0분 0초 입니다'
output = addOneSecond(3, 24, 29);
console.log(output); // --> '1초 뒤에 3시 24분 30초가 입니다'
output = addOneSecond(23, 59, 59);
console.log(output); // --> '1초 뒤에 0시 0분 0초 입니다'
위 문제를 if else 문으로도 풀 수는 있다.
방법은
23시 59분 59초인 경우,
59분 59초인 경우,
59초인 경우 로 나눠서 푸는 것이다.
하지만 Date 객체를 이용한다면 훨씬 편하다.
작성한 코드
function addOneSecond(hour, minute, second) {
// 1. date 객체 선언한다.
// 2. date 객체의 시, 분, 초 값을 설정한다. 이 때 초는 1 더한다.
// 4. 시, 분, 초 를 리턴한다.
const time = new Date(); // 현재 날짜와 시각
time.setHours(hour, minute, second + 1); // .setHours 는 date 객체의 메소드임. 이렇게만 쓰면 원하는 시각으로 변경된다.
return `1초 뒤에 ${time.getHours()}시 ${time.getMinutes()}분 ${time.getSeconds()}초 입니다`;
}- for ... of 문
문제
문자열과 문자를 입력받아 문자열에서 문자(letter)가 등장하는 횟수를 리턴해야 합니다.
입력
인자 1 : str
- string 타입의 문자열
인자 2 : letter
- string 타입의 문자
- letter.length는 1
출력
- number 타입을 리턴해야 합니다.
주의 사항
- 반복문(for)문을 사용해야 합니다.
- 빈 문자열을 입력받은 경우, 0을 리턴해야 합니다.
입출력 예시
let output = countCharacter('I am a hacker', 'a');
console.log(output); // --> 3
작성한 코드
function countCharacter(str, letter) {
// let string = 0;
// for (let i = 0;i < str.length; i++) {
// if (str[i] === letter) {
// string += 1;
// }
// }
let count = 0;
for (const char of str) { // for ... of 문 for 의 시작과 끝을 정하지 않고 전체를 알아서 돌아준다
char === letter && (count += 1); // A && B A면 B 실행
}
return count;
}
일반 for 문으로 돌려도 되긴 한다.
하지만 for ... of 문을 활용하면 코드를 조금 더 간결하게 작성할 수 있다.
for (let A of B) {
}
A 라는 이름을 가진 변수가 B 를 한 글자 한 글자 돌면서 { } 안의 명령을 수행한다.
- 최댓값 찾기
문제
숫자 문자열을 입력받아 문자열을 구성하는 각 숫자 중 가장 큰 수를 나타내는 숫자를 리턴해야 합니다.
입력
인자 1 : str
- string 타입의 숫자 문자열
출력
- string 타입을 리턴해야 합니다.
주의 사항
- 반복문(for)문을 사용해야 합니다.
- str.split 사용은 금지됩니다.
- 빈 문자열을 입력받은 경우, 0을 리턴해야 합니다.
입출력 예시
let output = getMaxNumberFromString('53862');
console.log(output); // --> '8'
output = getMaxNumberFromString('4321');
console.log(output); // --> '4'function getMaxNumberFromString(str) {
// 가장 큰 수를 저장할 변수를 선언
// 반복문으로 숫자 문자열을 돌면서 변수와 비교 후 더 크면 변수에 할당된 값을 교체
if (str === '') {
return '0';
}
let max = Number.MIN_SAFE_INTEGER; // 표현할 수 있는 숫자 중 가장 낮은 값 할당. 안전함. 최대값을 구할 때 쓰면 좋다. 굿
for (const num of str) {
+num > max && (max = +num); // num 이 문자열로 되어있기 때문에 +num 을 통해 숫자로 변경해준다.
}
return String(max); // 수를 문자열로 바꾸려면 1. String() 괄호 안에 변수를 넣어라
// 2. 변수 + ''; 이렇게 하면 된당
// 3. `` 백틱 안에 변수 집어넣으면 된다
}- 선형형 프로그래밍
문제
문자열과 두 개의 문자(from, to)를 입력받아, 문자열에 등장하는 특정 문자(from)가 다른 문자(to)로 바뀐 문자열을 리턴해야 합니다.
입력
인자 1 : str
- string 타입의 문자열
인자 2 : from
- string 타입의 문자
- from.length는 1
인자 3 : to
- string 타입의 문자
- to.length는 1
출력
- string 타입을 리턴해야 합니다.
입출력 예시
let output = replaceAll('loop', 'o', 'e');
console.log(output); // --> 'leep'function replaceAll(str, from, to) {
let changedWord = '';
for (i = 0; i < str.length; i++) {
if (str[i] === from) {
changedWord += to;
} else {
changedWord += str[i];
}
}
return changedWord;
}
function replaceAll(str, from, to) {
return str
.split('')
.map((char) => char === from ? to : char)
.join('');
// split 빈 문자열을 기준으로 쪼갠다 === 한 글자씩 쪼갠다 ex) loop => l o o p
// map 쪼개진 걸 하나씩 돈다 for of 랑 비슷. 돌면서 원하는 방식대로 바꿀 수 있다.
// char => 한 글자 한 글자 라고 생각하면 됨. map 안에서 바로 변수 지정한 느낌
// char 이 만약 from 과 같다면 to 로 바꾸고 아니면 기존 char 그대로 둔다.
// split 으로 한 글자씩 쪼갰던 걸 join (기준) 으로 합친다. ex) .join('-') => l-o-o-p
// 명령형 프로그래밍 : for 문. 복잡해지면 복잡해질수록 이해하기 힘들다. 디테일한 기술에 포커싱되어 있음.
// 선형형 프로그래밍 : 위와 같은 방식. 하는 일들이 다 적혀 있어서 이해가 쉽다. 무엇을 해야하는지 (실무에서 많이 씀)
}
위 코드는 내가 작성한 것이고, 밑 코드는 페어 분이 작성하신 것이다.
내가 작성한 코드는 i 가 str 을 한 바퀴 돌면서,
str[i] 가 from 과 같을 때는 to 로 교체하고
str[i] 가 from 과 다를 때는 str[i] 인 채로 둔다
라는 명령을 수행한다. 페어 분이 작성한 코드는
str 을 한 글자 단위로 쪼개고 .split('') // 빈 문자열 단위로 쪼갠다는 건 한 글자씩 쪼갠다는 뜻
char 라는 놈이 쪼개진 것을 하나씩 보면서 .map((char) => char === from ? to : char)
자신과 from 이 같으면 to 로 바꿔주고 아니면 그대로 둔다.
그 과정이 끝난 후에는 사이에 아무 것도 두지 않고 합친다. .join('');
페어 분이 작성한 방식을 '선형형 프로그래밍' 이라고 하는데. 수행되는 태스크가 쭉 보이기 때문에 그런 것 같다. 좀 더 직관적이고 실무에서 많이 쓰인다고 하니 잘 알아둬야겠다.
- 피드백
페어분께서 진행하시는 스터디에 참여하기로 했다. '자바스크립트 완벽 가이드' 라는 책을 함께 읽으며 공부하는 스터디다.
열심히 해봐야지.
결국 기본기가 가장 많이 쓰인다. 이해 안 되는 것들을 꼼꼼하게 체크하고 여러 번 반복해서 익히자!