Code States
Front-end boost camp
Today
I
Learned
🧚♂️ 반복문 어렵다. 오늘도 미세먼지 컨디션 최고~! 내내 환기하며 코딩해야지!
🧚♂️ Java Script 반복문
- 우리가 의도한 만큼 같은 동작을 반복시키는 문법
- 불필요한 코드 중복을 막을 수 있다. 간결하고 가독성 높은 코드!
🧚♂️ for문
✔️ for문 형식
for (초기값; 조건식; 증감식) {
// 실행할 코드
}-- 초기값 : 증감식 반복 횟수를 카운트하는 역할을 하는 변수. 초기값은 반복문의 코드블록 내부에서만 유효함
// 초기값(i)을 선언하고 1을 할당
for (let i = 1; 조건식; 증감식) {
console.log(i);
}-- 조건식 : 코드블록 내부의 코드의 실행 여부를 결정, true일 경우 실행, false일 경우 반복문 종료
// i가 3보다 작거나 같을 경우 코드 실행, 3보다 클 경우 반복문 종료
for (let i = 1; i <= 3; 증감식) {
console.log(i);
}-- 증감식 : 코드블록 내부의 코드를 실행한 후 초기값으로 선언된 변수를 증가 또는 감소시키기 위한 표현식
// 코드가 실행될 때마다 i가 1씩 증가
for (let i = 1; i <= 3; i++) {
console.log(i); // 1 2 3
}✔️ for문 예시
let result = 0;
for (let num = 1; num <= 5; num++) {
result = result + num;
}
console.log(result); // 15-- for문 내부에 num이라는 변수를 선언하고 1이라는 초기값을 할당한다.
-- 변수 num이 5보다 작거나 같은지 확인한다.
-- 2의 결과가 true면, 코드블록 내부의 코드를 실행한다.
-- 변수 num을 1 증가시킨다.
-- 2부터 4까지 반복한다.
-- 2의 결과가 false면, 반복문이 종료된다.
🧚♂️ 문자열과 반복문
✔️ 인덱스(index)
- 문자열의 각 문자는 순서를 가지고 있다. 첫 번째 문자의 인덱스는 0이다.
let str = 'codestates';
console.log(str[0]); // 'c'
console.log(str[4]); // 's'- 특정 문자의 인덱스를 확인하는 메서드 : indexOf()/ 만약 찾는 문자가 2개 이상이면 가장 앞에 있는 문자의 인덱스 조회
let str = 'codestates';
console.log(str.indexOf('c')); // 0
console.log(str.indexOf('e')); // 3✔️ 길이(length)
- 문자열의 길이는 문자열 뒤에 .length를 붙임으로써 조회 가능
let str = 'codestates';
console.log(str.length); // 10- 문자열의 첫 번째 문자부터 마지막 문자까지 모두 출력하는 코드는?
let str = 'codestates';
for (let i = 0; i <= 9; i++) {
console.log(str[i]);
}- 문자열의 길이가 매우 길거나 알 수 없을 땐?
let str = 'codestates';
for (let i = 0; i <= str.length - 1; i++) {
console.log(str[i]);
}🧚♂️ 반복문의 중첩
- 반복문은 중첩 가능
// 예시 : 정육면체 주사위 두 개를 굴려서 나올 수 있는 모든 경우의 수
for (let i = 1; i <=6; i++) {
for (let j = 1; j <= 6; j++) {
console.log(`첫번째 주사위는 $(i), 두번째 주사위는 ${j}입니다.`);
}
}결과 ▼
실행순서(코트 자료 친절하다) ▼
-
해설 :
-- 외부 반복문의 초기화와 조건식 평가 후 내부 반복문 실행
---> 내부 반복문의 조건식 평가가 false가 되면, 내부 반복문 종료 및 외부 반복문 조건식 평가가 이루어짐
---> 이때, 조건식 평가가 true면 다시 내부 반복문 순환하는 방식으로 진행
---> 외부 반복문의 조건식이 false가 되면 모든 반복문 종료 -
두 개 이상 중첩도 가능
// 2중 반복문으로 구구단 만들기
for (let i = 2; i <= 9; i++) {
console.log(`${i}단`);
for (let j = 1; j <= 9; j++) {
console.log(`${i} x ${j} = ${i * j}`);
}
}🧚♂️ while문
- while문은 조건식만 입력한 후 조건식의 평가결과가 true인 경우 코드블록 내부의 코드를 반복하여 실행
let num = 0;
while (num < 3) {
console.log(num); // 0 1 2
num++
}// 위 코드와 같은 for문
for (let num = 0; num < 3; num++) {
console.log(num); // 0 1 2
}- while문 사용 시 주의사항 : 무 한 루 프 !! 반복문이 종료되는 조건식이 항상 참으로 평가되어 무한히 반복되는 현상 주의
// 무한루프가 발생하는 코드 예시
let num = 1;
while (num > 0) {
console.log(num);
num++;
}🧚♂️ do...while문
- while 뒤에 오는 조건식이 true로 평가되는 동안 do 뒤에 오는 코드블록 내부의 코드를 반복하여 실행
- 단, 이 경우 do의 코드블록 내부의 코드가 최소 한 번은 실행됨
do {
console.log('코드블록 내부의 코드는 최소 한 번은 실행됩니다.')
// '코드블록 내부의 코드는 최소 한 번은 실행됩니다.'
} while (false)▼ 결과
- while 뒤에 오는 조건식이 항상 false임에도 do의 코드블록 내부에 있는 코드가 한 번은 실행되는 것을 확인할 수 있다.
👉 for문과 while문
- for문과 while문의 용도는 명확하게 구분되지 않는다.
- while문으로 할 수 있는 것을 for문으로 구현 가능, 반대로도 가능!
- 그럼에도 주로 자주 사용하는 상황은 있다!
// for문을 사용하는 경우
- 반복 횟수가 비교적 명확할 때
- 배열, 문자열 내부를 순회할 때
- 반복문의 중첩이 필요할 때
// while문을 사용하는 경우
- 반복 횟수가 명확하지 않을 때🧚♂️ 반복문 문제풀기 (업데이트 중)
- 1번 : 수를 입력받아 0부터 해당 수까지의 합을 리턴
-- 인자 1 : num
-- 출력 : number값
-- 반복문 사용
function sumTo(num) {
let sum = 0
for (let i = 0; i <= num; i++) {
sum = sum + i;
}
return sum;
}--> return 걊이 for문 안에 있으면 실행하지 않는데. 이유는 반복하려고 하는데 return이 맥을 끊어버리고 반복말고 값이나 반환해! 라고 하는 것과 같기에, 반복문의 최종값을 얻기 위해서는 반복문 밖에 리턴코드를 쓴다.. 1번부터 막히쥬? ㅠ
- 2번 : 수(num)를 입력받아 1부터 num까지의 정수로 구성된 문자열을 리턴해야 합니다.
-- 인자 1: num - number 타입의 정수 (num >= 1)
-- 출력 : string 타입 리턴
-- 주의사항 : 반복문 for문 사용, 숫자(number string) 사이의 구분은 없다.
- 3번 : 수(num)를 입력받아 1부터 num까지의 정수로 구성된 문자열을 리턴해야 합니다.
-- 입력 : 인자1 - num 타입의 정수 (num >= 1)
-- 출력 : string 타입 리턴
-- 주의사항 : 반복문 while문 사용/ for문 사용 금지/ 숫자 사이를 '-'로 구분
// 왜 안되지... '-' 로 연결하는 부분을 넣어야하는데...
function makeDigits2(num) {
let i = 1;
let result = '';
while (i <= num) {
result = result + String(i);
i++;
}
return result;
}- 4번 : 수를 입력받아 1부터 해당 수까지의 수 중에서 3의 배수로만 구성된 문자열을 리턴해야 합니다.
-- 입력 : 인자1 num - number 타입의 정수 (num >= 0) 이상의 정수
-- 출력 : string 타입 리턴
-- 주의사항 : 반복문 for 사용/ 숫자사이에 구분 없음/ 3의 배수가 없을 경우 빈 문자열로 리턴
// 무슨 짓을 한 것 같은지 모르겠는 내 코드
function makeMultiplesOfDigit(num) {
let result = '';
for (let i = 1; i <= num; i++) {
result = result + i;
if (result % 3 === 0) {
return result;
}
}
return result;
}--> 나는 분명 i를 1부터 두고 전체 숫자의 나열을 만들고, 3의 배수만 남기고 싶었다.
// 내 의도에서 디벨롭해 완성된 코드
function makeMultiplesOfDigit(num) {
let result = '';
for (let i = 1; i <= num; i++) {
if (i % 3 === 0) {
result += String(i);
}
}
return result;
}// 답안 레퍼런스 코드
function makeMultiplesOfDigit(num) {
let result = '';
for (let i = 1; i <= num; i++) {
if (i % 3 === 0) {
result += String(i);
}
}
return result;
}- 5번 : 문자열과 문자를 입력받아 문자열에서 문자(letter)가 등장하는 횟수를 리턴해야 합니다.
-- 입력 : 인자1-str/ 인자2-letter(str타입, letter.length는 1)
-- 출력 : number 타입 이턴
-- 주의사항 : 반복문 for 사용/ 빈 문자열을 입력받는 경우, 0 리턴
function countCharacter(str, letter) {
let counter = 0;
for (let i = 1; i <= str.length; i++) {
if (str[i] === letter) {
counter += 1;
}
}
return counter;
}- 6번 : 숫자 문자열을 입력받아 문자열을 구성하는 각 숫자 중 가장 큰수를 나타내는 숫자 리턴
-- 입력 : 인자1 - str (string 타입 문자열)
-- 출력 : string 타입을 리턴하시오.
-- 주의사항 : for문 사용/ str.split 사용금지/ 빈 문자열 입력 시 0 리턴
function getMaxNumberFromString(str) {
let maxNum = 0;
for (let i = 1; i <= str.length; i++) {
if (parseInt(str[i]) > maxNum) {
maxNum = parseInt(str[i]);
}
}
return String(maxNum);
}--> parseInt() : 숫자형을 문자형으로
- 7번 : 문자열과 두 개의 문자(from, to)를 입력받아, 문자열에 등장하는 특정 문자(from)가 다른 문자(to)로 바뀐 문자열을 리턴해야 합니다.
-- 인자1 - str (string 타입의 문자열), 인자2 - from(string 타입의 문자, from, length 는 1), 인자3 - to (string 타입의 문자, to, length는 1)
-- 출력 : string 타입을 리턴해야 합니다.
function replaceAll(str, from, to) {
let result = '';
for (let i = 0; i < str.length; i++) {
if (str[i] === from) {
result += to;
} else {
result += str[i];
}
}
return result;
}- 8번 : 수를 입력받아 약수(factor)의 합을 리턴해야 합니다.
-- 입력 : 인자1 - num(number 타입의 수)
-- 출력 : number타입을 리턴
// 약수란? n으로 나누었을 때 나머지가 0이 되는 수 n
function getSumOfFactors(num) {
// 약수 ? n 으로 나눴을 때 나머지가 0인 수
let result = 0;
for (let i = 1; i <= num; i++) {
if (num % i === 0) {
result += i;
}
}
return result;
}- 9번 : 1 이상의 자연수를 입력받아 소수(prime number)인지 여부를 리턴해야 함
-- 입력 : 인자1 - num(number타입의 수)
-- 출력 : boolean 타입 리턴
// 내 코드 : 제곱근 함수를 쓰지 않음
function isPrime(num) {
// 소수? 1과 자기 자신 외에 약수를 가지지 않는 1보다 큰 자연수
if (num === 1) {
return false;
}
if (num === 2){
return true;
}
if (num % 2 === 0)
return false;
for (let i = 3; i < num; i += 2) {
if (num % i === 0){
return false;
}
}
return true;
}-- 나는 제곱근 구하는 함수 안쓰고 풀고 싶은데 왜 자꾸 테스트가 통과가 안되나 했더니, 마지막 'return true' 값을 밖으로 빼지 않고 for문 안에 둬서 'num = 12887'인 경우에서 자꾸 막혔다. if문 안에서 else {return true;} 로 받아줬는데 그럴 경우에, i = 3 인 경우부터 바로 true값이 반환돼 버림.
// 레퍼런스 코드 : 제곱근 함수 Math.sqrt() 를 씀
function isPrime(num) {
let sqrt = parseInt(Math.sqrt(num));
if (num === 1) {
return false;
}
if (num === 2) {
return true;
}
if (num % 2 === 0) {
return false;
}
for (let i = 3; i <= sqrt; i += 2) {
if (num % i === 0) {
return false;
}
}
return true;
}▼ 아래부턴 어려운 문제...ㅠ 업데이트 중;
- 10번 : 2 이상의 자연수를 입력받아 2부터 해당 수까지의 소수들을 리턴
-- 입력 : 인자1 - num (number 타입의 정수 (num >= 2)
-- 출력 : string 타입을 리턴/ 2-3-4-7 형식으로 리턴
-- 주의사항 : 이중 반복문 사용
🧚♂️ 함수
- 선언 -> 호출 -> 입출력 -> 리턴
- 함수선언문 : function이라는 함수 선언 키워드 사용
// 함수선언문으로 정의한 함수
function greeting () {
console.log('hello world')
};- 함수표현식 : let 키워드를 사용해 변수를 선언, 함수를 할당하는 형태로 코드 작성, 식별자 지정 필요 없음
// 함수표현식으로 정의한 함수
let greeting = function () {
console.log('hello world')
};🧚♂️ 매개변수와 전달인자
- 매개변수 : 함수를 정의할 때 선언하고, 함수 코드 블록 안에서 변수처럼 취급
- 소괄호 ()에 매개변수 추가 가능
- 함수 내부에서 마치 변수와 같은 역할을 함
function greeting (name) {
console.log('hello ' + name);
}--> greeting 이라는 함수가 name이라는 매개변수를 가지고 있다. 현재는 아무것도 할당되어 있지 않으므로 매개변수 name은 undifined으로 초기화 되어 있음.
--> 이 매개변수 name에 값을 할당하기 위해서는 어떻게 할까요?
- 전달인자 사용 : 함수를 호출할 때 소괄호 안에 값을 넣음으로써 매개변수에 값을 할당할 수 있다.
function greeting (name) {
console.log('hello ' + name);
}
greeting('kimcoding'); // 'hello kimcoding'--> kimcoding이라는 문자열이 함수 내부에서 매개변수 name에 할당됨
- 매개변수 여러개 사용 가능
- 매개변수보다 적은 전달인자가 전달되면? undefined
- 매개변수는 함수 내부에서만 사용 가능
- 함수 내부에서 선언한 변수도 마찬가지로 함수 내부에서만!!!
🧚♂️ return문
- 함수의 실행결과를 외부로 반환
- 함수 외부에서도 함수의 결과값을 사용할 수 있게 해줌
- 1) 함수 내부의 코드가 차례대로 실행되다가 return문을 만나면 값을 반환한 후 함수는 종료됨, return문 뒤에 나오는 코드는 실행되지 않는다.
function add (x, y){
return x + y; // 반환문
console.log('실행되지 않습니다')
}- 2) return문에 작성된 코드를 실행한 후 결과를 함수 외부로 리턴, 함수 외부에서 함수를 호출하면 함수의 실행결과를 확인 가능
function add (x, y) {
return x + y; // 반환문
}
console.log(add(3, 2)); //5- 3) 함수 호출의 결과를 변수에 할당 가능
function add (x, y) {
return x + y; // 반환문
}
let result = add(3, 2);
console.log(result); // 5- 4) 함수의 호출 결과까리의 연산도 가능!!
function add (x, y) {
return x + y; // 반환문
}
let result = add(3, 2) + add(5, 7);
console.log(result); // 17👉 함수의 활용 목적?!
- 입력을 받아서 코드블록 내부의 코드를 실행한 후 반환하는 일련의 과정의 묶음
- 반복해서 사용되는 동작을 하나로 묶어두었다가 필요할 때마다 호출하여 사용 가능
🧚♂️ 8일차 수업을 마치며...
못 다 푼 반복문 문제를 풀고 리뷰할 것이다... 아 고등학교 때 쎈수학 풀기 전 수학의 정석 챕터 맨 뒤 테스트 문제 푸는데 막혀서 열받는 느낌이다. 쎈수학도 안갔는데 벌써 막힌다고 현타오는 느낌~ 이지만! 어쩌겠어 해야지 ㅋ 오늘 저녁은 반복문 문제 리뷰당ㅋ
and! 디버깅 사용해보기!
1) 개발자 도구 실행 (F11 / opt+cmd+i / 설정)
2) debugger; 키워드를 함수 호출 전에 입력
아! 나두 노력없이 비열하게 코딩 잘해지고 싶어
[무엥일기] 무엥,,, 내가 머쨍이 개발자가 될 수 이쓰까,,,
짤방이 웃겨요! 화이팅입니다^^7