4/5(수) IT K-DT(25일차) / 8.연산자~10.배열

8. 연산자 (Operator)

8-1. 산술 연산자

8-2. 비교 연산자

8-3. 대입 연산자

8-4. 증감 연산자

8-5. 논리 연산자

8-6. 삼항 연산자

9. 제어문

9-1. 조건문

9-1-1. if 문

9-1-2. if ~ else 문

9-1-3. if ~ else if ~ else 문

9-1-4. switch 문

9-2. 반복문

9-2-1. while 문

9-2-2. do ~ while 문

9-2-3. for 문

9-3. break문

9-4. continue문

10. 배열 (Array)

10-1. 배열(Array) 의 개요

10-2. 배열(Array) 객체의 메소드

10-3. 배열(Array)을 이용한 반복

10-3-1. for in 문

10-3-2. for of 문

10-3-3. forEach 문

예제

8. 연산자 (Operator)

8-1. 산술 연산자

사칙연산( + , - , * , / ), 나머지( % ), 제곱( ** )

8-2. 비교 연산자

부등호 ( > , < , >= , <= , == , != )
=== : 두 식의 값이 같고, 타입까지 같아야 true.
!== : 두 식의 값이 다르고, 타입까지 달라야 true.
예)
3 == 3  →  true
'3' == 3  →  true (자동 형변환에 의함)
3 === 3  →  true
'3' == 3  →  false (타입이 다름)

8-3. 대입 연산자

=, +=, -=, *=, /=, %=, **=
    예)
    num = 10
    num += 5일때 돌아가서 합산하는 inplace 연산.

8-4. 증감 연산자

++변수, --변수 (전치)
변수++, 변수-- (후치)
1을 더해줌, 1을 빼줌
예)

num = 10

result = ++num       // result = 11, num = 11 # num을 1 증가시키고, 그 값을 result에 할당.
result = num++       // result = 11, num = 12 # num 값을 result에 할당하고, num을 1 증가.

result = --num       // result = 11, num = 11 # num을 1 감소시키고, 그 값을 result에 할당.
result = num--       // result = 11, num = 10 # num 값을 result에 할당하고, num을 1 감소.

python의 num += 1, num -=와 동일.

8-5. 논리 연산자

&& : and
|| : or
! : not

8-6. 삼항 연산자

변수 = 조건식 ? 반환값1 : 반환값2

조건식이 true일 때는 반환값1을 변수에 투입.
조건식이 false일 때는 반환값2을 변수에 투입.

9. 제어문

9-1. 조건문

9-1-1. if 문

IF (조건식) {
            조건식의 결과가 true일 때 실행할 문장;
            ...
        }

9-1-2. if ~ else 문

IF (조건식) {
            조건식의 결과가 true일 때 실행할 문장;
            ...
        } ELSE {
            조건식의 결과가 false일 때 실행할 문장;
            ...
        }

9-1-3. if ~ else if ~ else 문

IF  (조건식1) {
            조건식1의 결과가 true일 때 실행할 문장;
            ...
} ELSE IF (조건식2) {
            조건식2의 결과가 true일 때 실행할 문장;
            ...
} ELSE IF (조건식3) {
            조건식3의 결과가 true일 때 실행할 문장;
            ...
} ELSE {
            모든 조건식의 결과가 false일 때 실행할 문장;
            ...
}

예) 나이의 입력에 따른 결과를 출력하는 경우. (if문 이용)

9-1-4. switch 문

SWITCH (변수) {
CASE 값1 :
                변수와 값1이 같을 경우 실행할 문장;
                ...
                BREAK;

CASE 값2 :
                변수와 값2이 같을 경우 실행할 문장;
                ...
BREAK;

CASE 값3 :
                변수와 값3이 같을 경우 실행할 문장;
                ...
BREAK;

            DEFAULT :
                변수와 모든 값이 다를 경우 실행할 문장;
                ...
}

예) 아동, 청소년, 성인의 입력에 따라 다른 입장료가 출력되게 하는 경우. (switch문 이용)

9-2. 반복문

9-2-1. while 문

WHILE (조건식) {
조건식의 결과가 true인 동안 반복할 문장;
...
}

예) 구구단을 만드는 경우. (while문 이용)

9-2-2. do ~ while 문

DO {
            조건식의 결과가 true인 동안 반복할 문장;
            ...
        } WHILE  (조건식);

잘 사용되지 않는다.

9-2-3. for 문

FOR ( 초기값; 조건식; 증감식 ) {
            조건식의 결과가 true인 동안 반복할 문장;
            ...
        }

예) 구구단을 만드는 경우. (for문 이용)

for문의 무한루프

FOR  ( ; ; ) {
         ..
        }

9-3. break문

switch문 또는 반복중인 루프 내에서 사용. 해당 문장을 완전히 종료시키고, 다음에 위치한 실행문으로 이동.
예)

    num = 1;

    while (num<=10) {
        if (num == 5) break;
        console.log(num); // 1 2 3 4 까지 출력됨. (5 에서는 break )
        num++;
    }

9-4. continue문

반복중인 루프 내에서 사용하여 해당 루프의 나머지 부분을 건너뛰고 다음 반복문의 판단으로 넘어감.

예)

    num = 1;

    while (num<=10) {
        console.log(num);
        num++;
        if (num == 5) continue; // 1 2 3 4 까지 출력됨. (4 까지 continue )
    }

주로 while문보다 for문에서 더 빈번하게 사용됨.

10. 배열 (Array)

10-1. 배열(Array) 의 개요

배열(Array)의 정의

이름과 인덱스로 참조되는 정렬된 값의 집합 (자료구조)
배열을 구성하는 각각의 값을 배열 요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 함.

배열(Array) 선언

LET 배열명 ;

배열(Array) 초기화

배열명 = [요소1, 요소2, 요소3 ..];

예)

let arr;
arr = [100, 200, 300];

let arr = [100, 200, 300];

배열 객체 생성

const 배열명 = new Array( 요소1, 요소2, 요소3 ...);

배열의 접근

let arr;
arr = [100, 200, 300];

console.log(arr[0]);    // 100이 출력.
console.log(arr[1]);    // 200이 출력.
console.log(arr[2]);    // 300이 출력.

Javascript 배열의 특징
배열 요소의 타입이 고정되어 있지 않음.
    let arr = [1, 1.4, '김사과', true]; // 배열에 정수, 실수, 문자열, 불린이 다 같이 들어있어도 상관없다.

배열 요소의 인덱스가 연속적이지 않아도 됨.
    let arr;
    arr[0] = 1;
    arr[1] = 20;
    arr[4] = 5;  // 2, 3을 뛰어넘어 4를 지정해도 상관없다. 대신 2, 3은 undefined로 처리된다.

for (let i=0; i
            console.log(user[i]); // 배열 user의 값을 모두 확인하는 코드. (아래 사진이 결과값.)
        }

10-2. 배열(Array) 객체의 메소드

push(): 배열의 요소를 추가

        const user = [1, 'apple', '김사과', 20, '서울'];

        user.push('여자');
        console.log(user); // user 배열 맨 뒤에 '여자'가 생성.

pop(): 배열의 마지막 값을 제거

        const user = [1, 'apple', '김사과', 20, '서울', '여자'];

let result = user.pop();
        console.log(user); // user 배열 맨 뒤의 '여자'를 삭제
        console.log(result); // 삭제한 '여자'를 반환

shift(): 배열의 첫번째 값을 제거

        const user = [1, 'apple', '김사과', 20, '서울'];

result = user.shift();
        console.log(user); // user 배열 맨 앞의 1을 삭제
        console.log(result); // 삭제한 1을 반환

concat(): 두 개의 배열을 합함

        const user = ['apple', '김사과', 20, '서울'];
        const sub = ['여자', 'ISFP'];

        const concat_user = user.concat(sub); // user 배열과 sub 배열을 합해 concat_user을 생성.
        console.log(concat_user);

join(): 배열 사이에 문자 삽입

        const user = ['apple', '김사과', 20, '서울'];

        const user_join = user.join('😊'); // user 배열의 사이에 이모티콘을 삽입.
        console.log(user_join);

join을 이용할 시 객체의 type이 바뀜.
        console.log(typeof(user)); // type : object.
        console.log(typeof(user_join)); // type : string.

sort(): 배열을 오름차순 정렬
reverse(): 배열을 역순 배치

        const arr = ['a', 'z', 'c', 'f', 'r'];

        arr.sort();
        console.log(arr);   // 오름차순으로 sort

        arr.reverse();
        console.log(arr);   // 오름차순을 reverse하여 내림차순으로 바꿈 (Javascript는 내림차순이 따로 없음.)

10-3. 배열(Array)을 이용한 반복

10-3-1. for in 문

변수에 '배열의 index/객체의 key'가 저장되며 반복.
객체의 속성을 순회할 때 사용.

    const arr = [10, 20, 30];
    const user = {'userid':'apple', 'name':'김사과', 'age':20};

    for (변수 in 배열/객체) {
        배열의 요소개수/객체property개수 만큼 반복할 문장;
        ...
    }

예) for in 문 배열 사용하기

        const user = [1, 'apple', '김사과', 20, '서울'];

        for (let i in user) { // 배열 user를 for...in 루프를 사용하여 반복하면서, 각 요소의 인덱스와 값을 출력.
            console.log(`i:${i}, user[i]:${user[i]}`);
        }

예) for in 문 객체 사용하기

        const member = {'userid':'apple', 'name':'김사과', 'age':20};

        for (let i in member) { // 객체 member를 for...in 루프를 사용하여 반복하면서, 각 속성의 키와 값을 출력
            console.log(`i:${i}, member[${i}]: ${member[i]}`);
        }

10-3-2. for of 문

변수에 '배열의 value/객체의 value'가 저장되며 반복.
배열을 순회할 때 사용.
iterator 속성을 가지는 컬렉션 전용. (list, symbol 등의 순서를 가지는 객체만 사용이 가능.)

    const arr = [10, 20, 30];
    const user = {'userid':'apple', 'name':'김사과', 'age':20};

    for (변수 of 배열/객체) {
        배열의 요소개수/객체property개수 만큼 반복할 문장;
        ...
    }

예) for of 문 배열 사용하기

        const user = [1, 'apple', '김사과', 20, '서울'];

        for (let i of user) { // 배열 user를 for...of 루프를 사용하여 반복하면서, 각 요소의 값을 출력
            console.log(`i:${i}`);
        }

10-3-3. forEach 문

배열에서만 사용가능. 요소의 개수만큼 반복.

    const arr = [10, 20, 30];

    배열명.forEach(function(변수1, 변수2, 변수3){
        배열의 요소개수만큼 반복할 문장;
        ...
    });

변수1: 배열의 요소값이 저장됨. (10, 20, 30이 차례대로 들어감.)
변수2: 배열의 index값이 저장됨. (0, 1, 2가 차례대로 들어감.)
변수3: 배열의 객체자체가 저장됨. ([10, 20, 30], [10, 20, 30], [10, 20, 30] 가 차례대로 들어감.)

예)

        const user = [1, 'apple', '김사과', 20, '서울'];

        user.forEach(function(v, i, arr){
            console.log(`v:${v}, i:${i}, arr:${arr}`);
        });

예제

문제1
이름, 국어점수, 수학점수, 영어점수를 입력받아 총점과 평균을 출력하는 문서를 작성해보자.
(단, 입력은 propmt를 이용하여 받음.)

------------------------------------------------------------------
김사과님의 성적표
국어: 90점
수학: 90점
영어: 90점
총점: 270점
평균: 90점

------------------------------------------------------------------

문제2
달(month)을 입력받아 해당 달의 마지막 일이 며칠인지 출력하는 문서를 작성해보자.
(단, 입력은 prompt를 사용하고, 조건문은 switch문을 사용함.)

------------------------------------------------------------------
달을 입력하세요. OO
OO월의 마지막 일자는 31일입니다.

------------------------------------------------------------------

문제(test3.html)
특정 숫자를 입력받아 짝수가 나올 때 까지 반복하는 문서를 만들어보자.
------------------------------------------------------------------

숫자를 입력하세요 9
홀수입니다.
숫자를 입력하세요 3
홀수입니다.
숫자를 입력하세요 4
짝수입니다. 프로그램을 종료합니다.
------------------------------------------------------------------

문제4
3의 배수가 출력될 때 '짝!'이라는 단어를 100까지 출력하는 문서를 만들어보자.
------------------------------------------------------------------
1 2 짝! 4 5 짝! ... 100

--------------------------------------------------------------------------

저작자표시 비영리 변경금지

yj.cho

4/5(수) IT K-DT(25일차) / 8.연산자~10.배열