오늘은 자바스크립트 반복문에 대해서 공부한 것에 대해서 정리해보려고 한다!
자바스크립트의 반복문에는 크게 2가지가 있다.
for 반복문, while 반복문!
우선 for 반복문이다.
for 반복문
개요
for (변수 설정; 반복 조건 지정; 반복 조건에 도달하기 전까지 실행할 변수의 조정){
반복 실행문;
}
for 문은 위와 같은 형태로 사용한다.
내가 표현을 잘못해서 그런지 이해하기가 어렵다. 코드로 살펴본다!
for(let i = 0; i < 1000; i++){
console.log('안녕하세요');
}위 코드는 i가 0부터 1000보다 작은 동안 i에 1씩 더하면서 '안녕하세요'를 출력하는 코드이다. i가 0부터 1000까지 1씩 더해지는 과정에서 console.log('안녕하세요')가 한번씩 실행되기 때문에 총 1000번 '안녕하세요'가 출력된다.
for 문 반복은 일반적으로 반복문 하면 생각이 드는 형태와 조금 다르다.(일반적인 반복문이 for문 이긴하지만, 아무것도 몰랐을 때를 생각해보면 for문이 왜 반복문이 되는지 이해하기 어려웠다.)
음료수 자판기에 동전을 넣으면(입력) 음료수가 나오는(출력) 것처럼, for라는 반복문에 변수를 넣으면(입력) 반복문을 실행(출력)하는 것이다. 입력에 i를 넣고, 출력에 '안녕하세요'를 넣은 형태이다.
위 코드보다 좀 더 자판기 스러운 예를 봐야겠다.
for(let i = 0; i < 1000; i++){
console.log(i);
}이제 위의 for문은 i는 0부터 1000보다 작을 때까지 반복하는데 한번 반복할 때마다 i를 출력하고 반복이 끝나면, i에 1을 더해준다.
그럼 출력은 0,1,2,3,4...999 과 같을 것이다. 반복해서 실행할 실행문에 i(console.log(i))를 넣으면 i를 그대로 출력할 수도 있고 다른 형태의 반복을 하고 싶다면, 반복해서 실행할 다른 코드를 작성하면 되겠다.
for (변수 설정; 반복 조건 지정; 반복 조건에 도달하기 전까지 실행할 변수의 조정){
반복 실행문;
}
앞에서 본 이해하기 어려운 설명에 코드를 대입해보면서 살펴보자면, 변수 설정에는 let i = 0이 들어갔다. 조건에는 i < 1000 (i가 1000보다 작은동안)이 들어갔다.
'반복 조건에 도달하기 전까지 실행할 변수의 조정' 에는 i++이 들어가게 되면서 반복을 한번 끝내고 난 후에는 i에 1씩 더해서 점차 반복문을 끝내기 위해 달려간다.
만약 조건을 i < 1000으로 설정하고 변수의 조정에는 i--를 넣으면 i는 계속 조건을 만족하기 때문에 무한정으로 반복된다.
지금까지 정리한 for문은 일반적 형태의 for문이고, 아래부터는 여러개의 자료를 쉽게 다룰 수 있는 array 자료형과 관련한 반복문인 for in과 for of에 대해서 정리해본다.
array
array는 여러개의 자료를 한번에 다룰 수 있는 자료형이다.
let 배열이름 = [자료1, 자료2, 자료3,...]
과 같은 형태로 선언 및 초기화한다.
배열이름[인덱스] 와 같은 형태로 배열의 요소를 indexing 할 수도 있다.
let array1 = [1,2,3,4]
console.log(array1[1])//array1[1]은 2이다. index는 자리를 뜻하며 맨 첫 번째 자료의 인덱스는 항상 0부터 시작한다.
array1[0] =1000; // 이와 같이 indexing을 하고 값을 대입하면 그자리의 자료가 대체된다. 이 예제에서는 0번째 인덱스인 1이 1000으로 대체되었다.
console.log(array1)
>>> 2
[ 1000, 2, 3, 4 ]for in, for of
for in과 for of는 기존 for문에 array객체를 반복할 수 있는 기능이 추가된 for문이다.
array 배열의 요소를 하나씩 반환하며, 모든 요소들의 반환이 끝나면 반복문이 종료된다.
for in은 배열의 인덱스를 반복하고, for of는 배열의 요소를 반복한다.
for in
let arrayin = ['기차', '버스', '비행기', '택시'];
for (let i in arrayin){
console.log(i)
}
> 0
1
2
3
배열의 인덱스를 반복한다.
for of
let arrayin = ['기차', '버스', '비행기', '택시'];
for (let i of arrayin){
console.log(i)
}
>>> 기차
버스
비행기
택시배열의 요소인 기차, 버스, 비행기, 택시를 반복한다.
while
while 반복문은 for문과 비슷하지만 더 단순하다.
조건문이 참인 동안 반복한다.
while(<불표현식>){
반복실행문
}
코드로 살펴본다.
while(true){
console.log('안녕하세요')
}
불표현식이 true이기 때문에 true는 항상 참이다. 따라서 '안녕하세요'가 무한정으로 출력된다.
for문에서 잠깐 살펴봤던 무한루프 반복문이다!대부분의 코드에서 무한반복은 잘 쓰이지 않고, 쓸 일도 많이 없다.
반복문은 특별한 장치를 더해서 유한 반복문으로 변경할 수 있다. 코드로 보잣
//1
let c = 0;
while(c<3){
console.log('안녕하세요');
c++
}
// c라는 변수를 지정해주고, c<3을 조건문으로 지정해주었다. 반복의 마지막에 c++이라는 연산을 해주면서, c를 1씩 증가시켜서 조건문이 false가 될 때 반복문이 종료된다.
>>> 안녕하세요
안녕하세요
안녕하세요
//2
let d = 0
while(true){
console.log('안녕하세요');
d++
if (d==3){
break;
}
}
// break를 사용해서 if 조건이 만족되었을 때 반복문을 탈출함.
>>> 안녕하세요
안녕하세요
안녕하세요break 키워드
2번 예제에서 사용된 break라는 키워드는 반복문을 벗어날 때 사용된다.
if문으로 조건을 설정하고 해당 조건을 만족하면 무한반복문을 벗어나게 설정할 수 있다.
if 조건문으로 break를 설정하지 않고, 아래와 같이 break만 단독으로 사용하게 된다면 반복문이 1차례만 반복되고 바로 break를 만나기 때문에 바로 종료된다.
let d = 0
while(true){
console.log('안녕하세요');
d++
break
}
>>> 안녕하세요
continue 키워드
반복문 중간에 내가 원하는 구간에서 반복을 skip하고 싶을 때가 있는데 그럴 때 continue를 사용한다.
구체적으로 반복문에서 continue키워드를 만나면 해당 반복을 종료하고 다음 반복으로 넘어간다.
간략한 프로세스로 이해하면 skip(생략)과 비슷하거나 같다.
짝수만 출력하는 반복문을 작성해보자.
let d = 0
while(true){
if (d%2 ==1){
d++;
continue
// d가 홀수라면 1을 더하고 반복문을 탈출한다. 사실 continue가 없어도 문제 없이 실행되는 코드이다.
//하지만 continue가 있으면 뒤에 어떤게 있더라도 해당 반복문을 종료하고, 다음 반복문으로 넘어간다.
}
else{
console.log(d);
d++;
}
}
>>> 2
4
6
...while과 continue를 사용하기 위해서 만들어보았는데 코드가 많이 지저분하다,,
위 코드보다 효율적으로 continue가 쓰일 곳은 정말 많다!
Scope
변수가 사용될 수 있는 범위가 있다. {} 기호로 지정되고 이 안에 있는 변수는 밖에서 사용할 수 없다.
위에서 살펴본 반복문에서 모두 {}기호가 사용되었는데, 마찬가지로 해당 반복문의 scope에서 초기화 된 변수는 해당 scope 밖에서 사용하면 오류가 발생한다.
{let a = 1}
console.log(a)
>>> ReferenceError: a is not defined
scope안에서 선언,초기화 된 변수 a를 해당 scope 밖에서 호출했기 때문에 reference error가 발생했다.
Hoisting
아직 내용이 잘 이해가 안되서 대충 적어만 놔야겠다.
function hoisting(){
console.log(a);
var a = 1;
console.log(a);
}
hoisting()
>>> undefined
1var a의 선언 및 할당이 첫번째 출력이후에 나타나기 때문에 원래라면 첫번째 출력에서 undefined error가 발생하겠지만, hositing으로 var 선언이 해당 함수의 최상단으로 올라가면서 undefined를 출력하게 된다.
function hoisting(){
var a;
console.log(a);
a = 1;
console.log(a);
}
hoisting()
>>> undefined
1실제로는 위와 같이 실행되는 것과 같다.
아직 부족한 개념이 많아서 아래 키워드는 추후에 정리할 필요가 있다!
function hoisting, TDZ, let hoisting
