[JavaScript] 반복문

1. loop(반복문)

[1] for 문

for (변수 선언; 범위 , 증감식 ){
    출력값;
}



for (let i = 0; i<5 , i++){
    console.log(i);
}

위는 for 문의 기본구조다. 예시에서는 i = 0 부터 5미만일 때까지 i에 +1씩 반복한다는 얘기다.

실제로 실행해보면 0,1,2,3,4 가 나올것이다.

for(let i = 0; i<=10;i++)
{
    if(i==2)continue;
    console.log(i);
}

위와 같이 for 문안에 if문을 넣을수 있다. continue 라는것은 스킵한다고 생각하면 된다.

안에 있는 것을 해석하면 i = 2 일때 스킵한다이다. 따라서 출력값은 0,1,3,4,5,....10 이 된다.

 

for(let a =2; a<=9; a++)
{
    for(let k = 1; k <=9; k++){
    console.log(a * k)}
}

for 문안에 for문을 넣을수 있다. 출력값은 구구단의 결과값이 나올것이다.

 

{1} 별찍기

==================================

*
**
***
****
*****

for(let i =0; i<5;i++)
{
    for(let k=0; k<=i; k++)
    {
        document.write('*');
    } 
    document.write('<br/>');
}

==================================

*****
****
***
**
*

for(let i = 4; i>=0;i--)
{
    for(let k=0; k<=i; k++)
    {
        document.write('*');
    }
    document.write('<br>')
}

==================================

    *
   **
  ***
 ****
*****

for(let i = 4; i>=0; i--)
{
    for(let b =1; b<=i; b++)
    {
        document.write('&nbsp')
    }
    for(let k =4; k>=i; k--)
    {
        document.write('*');
    }
    document.write('<br>')
}

==================================

*****
 ****
  ***
   **
    *
    
for(let i = 0; i<5; i++)
{
    for(let b =1; b<=i; b++)
    {
        document.write('&nbsp')
    }
    for(let k =4; k>=i; k--)
    {
        document.write('*');
    }
    document.write('<br>')
}

for 문안에 for문을 이용해 *로 모양을 만든다.

 

첫번째만 설명해보자면

 

i = 0 일때 k = 0  k값 1개

i = 1 일때 k = 0,1  k값 2개

i = 2 일때 k = 0,1,2  k값 3개

i = 3 일때 k = 0,1,2,3  k값 4개

i = 4 일때 k = 0,1,2,3,4  k값 5개

 

k값의 개수만큼  *을 쓰고 줄바꿈을 한다.

 

[2] while 문

while 문은 기본적으로 무한루프이다. 따라서 while 문에서는 종료조건이 있어야 한다.

 

while ( 종료 조건 ) {
    실행 값
}

while 문의 기본구조이다. 종료 조건이 true 이면 계속 실행이 된다.

따라서 종료 조건에는 false값이 나오게 설정해야 종료가 된다.

 

let number = 0;

while(number<10){
    number++;
    if(number % 2 !=0) continue; //2로나눈 나머지가 0이 아니라면 건너뛰어라
    console.log(number);
}

for 문과 비슷하지만 while 문은 기본적으로 무한루프인 점이 차이가 있다.

 

2. function

[1] function의 특징

function 이란 쉽게 말해 내가 설정하고 싶은 함수를 정의하여 주는것이다.

반복되는 계산등이 필요한 경우 계산식 자체를 함수로 설정하여 만들어주면 편리하게 만들수 있다.

그렇기 때문에 코드의 재사용성이 높고 function안의 함수만 만지면 되기 때문에 유지보수도 좋다.

 

 function sum(a,b,c){
    
    return a+b+c;  //반환값 a와b를 더한 결과를 리턴한다. (반환한다.)
}

ex = sum (1,2,3);

function의 기본 구조이다. 여기서 a,b,c는 매개변수라 한다.

sum의 함수는 sum()안에 변수나 상수를 넣고 그 값들을 다 더한값이 나오게 해주는 함수이다.

따라서 ex = 6 과 같다.

 

function sum1(a,b)
{
    console.log(arguments.length);
    return a+b;
}
console.log(sum1(1,2,3,4,5))

 

기존에 정의한 매개변수는 a,b  2개이다.

하지만 console.log 에서는 5개가 입력되었다.

이처럼 함수를 정의 한 매개변수의 수보다 더 많은 매개변수가 입력될수 있다.

이때에는 정의한 2개만큼 앞에서부터 차례대로 1,2를 받아들이고 나머지 3,4,5는 받아들이지 않는다.

그렇기 때문에 오류문구가 나지 않는다.

 

[2] 정의 방식

{1} 함수 선언문

function add(x,y)
{
    return x+y;
}

{2} 함수 표현식

 

(1) 익명함수

let add = function(x,y){
    return x+y;
}

(2) 기명함수

let add1 = function add(a,b){
    return a+b;
}

{3} 함수 생성자 함수

let add = Function('x','y','return a+b');

{4} 화살표 함수(arrow function) 

 

let add = (x,y)=>x+y;