JavaScript DAY2

1. 연산자(Operator)

1. 산술 연산자
    +, -, *, /, %, **

2. 비교 연산자
    >, <, >=, <=, ==, !=, ===, !==
    === : 두식의 값이 같고, 타입까지 같아야 함
    !== : 두식의 값이 다르고, 타입까지 달라야 함

    ex) 
    3 == 3 -> true
    '3' == 3 -> true // 값은 3으로 같으니 true
    '3' === 3 -> false // 타입이 달라서 false

3. 대입 연산자
    =, +, -=, *=, /=, %=, **=

4. 증감 연산자
    ++변수, --변수, 변수++, 변수--

    ex)
    let num = 10
    ++num  // 11 num = num + 1
    --num // 10 num = num - 1
    num++ // 11 num = num + 1
    num-- // 10 num = num - 1

    파이썬 ex)
        num += 1

    num = 10
    result = ++num // num = 1, result = 11
    result = num++ // result=11, num = 12

5. 논리 연산자
    and,    or,     not
    &&      ||       !

6. 비트 연산자
    &, |, !, ^, <<, >>

7. 삼항 연산자

    변수 = 조건식 ? 반환값1 : 반환값2
        조건식의 결과가 true일 때 반환갓1이 변수에 저장
        조건식의 결과가 false일 때 반환값2가 변수에 저장

 

제어문

1. 조건문
    if문
    switch문

2. 반복문
    while문
    for문

if문

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

if ~ else 문

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

if ~ else if ~ else 문

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

 

switch문

switch문도 if문과 함게 조건문에 속하는 구문입니다. 하지만 if문에 들어가는 조건식처럼 모든 형태의 조건식이 들어갈 수 있는 것은 아닙니다.     

switch문에 조건으로 사용될 수 있는 연산자는 '==', 즉 두개의 피연산자의 값이 같을 때만 조건으로 활용할 수 있습니다. 따라서 하나의 변수 안에 저장되어 있는 값을 다수의 값과 비교해야 할 때 주로 사용합니다.

    ex)
        switch(변수 또는 값){
            case 값1 : 
                변수와 값1이 같은 경우 실행할 문장;
                ...
                break;

            case 값2 : 
                변수와 값2이 같은 경우 실행할 문장;
                ...
                break;

            case 값3 : 
                변수와 값3이 같은 경우 실행할 문장;
                ...
                break;

            case 값4 : 
                변수와 값4이 같은 경우 실행할 문장;
                ...
                break;

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

 

while문

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

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

    ✓ do ~ while문은 조건식의 결과가 처음부터 false인 경우라도 1번은 {}에 문장을 실행함

 

for문

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

    let sum=0;
    for(i=1; i<=10; i++){
        sum += i;
    }

    ✓ for문의 무한루프
    for(;;){

    }

 

break문

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

    for(let i=0; i<10; i++){
        if(i == 5) break;
    }

 

continue문

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

    let num = 1;
    while(num <= 10){
        console.log(num); // 1
        num++;
        if(num == 5) continue;
        ...
        ...

    }

 

2. 배열(Array)

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

배열 선언
let 배열명;

배열 초기화
배열명 = [요소1, 요소2, 요소3, 요소4, ...];

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

배열을 함수로 생성하는 방법
const 배열명 = Array(요소1, 요소2, 요소3, 요소4, ...);

배열의 접근
let arr = [100, 200, 300];

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

 

✓ 자바스크립트 배열의 특징

1. 배열 요소의 타입이 고정되어 있지 않음
    let arr = [1, 1.5, '김사과', true];

2. 배열 요소의 인덱스가 연속적이지 않아도 됨
    let arr;
    arr[0] = 1;
    arr[1] = 100;
    arr[4] = 10;
    (index 2, 3은 undefined)

 

Array 객체의 메서드(프러퍼티 메서드)

push() : 배열의 요소를 추가
pop() : 배열의 마지막 인덱스 번호에 있는 값을 제거
shift() : 배열의 첫번째 인덱스 번호에 있는 값을 제거
concat() : 두 배열을 합침
join() : 배열 요소 사이에 원하는 문자를 삽입
reverse() : 배열을 역순으로 재배치
sort() : 배열을 오름차순으로 정렬

 

배열을 이용한 반복

 

for in 문

변수에 배열의 인덱스 또는 객체의 key가 저장되며 반복

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

    for(번수 in 배열 또는 객체){
        배열의 요소 개수 또는 객체의 프러퍼티 개수만큼 반복할 문장;
        ...
    }

    ex)
    for(let i in arr){ // 10, 20, 30이 들어가는것이 아닌 index 0, 1, 2가 들어간다.
        ... // i = 0, 1, 2
    }

    for(let i in user){ // userid, name, age가 들어간다.
        ... //i = userid, name, age
    }

 

for of 문

변수에 배열의 value 또는 객체의 value가 저장되며 반복

for(번수 of 배열 또는 객체){
        배열의 요소 개수 또는 객체의 프러퍼티 개수만큼 반복할 문장;
        ...
    }

    ex)
    for(let v of arr){ // 10, 20, 30
        ... // v = 10, 20, 30
    }

 

forEach 문

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

    // 변수2, 변수3은 생략 가능
    // 변수는 총 3개 까지만 들어간다.
    배열명.forEach(function(변수1, 변수2, 변수3){ 
        배열의 요소 개수만큼 반복할 문장;
        ...
    });

    ex) 
    arr.forEach(function(v, i, ar){
        ... // v = 10, 20, 30
        ... // i = 0, 1, 2
        ... // ar = [10, 20, 30], [10, 20, 30], [10, 20, 30]
    });

 

사용자 정의 함수(function)

- 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록
- 필요할 때마다 호출하여 해당 작업을 반복하여 수행할 수 있음
- 코드를 재활용

 

1. 함수 선언식

function 함수명(매개변수1, 매개변수2 ...) {
        함수가 호출되었을 때 실행할 문장;
        ...
        return 값;
    }

    호출할때 
    함수명(값1, 값2, ...)

    리턴값을 원할때
    변수 = 함수명(값1, 값2, ...)

 

2. 함수 표현식

const 상수명 = function(매개변수1, 매개변수2, ...){
        함수가 호출되었을 때 실행할 문장;
        ...
        return 값;
    }

    변수 = 상수명(값1, 값2, ...);

 

◈ 함수 선언식 및 표현식의 차이점

1. 함수 선언식으로 만들면 인터프리터가 메모리에 우선으로 옮기는데 함수선언식으로 만든건 먼저 올라간다
표현식은 두번째에 올라가기 때문에 순서 차이가 있다

2. 표현식은 변수처럼 사용을 할 수 있기 때문에 상수에 담아 둔다.

3. 함수 뒤에 있는것을 사용하고 



디폴트 매개변수

- 매개변수의 값을 설정하는 것
- 매개변수의 값을 정하지 않으면 기본값을 변수에 저장

function 함수명(매개변수1=값1, 매개변수2=값2 ...) {
    함수가 호출되었을 때 실행할 문장;
    ...
    return 값;
    }
 
    변수 = 함수명();
    변수 = 함수명(값1, 값2, ...);



나머지 매개변수

생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한번에 지정할 수 있음

    function 함수명(매개변수1, ... 매개변수2){
        함수가 호출되었을 때 실행할 문장;
        ...
        return 값;
    }
    매개변수1 <- 값1
    매개변수2 <- 값2 ~ 값5

    함수명(값1, 값2, 값3, 값4, 값5);