본문 바로가기
개발/자바스크립트

JavaScript 기본 3

by ^..^v 2023. 1. 27.
728x90
반응형

배열

  • 여러 개의 자료를 한꺼번에 다룰 수 있는 자료형
  • 대괄호로 묶어서 표현하며, 각 자료는 쉼표로 구분
  • 자바스크립트의 배열은 여러 자료형을 섞어서 사용할 수 있음
> let array = [ 10, 20.33, '문자열', true, [ 1, 2, 3 ], { name: '홍길동', age: 23 } ]
undefined
> array
[ 10, 20.33, '문자열', true, [ 1, 2, 3 ], { name: '홍길동', age: 23 } ]

 

배열 요소(element)

  • 배열에 들어 있는 각 자료
  • 배열 요소에 접근할 때는 대괄호를 사용 : 배열변수[인덱스]
> array[0]
10
> array[4]
[ 1, 2, 3 ]
> array[4][0]
1
> array[5]
{ name: '홍길동', age: 23 }
> array[5].name
'홍길동'
> array[-1]
undefined
> array[6]
undefined
> array[1] = 33.20	// 배열 요소를 변경
33.2
> array[1]
33.2

 

while 반복문

 

> while (true) {
... console.log('무한 반복');
... }
무한 반복
무한 반복
무한 반복
무한 반복
			<<< Ctrl + C 키를 눌러서 중지
Uncaught Error: Script execution was interrupted by `SIGINT`
    at Script.runInThisContext (node:vm:129:12)
    at REPLServer.defaultEval (node:repl:572:29)
    at bound (node:domain:433:15)
    at REPLServer.runBound [as eval] (node:domain:444:12)
    at REPLServer.onLine (node:repl:902:10)
    at REPLServer.emit (node:events:525:35)
    at REPLServer.emit (node:domain:489:12)
    at [_onLine] [as _onLine] (node:internal/readline/interface:422:12)
    at [_line] [as _line] (node:internal/readline/interface:892:18)
    at [_ttyWrite] [as _ttyWrite] (node:internal/readline/interface:1270:22) {
  code: 'ERR_SCRIPT_EXECUTION_INTERRUPTED'
}
>

 

숫자로 구성된 배열의 요소를 하나씩 가져와서 해당 숫자가 짝수/홀수인지를 콘솔에 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let index = 0;
        let numbers = [ 10, 3, 20, 82, 23, 976 ];
        while (index < numbers.length) {
            if (numbers[index] % 2 === 0) {
                console.log(`numbers[${index}] = ${numbers[index]}는 짝수입니다.` );
            } else {
                console.log(`numbers[${index}] = ${numbers[index]}는 홀수입니다.` );
            }
            index ++;
        }
    </script>
</head>
<body>
    
</body>
</html>

 

 

for 반복문

0 부터 100 까지 더한 결과를 콘솔에 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let sum = 0;
        for (let i = 0; i <= 100; i ++) {
            sum += i;
        }
        console.log(sum);
    </script>
</head>
<body>
    
</body>
</html>

 

배열 요소를 마지막 부터 처음 까지 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let array = [ 10, 20.33, '문자열', true, [ 1, 2, 3 ], { name: '홍길동', age: 23 } ];
        for (let i = array.length - 1; i >= 0; i --) {
            console.log(`array[${i}] = ${array[i]}`);
        }
    </script>
</head>
<body>
    
</body>
</html>

 

for ... in 반복문 / for ... of  반복문

for (const variable in object) {
  statement
}

// variable : 매번 반복마다 다른 속성이름(Value name)이 변수(variable)로 지정
// object   : 반복 작업을 수행할 객체로 열거형 속성을 가지고 있는 객체
for (let variable of iterable) {
      statement
}

// variable : 각 반복에 서로 다른 속성값이 variable에 할당
// iterable : 반복되는 열거 가능(enumerable)한 속성이 있는 객체

 

for, for ... in, for ... of 구문을 이용해 배열 요소를 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let colors = [ "빨강", "주황", "노랑", "초록", "파랑", "남색", "보라" ];

        // for 
        for (let i = 0; i < colors.length; i ++) {
            console.log(`colors[${i}] = ${colors[i]}`);
        }
        console.log('------------');

        // for ... in
        for (const index in colors) {
            console.log(`colors[${index}] = ${colors[index]}`);
        }
        console.log('------------');

        // for ... of
        let index = 0;
        for (const color of colors) {
            console.log(`colors[${index}] = ${color}`);
            index ++;
        }
        
    </script>
</head>
<body>
    
</body>
</html>

 

중첩 반복문

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let output = '';
        for (let y = 0; y < 5; y ++) {
            for (let x = 0; x < y + 1; x ++) {
                output += '*';
            }
            output += '\n';
        }
        console.log(output);
    </script>
</head>
<body>
    
</body>
</html>

 

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let output = '';
        for (let y = 0; y < 5; y ++) {
            for (let x = 0; x < 5 - y; x ++) {
                output += ' ';
            }
            for (let x = 0; x < y + 1; x ++) {
                output += '*';
            }
            output += '\n';
        }
        console.log(output);
    </script>
</head>
<body>
    
</body>
</html>

 

 

break  키워드

숫자로 구성된 배열에서 처음으로 발견한 짝수를 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let i = 0;
        let numbers = [ 1, 63, 27, 222, 9, 289, 95, 20 ];
        while (true) {
            if (numbers[i] % 2 === 0) {
                console.log(`처음으로 나온 짝수는 ${numbers[i]} 입니다.`);
                break;
            }
            i ++;
        }
    </script>
</head>
<body>
    
</body>
</html>

 

continue  키워드

숫자로 구성된 배열에서 짝수를 제외하고 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let numbers = [ 1, 63, 27, 222, 9, 289, 95, 20 ];
        for (let i = 0; i < numbers.length; i ++) {
            if (numbers[i] % 2 === 0) {
                continue;
            } 
            console.log(numbers[i]);
        }
    </script>
</head>
<body>
    
</body>
</html>
728x90
반응형
저작자표시 비영리 변경금지

'개발 > 자바스크립트' 카테고리의 다른 글

JavaScript 기본 2  (0) 2023.01.26
JavaScript 기본 1  (0) 2023.01.25
별점 표시 및 입력  (0) 2023.01.20

관련글

댓글

티스토리툴바