TIL#9 JS) Loops
반복문
For Loops
for([초기문]; [조건문]; [증감문]) {
... 반복문 본문 ...
}
초기문
- 초기문 작성 시 변수 선언자를 써주어야 함. (let i = 0)
- 변수명은 보통 index를 의미하는 i로 선언. (let i = 0)
- index가 증가할 경우 숫자는 보통 0부터 시작. (배열의 인덱스는 [0]부터 시작하기 때문)
조건문
- index의 범위를 설정.
- index가 증가할 경우 특정한 숫자 미만 혹은 이하로 설정.
- index가 감소할 경우 0 이상으로 설정.
- 조건문이 true일 경우 반복문을 계속 실행.
- 조건문이 false일 경우 반복문이 종료.
💡 배열에서의 for 조건문은 배열.length 가 많이 쓰임.
let arr = [5, 2, 4, 6];
let arr2 = [];
for (let i=0; i < arr.length ; i++) { // 배열 arr의 길이 = 원소 개수만큼 반복
arr2[i] = arr[i]; // 새로운 배열 arr2에 arr의 원소들을 그대로 붙여넣기
}
console.log(arr2); // [5, 2, 4, 6]
증감식
- index가 1씩 증가할 경우 ++. (index의 숫자가 하나씩 증가)
- index가 1씩 감소할 경우 --. (index의 숫자가 하나씩 감소)
- i++은 i = i+1 을 줄여서 쓴 것. i += 1 로 표현할 수도 있습니다.
- i++는 ++1로 표현 가능.
💡 조건문이 성립되어 for {}가 한번 실행된 후, 증감식을 통해 i가 증감된다.
✨ 화살표 함수 (Arrow Function)
for([초기문]; [조건문]; [증감문]) {
... 반복문 본문 ...
}
초기문
- 초기문 작성 시 변수 선언자를 써주어야 함. (let i = 0)
- 변수명은 보통 index를 의미하는 i로 선언. (let i = 0)
- index가 증가할 경우 숫자는 보통 0부터 시작. (배열의 인덱스는 [0]부터 시작하기 때문)
조건문
- index의 범위를 설정.
- index가 증가할 경우 특정한 숫자 미만 혹은 이하로 설정.
- index가 감소할 경우 0 이상으로 설정.
- 조건문이 true일 경우 반복문을 계속 실행.
- 조건문이 false일 경우 반복문이 종료.
💡 배열에서의 for 조건문은 배열.length 가 많이 쓰임.
let arr = [5, 2, 4, 6];
let arr2 = [];
for (let i=0; i < arr.length ; i++) { // 배열 arr의 길이 = 원소 개수만큼 반복
arr2[i] = arr[i]; // 새로운 배열 arr2에 arr의 원소들을 그대로 붙여넣기
}
console.log(arr2); // [5, 2, 4, 6]
증감식
- index가 1씩 증가할 경우 ++. (index의 숫자가 하나씩 증가)
- index가 1씩 감소할 경우 --. (index의 숫자가 하나씩 감소)
- i++은 i = i+1 을 줄여서 쓴 것. i += 1 로 표현할 수도 있습니다.
- i++는 ++1로 표현 가능.
💡 조건문이 성립되어 for {}가 한번 실행된 후, 증감식을 통해 i가 증감된다.
✨ 화살표 함수 (Arrow Function)
화살표 함수는 함수를 간략하게 표현 가능하다. 화살표 함수와 일반 함수에는 우위가 없으며, 상황에 따라 필요한 문법을 골라 쓰는 것이 자바스크립트의 함수를 가장 잘 사용하는 방법이다.
- 화살표 함수는 항상 익명 함수로, 함수명이 없다. → 변수에 할당하여 사용 가능
- 일반 함수와는 달리, function 키워드와 return 명령어가 없다.
this
나super
에 대한 바인딩이 없고, methods 로 사용될 수 없다.
*만약 화살표 함수에서 this가 쓰인다면, 전역변수를 가리킴.new.target
키워드가 없다.- 일반적으로 스코프를 지정할 때 사용하는
call
,apply
,bind
methods를 이용할 수 없다. 생성자(Constructor)
로 사용할 수 없다.yield
를 화살표 함수 내부에서 사용할 수 없다.
// 매개변수가 없는 일반함수
function fn1() {
return 'Hello world';
}
// 매개변수가 없는 화살표함수
const fn1 = () => 'Hello world';
// 매개변수 1개가 있는 일반함수
function fn2(name) {
return 'Hello ${name}';
}
// 매개변수 1개가 있는 화살표함수
const fn2 = name => 'Hello ${name}';
// 매개변수 2개가 있는 일반함수
function fn2(name1, name2) {
return 'Hello ${name1}, ${name2}';
}
// 매개변수 2개가 있는 화살표함수
const fn2 = (name1, name2) => 'Hello ${name1}, ${name2}';
While Loops
while ([조건문]) {
...반복문 본문...
}
-
어떤 조건문이 참이기만 하면 문장을 계속해서 수행한다.
만약 조건문이 거짓이 된다면, 그 반복문 안의 문장은 실행을 멈추고 반복문 바로 다음의 문장으로 넘어간다.
-
조건문은 반복문 안의 문장이 실행되기 전에 확인된다.
만약 조건문이 참으로 리턴된다면, 문장은 실행되고 그 조건문은 다시 판별됩니다. 만약 조건문이 거짓으로 리턴된다면, 실행을 멈추고 while문 바로 다음의 문장으로 넘어가게 됩니다.
-
많은 문장들을 실행하기 위해선, { }를 써서 문장들을 묶어줍니다.
n = 0;
x = 0;
while (n < 3) {
n++;
x += n;
}
Do...While
while ([조건문]) {
...반복문 본문...
}
어떤 조건문이 참이기만 하면 문장을 계속해서 수행한다.
만약 조건문이 거짓이 된다면, 그 반복문 안의 문장은 실행을 멈추고 반복문 바로 다음의 문장으로 넘어간다.
조건문은 반복문 안의 문장이 실행되기 전에 확인된다.
만약 조건문이 참으로 리턴된다면, 문장은 실행되고 그 조건문은 다시 판별됩니다. 만약 조건문이 거짓으로 리턴된다면, 실행을 멈추고 while문 바로 다음의 문장으로 넘어가게 됩니다.
많은 문장들을 실행하기 위해선, { }를 써서 문장들을 묶어줍니다.
n = 0;
x = 0;
while (n < 3) {
n++;
x += n;
}
특정한 조건이 거짓으로 판별될 때까지 반복한다.
do
문장
while ([조건문]);
- 조건문을 확인하기 전에 문장은 한번 실행된다.
- 많은 문장을 실행하기 위해선 { }를 써서 문장들을 묶어준다.
만약 조건이 참이라면, 그 문장은 다시 실행된다. 매 실행 마지막마다 조건문이 확인된다.
만약 조건문이 거짓일 경우, 실행을 멈추고 do...while 문 바로 아래에 있는 문장으로 넘어가게 한다.
do {
i += 1;
console.log(i);
} while (i < 5);
💡 For Loops VS While Loops
// For Loops for(var count = 0; count < 6; count++) { console.log(count); } // While Loops var count = 1; while(count < 6) { console.log("count is: " + count); count++ }
break/continue
break문은 반복문, switch문, 레이블 문과 결합한 문장을 빠져나올 때 사용한다.
- break; : 가장 안쪽의 while, do-while, for, 또는 switch문을 빠져나옴.
- break [레이블]; 특정한 레이블 문을 빠져나옴.
for (i = 0; i < a.length; i++) {
if (a[i] == theValue) {
break;
}
}
continue 문은 while, do-while, for, 레이블 문을 다시 시작하기 위해 사용될 수 있다. break문과 달리, continue 문은 전체 루프의 실행을 종료하지 않는다. while 루프에서 continue는 다시 조건으로 이동한다. for 루프에서 continue는 증가 표현으로 이동한다.
- continue; : 가장 안쪽의 while, do-while, for 문을 둘러싼 현재 반복을 종료하고, 다음 반복으로 루프의 실행을 계속한다.
- continue [레이블]; : continue는 그 레이블로 식별되는 루프 문에 적용된다.
i = 0;
n = 0;
while (i < 5) {
i++;
if (i == 3) {
continue;
}
n += i;
}
Label
레이블은 프로그램에서 다른 곳으로 참조할 수 있도록 식별자로 문을 제공한다. 예를 들어, 루프를 식별하기 위해 레이블을 사용하고, 프로그램이 루프를 방해하거나 실행을 계속할지 여부를 나타내기 위해 break나 continue 문을 사용할 수 있다.
EX) 레이블 markLoop는 while 루프를 식별한다.
markLoop: while (theMark == true) { doSomething(); }
for...in/of
for...in 문은 객체의 열거 속성을 통해 지정된 변수를 반복한다. 각각의 고유한 속성에 대해, JavaScript는 지정된 문을 실행한다.
for (variable in object) {
statements
}
for...of 문은 각각의 고유한 특성의 값을 실행할 명령과 함께 사용자 지정 반복 후크를 호출하여, 반복 가능한 객체(배열, Map, Set, 인수 객체 등을 포함)를 통해 반복하는 루프를 만든다.
for (variable of object) {
statement
}
✔️ for practice
Q. helloBot이라는 함수를 만들어라.
- for문을 사용하여 빈 result배열에 greetings에 들어있는 인삿말을 채워라.
- 인자에는 0과 1로 이루어진 배열이 들어간다.
let group1 = [0,1,1,0,0]
helloBot(group1); // --> ['안녕하세요','또 만나네요','또 만나네요','안녕하세요','안녕하세요']
🔥 My Answer
const helloBot = people => {
let result = [];
for(let i = 0; i < group1.length; i++) {
if(group[i] === 0) {
result.push('안녕하세요');
}
else if(group[i] === 1) {
result.push('또 만나네요');
}
}
return result;
}
let group1 = [0, 1, 1, 0, 0];
let welcome = helloBot(group1);
console.log(helloBot());
▶ Feedback
- console하면 결과 값은 잘 나오나 배열 인풋값 명이 people인 점을 활용하지 않아 오류 발생했고 console.log(helloBot()); 괄호 안에 인자 주지 않음.
Sol ) for 반복문 안에 group1 대신 people로 교체, console.log(welcome); 새로운 변수 welcome을 선언하여 가독성 높임.
🔥 Model Answer
// 초면인 사람은 0, 한 번 이상 본 사람은 1인 group1 배열로 인사봇 만들기
// 화살표함수로 전자는 "안녕하세요", 후자는 "또 만나네요"를 출력하는 배열 반환하기
// 화살표함수
const helloBot = people => { // 배열 group1을 인풋값 명 people로 받음
let result = [];
for(let i = 0; i < people.length; i++) { // 배열 people의 길이만큼 for문 반복
if(people[i] === 0) { // 원소값이 0이라면
result.push('안녕하세요'); // 새로운 배열에 "안녕하세요" 문자열값 추가
}
else if(people[i] === 1) { // 원소값이 1이라면
result.push('또 만나네요'); // 새로운 배열에 "또 만나네요" 문자열값 추가
}
}
return result; // 새로운 배열 반환
}
let group1 = [0, 1, 1, 0, 0];
let welcome = helloBot(group1);
console.log(welcome); // ['안녕하세요','또 만나네요','또 만나네요','안녕하세요','안녕하세요']
Author And Source
이 문제에 관하여(TIL#9 JS) Loops), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@threeplef/TIL9-JS-for
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Q. helloBot이라는 함수를 만들어라.
- for문을 사용하여 빈 result배열에 greetings에 들어있는 인삿말을 채워라.
- 인자에는 0과 1로 이루어진 배열이 들어간다.
let group1 = [0,1,1,0,0]
helloBot(group1); // --> ['안녕하세요','또 만나네요','또 만나네요','안녕하세요','안녕하세요']
const helloBot = people => {
let result = [];
for(let i = 0; i < group1.length; i++) {
if(group[i] === 0) {
result.push('안녕하세요');
}
else if(group[i] === 1) {
result.push('또 만나네요');
}
}
return result;
}
let group1 = [0, 1, 1, 0, 0];
let welcome = helloBot(group1);
console.log(helloBot());
▶ Feedback
- console하면 결과 값은 잘 나오나 배열 인풋값 명이 people인 점을 활용하지 않아 오류 발생했고 console.log(helloBot()); 괄호 안에 인자 주지 않음.
Sol ) for 반복문 안에 group1 대신 people로 교체, console.log(welcome); 새로운 변수 welcome을 선언하여 가독성 높임.
// 초면인 사람은 0, 한 번 이상 본 사람은 1인 group1 배열로 인사봇 만들기
// 화살표함수로 전자는 "안녕하세요", 후자는 "또 만나네요"를 출력하는 배열 반환하기
// 화살표함수
const helloBot = people => { // 배열 group1을 인풋값 명 people로 받음
let result = [];
for(let i = 0; i < people.length; i++) { // 배열 people의 길이만큼 for문 반복
if(people[i] === 0) { // 원소값이 0이라면
result.push('안녕하세요'); // 새로운 배열에 "안녕하세요" 문자열값 추가
}
else if(people[i] === 1) { // 원소값이 1이라면
result.push('또 만나네요'); // 새로운 배열에 "또 만나네요" 문자열값 추가
}
}
return result; // 새로운 배열 반환
}
let group1 = [0, 1, 1, 0, 0];
let welcome = helloBot(group1);
console.log(welcome); // ['안녕하세요','또 만나네요','또 만나네요','안녕하세요','안녕하세요']
Author And Source
이 문제에 관하여(TIL#9 JS) Loops), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@threeplef/TIL9-JS-for저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)