for
갑자기 for에 대해서 다시 가르쳐 주신다. 아니 심화과정을 가르쳐 주시는거니 이상하진 않은가. 아무튼 해보자.
반복문과 조건문 동시에 써보기
// todo 연습 1) 1 ~ 20까지 중 짝수만 clonsole.log를 이용하여 나타내라
for (let i = 1; i < 21; i++) {
if (i % 2 == 0 ) {
console.log(i)
}
}여기서 중요한 것은 for안에 if를 쓰면 반복은 하지만 특정 조건에서만 어떤 것을 반복 할 수 있다.
누적합
숫자를 계속해서 더하는 것이다. 반복을 하면 반복했던 숫자를 모두 보여주는 것은 많이 했다. 그럼 그것들을 다 더하는 것은 어떻게 할까?
// todo 예제 3) 1 ~ 10 까지 모든 숫자를 더해서 최종 결과를 출력하세요
let sum = 0;
for (let i = 1; i < 11; i++) {
sum += i;
}
console.log(sum);먼저 더해주는 것을 놓을 쟁반이 필요하다고 생각하자. 이것을 sum이라는 변수로 정해주고 값을 0으로 주자. 0은 더해도 의미가 없으니...
그리고 여기에 반복을 이용하여 i를 계속해서 더해주면 sum값이 반복한 숫자를 모두 더한 값이 된다.
마지막으로 이것을 출력해주면된다.
결과
1부터 10까지 더한 값 55가 잘 나온것을 확인했다.
이것은 문자에서도 같은 원리다. 위의1072퀴즈의 alert에서 반복한 값을 한번에 보여주기위해 했던 result에 했던것도 이것과 같은 것이다.
앞으로 숫자를 모두 더하여 코딩을 해야하거나 문자를 쌓아서 한번에 보여주고 싶다면 누적합 코딩을 이용하자.
for 예약어
반복문 사용시 사용하는 예약어 break, continue 두개가 있다.
break는 반복문을 중간에 빠져나올때 사용할 수 있다. for에서도 사용할 수 있는데 while사용시 무한반복에 빠질 수 있기에 while에서도 잘 사용해주어야한다.
예제 1)
// i가 3일때 반복중단
for (let i = 1; i < 6; i++) {
console.log(i);
if (i == 3) {
break;
}
};i가 3일때 반복문을 중단시켜야하기 때문에 if절을 이용하여 반복문을 빠져나오게 했다.
continue는 skip의 느낌이다 if절을이용해 해당 조건의 실행문을 스킵하고 다시 실행하는 기능이다.
예제 2)
for (let i = 0; i < 6; i++) {
// continue 사용하기
if (i == 3) {
continue;
}
console.log(i) ;
}i가 3일경우 이것을 스킵하고 나머지를 다시 시작하게 해주는 방법이다.
continue를 만나면 continue 밑의 코드는 모두 스킵되고 for의 제일 위로 올라가게 된다.
결과
중간에 3없이 계속 반복문이 실행되는 것을 알 수 있다.
switch
조건문 중의 하나로 if와 비슷하다. 사실 if만써도 무관하지만 다른 사람이 썼을 경우 이해할 수 있어야 하기에 가르쳐준다고 하신다.
예제 1)
let num = Number(prompt("숫자를 1개 입력하세요"));
switch (num) {
case 1:
alert("X의 값은 1이다.")
break;
case 2:
alert("X의 값은 2이다.")
break;
default:
alert("X의 값은 1또는 2가 아니다.")
break;case앞의 숫자가 num ==일때이다. num이 1이면 코드가 나타나게 할 수 있다.
default는 if의 else와 같은 것이다. case들이 다 일어나지 않으면 무엇이 일어나는지를 정해줄 수 있다.
이것은 여러가지 조건이 있을경우(if의 경우 여러개의 else if가 많을 경우) 사용하기 좋을 것 같다.
3항 연산자
간단한 조건문에 사용하기 좋다.
예제 1)
// a면 a가 나오게 b면 b가 나오게
let char = prompt("문자 1개");
let result = (char == "a")? "a" : " b";
alert(result);해석 해보면 괄호안의 조건이 참이면 왼쪽값이 변수에 저장되고, 거짓이면 오른쪽 값이 저장된다.
while
또 다른 반복문이다.
된다.
예제 1)
let i = 1;
while (i <= 5) {
console.log("안녕하세요");
i++;
};먼저 i변수에 시작값을 넣어주고 while의 괄호안에 조건을 넣고 마지막으로 i++을 해주면 된다.
for과의 차이는 while에서는 i를 직접 적어주어야한다. i++도 물론이다.
while은 조건이 명확하거나 for을 쓰기 애매한 상황이 생기면 사용하기 좋은 것같다.
do while
예제 2)
let i = 6;
do {
console.log("안녕하세요")
} while (i <= 5);이건 변수를 while과 같이 먼저 적어주고 do의 실행을 먼저 적어준뒤 while조건을 걸어준다.
while과의 차이는 do를 무조건 한번은 실행을 해준다. i=6이서어 while의 조건에 맞지 않지만do를 먼저 실행하고 while을 체크하기때문에 적어도 한번은 사용한다.
결과
조건이 달라도 한번은 실행된 것을 확인 할 수 있다.
이것은 조건이 맞지 않아도 한번은 실행하고 싶을때 사용하면 좋을것 같다.
조건없이 반복하기(무한반목문)
while을 계속해서 조건없이 반복시키고 싶으면 괄호안에 true를 넣어주면
된다.
//무한반복하다가 5가 나오면 중단하라
while (true) {
let num = Number(prompt("문자 1개"));
if(num == 5){
break;
}
console.log(num);
};for문은 없는 줄 알았는데 있었다.
//무한반복하다가 5가 나오면 중단하라
for(;true;) {
let num = Number(prompt("문자 1개"));
if(num == 5){
break;
}
console.log(num);
};위 코드와 같이 만들어 주면 된다.
while은 조건이 명확하거나 for을 쓰기 애매한 상황이 생기면 사용하기 좋은 것같다. 또한 무한반복 시켜 break로 탈출시키거나 하는 상황이 오면 사용할 수 있다.
배열
앞에서 잠깐 배웠지만 깊이 들어가보자.
앞에서도 했듯이 변수랑은 다르게 배열에는 여러가지 값을 저장할 수 있다. 변수의 한계점에 의해 등장했다.
- 배열 변수명 : 1개
- 인덱스 번호로 각 값을 구분함
- 배열에 값을 넣으려면 자바(중괄호 사용)와는 다르게 대괄호를 사용
let num = [1, 2, 3, 4, 5];
num[3] = 4; // num이라는 이름의 배열의 4번째(0부터시작)값예제 1)
// 예제) 아래와 같이 색깔 배열이 있다. 화면에 배열의 값을
// 모두 출력하세요
let color = ["red", "green", "blue", "yellow", "skyblue"];
for (let i = 0; i < color.length; i++) {
console.log(color[i]);
};두번재 조건문에 i가 해당배열의 길이만큼만 반복을 하게 하라고 지정해주면된다.
반복문을 통해 배열을 간단하게 나열할 수 있다. 배열과 반복문은 뗄래야 뗄 수 없는관계이다.
js의 여러가지 함수들
js에는 여러가지 함수들이있다. 모든 함수를 알 수는 없지만 중요한 것들은 알아보자. 뒤에 필요한 것들이 있다며 구글링을 하면된다.
1) push = 배열에 값을 추가해주는 함수다.
let num = [1, 2, 3];
num.push(4);
console.log(num);
4가 추가된 것을 볼 수 있다.
2) pop() = 배열의 마지막 값을 제거해주는 함수다.
let num = [1, 2, 3];
num.push(4);
num.pop();
console.log(num);
4가 다시 제거된 것을 볼 수 있다.
3) toFixed() = 특정 자리뒤의 소수점이 삭제된다.
let x = 12.4763;
console.log(x.toFixed(2));
두번째 자리뒤에서 잘리는 것을 볼 수 있다.
4) Math.max(), Math.min() = 괄호안의 최댓값을 구해줌
let num = 1;
let num2 = 2;
console.log(Math.max(num, num2));
console.log(Math.min(num, num2));
5) Date() = 현재날짜 시간을 알려줌
let date = new Date(); // 객체 생성 방법
let year = date.getFullYear();
let month = date.getMonth() + 1; // 현재월 0부터 시작함...
let day = date.getDay();
let hour = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
alert(year + "년 " + month + "월 " + day + "일 " + hour + "시 " + minute + "분 "+ second + "초")
이상하게도 월은 0부터 시작이라 +1을 해주어야한다.
방법은 자바에서 인스턴스 호출할때랑 똑같은 방법이다. 이것도 js에서 제공해주는 클래스인가보다. 따로 import를 안 해주는게 자바랑 좀 다른거 같다.
## 함수 함수는 메서드라고도 하며 어떤 기능을 미리 코딩해놓은 것이다. 예) .toFixed(), Math.max() 장점 : 코딩 효율셩 증가
함수 만드는 방법
1) 함수정의
function hello() {
alert("안녕하세요");
}function을 적어주고 함수이름과 소괄호를 해준다. 그리고 중괄호에 함수의 기능들을 넣어주면 끝이다.
이제 hello()만 입력하면 위의 코드가 자동으로 실행된다.
매개변수 메서드
이번에는 괄호안에 params를 넣어주고 코딩을 해보자. 그럼 이것을 실행할때 아까와는 달리 무언가를 넣어주어야한다.
function hello(params) {
alert(params)
};
hello("안녕하세요");왜 이렇게 할까?
첫번째에서는 안녕하세요라는 내용을 메서드를 만들때 정의를 해줬고 우리는 이것을 바꾸려면 메서드에 가서 하나하나 바꿔야한다.
하지만 매개변수를 넣어주면 필요할때마다 매개변수가 들어간 값을 지정해주면 메서드를 고치지 않고도 다른 내용으로 메서드를 만들 수 있다.
return을 이용한 함수
function hello(params) {
return params + "World";
};
let result = hello("hello");
alert(result);return을 이용해서 값을 반환한 뒤 이것을 이용하여 새로운 변수를 만들어 그 변수를 출력했다. 원래라면 메서드에서 지정된 변수는 메서드가 종료되면 변수는 초기화 된다. 하지만 return을 사용해주면 이게 함수밖으로 나와 초기화되지 않는다.(그래서 if나 for의 i는 그 함수 안에서만 유효했던것이다.)
코드에서 보자면 params + "World"라는 것은 메서드가 종료되면 없어진다. 그러나 return으로 보내주면서 이를 변수에 담아서 사용하거나 메서드 안에서 사용할 수 있게된다.
그래서 메서드에서 지정된 변수를 계속해서 사용하고 싶다면 return을 이용해서 메서드 밖에서도 이용을 할수 있다.
객체
java, js, python은 모두 객체지향 언어이다. 그래서 이 언어들은 공부한다면 객체를 알아야한다.
그럼 객체란 뭘까?
실생활에서 보니는 모든 것들을 객체라고하다. 예를 들어 사람, 책상, 컴퓨터, 학원등을 객체라고하는 것이다.
이렇게 말하면 쉽게 와닿지 않으니 예제를 보자
만드는 법
예제 1)
let person = {
name: "안지영",
email : "an@naver.com",
age : 24
};
console.log("name", person.name);
console.log("email", person.email);
console.log("age", person.age);
객체 메서드에 "속성명: 값"을 넣어주면 된다. 여러개 넣고 싶은경우 ","를 이용해 나열하면된다. 출력은 "객체이름.속성이름"을 해주면된다.
안지영이라는 객체를 만들어 안에 속성을 만들었다.여기서 안지영은 객체이고 안지영이 가지는 모든 것들이 객체의 속성이다.
자료형 정리
1) 문자열(String) : "", '' 사용
2) 숫자(Number) : 1,2 사용
3) 참/거짓(Boolean) : true/false 사용
4) 객체(Object) : let cat={name:"나비"};
4-2) 배열(객체) : let num=[1,2,3];
5) null 자료형 : 공간이 없음을 의미
// => null 사용 과거 코딩
let char = null;// 요즘 코딩
let char = ""; 6) undefined 자료형 : (js 만 있음, 다른언어 없음)
객체 정의 형태에서 나옴 : 에러로 나옴
let dog = {
name: "삼순이",
age: 2
}
console.log(dog.name); // "삼순이"
console.log(dog.age); // 2
console.log(dog.code); // TODO: undefined 에러 발생code up문제풀이
오늘은 문제 풀기부터 진행하여서 문제를 풀다가 내가 막히거나 틀린것에 대해 작성해보자
문제는 선생님의 블로그https://velog.io/@forbob/03Simple-Coding-JS-100-Quiz3의 문제이다.
1071) 퀴즈 (반복 탈출 문제)
입력된 정수를 줄을 바꿔 하나씩 출력하는데, 0이 입력되면 종료한다.
입력 : 7 4 2 3 0 1 5 6 9 10 8
출력 : 7
4
2
3
먼저 반복을 하되 값에 0이 나오면 반복이 멈춰야 한다는 것을 확인하여
특정 조건에서 반복을 탈출할 수 있는 while문을 사용하기로 하였다.
풀이
let num = prompt("숫자를 입력하세요").split(" ");
let i = 0;
while (i < 11) {
console.log(num[i])
i++
if (num[i] == "0") {
break;
}
};-
우선 입력을 하면 이것을 공백을 기준으로 배열에 넣어야한다. 그래서 첫출과 같이 나누어 배열에 넣어주었다.
-
반복을 해야하는데 얼마나 while문을 돌릴지를 정해야한다. 문제의 숫자 개수가 11개여서 11만큼 반복을 하기로했다.
(이때 i가 계속 증가해야하므로 while문 시작전에 변수 i를 만들고 실행문의 마지막에 i가 증가하도록 i++을 해주었다.) -
그리고 마지막으로 0이 나오면 반복문을 탈출해야하므로 if문과 break를 이용하여 다음과 같이 만들어 주었다. (이때 num은 문자의 배열이므로 0은 숫자가 아니고 문자이다.)
결과
0에서 반복이 잘 끝난것을 확인했다.
이번 문제는 while을 이용한 문제다. 오랜만에 사용해봐서 기억이 잘안나 구글링을 했었다.^^ 일단 해결한 것에 다행이라고 생각하고 다음에도 조건에 의해 반복을 멈춰야하는 코딩을 해야한다면 while을 사용하도록 하자.
1072) 퀴즈 (반복 줄바꿈 문제)
📃 1072) 퀴즈
n개의 정수를 한 개씩 줄을 바꿔 출력한다.
입력 : 5
1 2 3 4 5
출력 : 1
2
3
4
5
이 문제는 콘솔을 이용하면 자동으로 줄이 바뀐 것처럼 보이게 된다. 하지만 실제로 줄바꿈 처리는 내가 해준 것이 아니니 잘못된 것이라고 생각하여 alert함수를 이용하여 풀어보기로했다.
풀이
let num = prompt("숫자를 입력하세요").split(" ");
let result = "";
for (let i = 0; i < num.length; i++) {
result = result + num[i] + "\n";
};
alert(result);-
숫자를 입력하긴 했지만 연산 과정은 없다고 판단하여 Number는 사용하지 않았고 공백을 기준으로 배열에 담았다.
-
숫자를 입력하면 이것이 반복만 되면 되어서 for문을 이용하기로 했다.그리고 얼마나 반복을 해야할 지를 보면 입력된 숫자만큼만 반복하면 되기 때문에 num의 길이만큼 반복을 하게 해주었다.
-
여기가 좀 헷갈렸는데 alert로 출력을 할려면 어떻게 해야 생각을 해보니, 한번에 바로 보여주는 것은 무리고 하나의 변수에 계속해서 이것을 저장 시키는 방법을 이용해 마지막에 그 변수를 출력하면 되지않을 까 생각했다. 그리하여 result라는 변수를 만들어 여기에 반복되는 num을 담았다.(줄바꿈도 해주었다.)
결과
alert에서 반복과 줄바꿈이 잘 일어난 것을 확인 할 수 있었다.
1074) 퀴즈 (역순 반복 문제)
📃 1074) 퀴즈
1씩 줄이면서 한 줄에 하나씩 1이 될 때까지 출력한다.
입력 : 5
출력 : 5
4
3
2
1
위의 문제와 아주 비슷한데 숫자만 역순으로 나오게 하는것이다.
5부터 숫자를 작아지게 하려면 처음 수에서 증가되는 i를 빼주면 된다고 생각했다.
풀이
let j = Number(prompt("숫자를 입력하세요"));
for (let i = 0; i < j ; i++) {
console.log(j - i);
};-
연산이 필요할거 같으니 Number를 이용해 j변수를 두어 여기에 숫자를 넣어주었다.
-
i를 증가시키는 for문을 만들어 주고 j(내가 준 숫자)에서 i(0부터 1씩 증가하는 수)를 빼주면 숫자가 내가 준 숫자가 감소하게 된다.
결과
숫자가 5부터 잘 감소하는 것을 볼 수 있다.
오늘 알게 된 것
return을 왜 사용하는가?
오늘 배운 내용중 가장 기억에 남는것이 return이다. 함수안에서 변수가 지정되면 그 변수는 함수 안에서만 유효하다. 근데 우리는 이것을 함수가 종료된 뒤에도 사용하고 싶다면 return을 사용하면된다.
나는 이 내용을 뒤에서 배운적이 있는거 같은데 제대로 개념이 확립되어었지 않은 것 같았다. 이유를 생각해보니 메서드와 변수들이 저장되는 영역이 다른 것을 배우고 이것이 삭제되는 시기, 변수의 스코프등을 배우기전에 return을 배워서 제대로 알 지 못한거 같다. 이제는 이해를 했으니 return기능을 잘 사용해보자.
