자바스크립트 기초문법▶변수/자료형/연산자/조건문/함수

변수?

특정 데이터값을 임시로 저장하는 공간

자주쓰는 데이터값을 효율적으로 관리

한번 찾은 데이터를 재활용 하기 위해 사용

 

var 변수명 = 대입값;

 

    //es5
    //var num; //변수 선언
    //num = 5; //변수에 값 할당, 대입
    var num = 5; //변수 초기화
    console.log(num);

    num = 3; //변수 재할당
    console.log(num);

    //es6
    //const : 값이 바뀌면 안될때, 상수   
    //const 방식은 재할당 불가능하고 배열이나 객체같은 참조형 값의 변경은 가능
    //let : 특정 변수에 저장될 값이 자주 바뀔때 (재할당 허용)
    //let : 기존의 var 선언방식과는 다르게 호이스팅을 막아줌

 

 

 

변수명 작성시 유의할점

    1. 숫자로 시작불가
    2.특수문자 삽입불가 (_, $는 가능)
    3.대소문자 구문 (apple, Apple 해당 두개의 변수는 다른 변수명)
    4.예약어 불가 (let, fonst, for, if, function)
    5.한글 불가

 

---

자료형

원시형자료 (primitive type) : 특정값을 메모리에 바로 저장 (값만 저장)

      1. 문자열 (String)
      2. 숫자 (Number)
      3. 불리언 (Boolean) true, false
      4. undefined - 변수를 만들고 값을 할당하지 않으면 undefined가 대신 저장됨

 

참조형자료 (reference type) : 값의 참조소값만 메모리에 저장 (해당 값의 다양한 내장기능들도 같이 참조)
      5. null (Object) - 값이 비워져 있긴 하지만 명시적으로 일부러 값을 비워둔 경우

                                (메모리는 만들어야 하는데 지금당장 값을 넣을수 없는 경우)
      6. 배열 (Array) - 여러개의 값을 그룹으로 묶어서 저장된 형태 (각 값들의 순서값으로 탐색 가능)
      7. 객체 (Obect) - 여러개의 값을 그룹으로 묶어서 저장된 형태 (각 값마다 고유의 key값을 넣어서 저장하고 탐색가능)

 

형변환 
→ 자동으로 자료형이 변환되는 형태
      숫자 → 문자
      문자 → 숫자

 

 

    var num = '2';
    console.log(typeof num);
    → string


    var num1 = 2;
    var num2 = '3'
    var result = num1 + num2;
    console.log(result);
    → 23
    

    var num3 = 2;
    var num4 = 5;
    var num5 = '7';
    var result1 = num3 + num4 + num5; //'77'
    var result2 = num5 + num4 + num3; //'752'
    → result2가 77로 뜨게 하려면 num5 + ( num4 + num3 ) 괄호를 넣어준다.


    var isOk = true;
    console.log(typeof isOk);
    → boolean


    var err;
    console.log(typeof err);
    → undefined


    var nothing = null;
    console.log(typeof nothing);
    → object
    
    
     //배열
     var colors = ['red', 'green', 'blue'];
     console.log(colors[0])
     console.log(colors[1]);
     console.log(colors[2]);
     console.log(colors.length);
     → red, green, blue, 3
     
     
     
     //객체
     var student1 = {
          name: 'David',
          age: 20,
          isFemale: false
        }

     console.log(student1.name);
     console.log(student1['age']);
     → David, 20

 

 

---

연산자

→ 특정 값을 도출하기 위한 연산을 처리하는 식별자 

 

  산술연산자 - 수학적인 연산 ( +, -, /, * , %, ++, --, **)
  대입연산자 - 특정값을 대입하기 위한 연산 ( =, +=, -=, *=)
  비교연산자 - 복수개의 값을 서로 비교하기 위한 연산자 ( ==, >=, <=, <, >, ===, boolean값을 반환 true, false  )

 

        var result = 2 + 3; //5
        var result1 = 3 - 2; //1
        var result3 = 5 / 2; //2 (나눈 몫 반환)
        var reulst4 = 5 % 2; //1 (나눈 나머지 반환)
        var result5 = 2 * 3; //6 
        var result8 = 3 ** 3; //9
        console.log(result8);

        //후위연산자 : 변수초기값을 먼저 활용한 다음 그 뒤에 연산 처리 
        //num++
        var num = 2;
        console.log(num);
        num = num + 1;

        //전위연산자 : 변수초기값에서 연산을 먼저 진행하고 그 뒤에 연산된 값을 활용 
        //++num
        var num = 3;
        num = num + 1;
        console.log(num);

        var result = (2 == '2'); //값만 비교하기 때문에 결과값을 true
        var result = (2 === '2'); //자료형까지 비교하기 떄문에 결과값은 false

---

조건문

→ 특정 조건마다의 분기를 생성해서 코드흐름에 변화 줌 

 

    if(조건식1){
        조건식이 참이면 이곳의 구문이 실행 
        조건식이 거짓이면 이곳의 구문 무시 
    }

    if(조건식1){
        조건식이 참이면 이곳의 구문이 실행 
        조건식이 거짓이면 이곳의 구문 무시 
    }else{
        위의 조건식1이 거짓이면 
        무조건 이곳의 구문을 실행하고 종료  
    }

    if(조건식1){
        조건식1이 참이면 이곳의 구문이 실행 
        조건식1이 거짓이면 이곳의 구문 무시 
    }else if(조건식2){
        조건식2이 참이면 이곳의 구문이 실행 
        조건식2이 거짓이면 이곳의 구문 무시
    }else{
        위의 조건식이 모두 거짓이면 
        무조건 이곳의 구문을 실행하고 종료  
    }

    function plus(num1, num2) {
        if (num1 === undefined || num2 === undefined) {
            console.error("두개의 인수값을 모두 넣어주세요");
        }

        if (typeof num1 !== "number" || typeof num2 !== "number") {
            console.error("두개의 인수는 모두 숫자로 넣어주세요");
        }

        const result = num1 + num2;
        console.log(result);
    }

    plus(2, 4);

        //현재시간 불러오기
        let now = new Date();
        now = now.getHours(); //hour만 불러오기
        console.log(now);

        const body = document.body;

        body.style.backgroundColor = 'orange';

        if (now >= 0 && now < 9) {
            body.style.backgroundColor = 'pink';
        }
        if (now >= 9 && now < 17) {
            body.style.backgroundColor = 'lightblue';
        }
        if (now >= 17 && now <= 24) {
            body.style.backgroundColor = 'violet';
        }

        
        //만약 조건식 다음에 실행되는 코드블록 내용이
        한줄의 간단한 구문이면 아래와 같이 축약가능
        if (now >= 10) {
          console.log('오전 10시가 넘었습니다.')
        }
    
        if (now >= 10) console.log('오전 10시가 넘었습니다.');
        //해당 코드는 다음과 같이 더 축약가능
        (now >= 10) && console.log('오전 10시가 넘었습니다.');

        
        if (now < 12) {
          console.log('오전입니다.');
        } else {
          console.log('오후입니다.')
        }
    
        if (now < 12) console.log('오전입니다');
        else console.log('오후입니다.');
        (now < 12) ? console.log('오전입니다') : console.log('오후입니다.');

---

switch문(실무에서는 잘 안씀)

조건문 switch : 여러개의 코드블록중에서 하나를 선택해야 될때 사용

switch(표현식){

     case A:

          //실행할 코드 블록

     break;

 

     case B:

          //실행할 코드 블록

     break;

 

     default:

          //실행할 코드 블록

}

 

    switch (new Date().getDay()) {
        case 0:
            console.log("sunday");
            break;
        case 1:
            console.log("monday");
            break;
        case 2:
            console.log("tuesday");
            break;
        case 3:
            console.log("wednesday");
            break;
        case 4:
            console.log("thursday");
            break;
        case 5:
            console.log("friday");
            break;
        case 6:
            console.log("saturday");
            break;

    }

---

함수 (fuction)

→ 자주 쓰는 실행코드들을 블록단위로 묶어서 패키징한 형태 

→ 자주 쓰는 코드들을 기능 단위로 묶어서 재사용

 

함수의 종류

선언적 함수

→ 함수에 미리 이름을 붙여서 정의해놓은 형태

자바스크립트 파일을 읽을때 선언적함수를 우선적으로 읽어준다.

선언적 함수는 호출위치가 자유롭다

        function plus() {
            const num1 = 2;
            const num2 = 3;
            console.log(num + num2);
        }
        //함수를 정의만 해둔상태 호출x

        plus();

 

익명함수

→ 함수에 이름이 없이 정의하는 형태

익명함수 자체만으로는 호출이 불가능하다

변수에 익명함수를 대입하거나(대입형) 특정 이벤트 객체에 대입하는 식으로 호출가능하다.

 

대입형함수

→ 변수에 익명함수가 대입된 형태

        function() {
            const num1 = 2;
            const num2 = 3;
            console.log(num1 - num2);
        }
        //익명이므로 이름이 없는 상태(이름이 없어 호출이 안됨)

        const minus = function () {
            const num1 = 2;
            const num2 = 3;
            console.log(num1 - num2);
        }
        //대입(대입형함수)으로 넣음으로써 함수가 호출됨.

        minus();

 

 

즉시실행함수

→함수가 자기자신을 정의하자마자 바로 자신을 호출함

        (function () {
            const num1 = 2;
            const num2 = 3;
            console.log(num1 + num2);
        })()
        //괄호가 바로 앞에있는 괄호()안에 있는 들어있는 내용을 호출해주기때문에 실행함.

즉시실행함수를 쓰는이유?

→ 즉시실행 함수 안쪽의 값들을 캡슐화함 

 

함수의 매개변수, 인수, 리턴값

함수정의 : 미리 function 키워드로 자주 쓰는 코드들을 묶어준 형태     
함수호출 : 미리 정의되어있는 함수를 호출해야 바로 실행됨 

 

함수의 인수 (파라미터, 매개변수)
→ 함수의 외부에서 특정값을 함수 내부로 전달해주는 통로 이름

 

매개변수(parameter) : 함수내부로 특정 값을 전달하기 위한 통로이름

인수(argument) : 매개변수로 전달되는 값

    function 함수명(매개변수){
    
    } 
        함수명(인수); 

 

 

리턴값(return) : 함수내부의 값을 외부로 내보내는 값, 함수 호출시 외부로 반환, 함수구문 실행도중 강제로 코드를 실행중단할때

        function plus(num1, num2) {
            const result = num1 + num2;
            console.log(result);
            return result;
            //함수안쪽에서 만들었던걸 바깥으로도 쓰게하려면 리턴 구문을 쓴다. 즉 바깥으로 넘겨준다.
        }


        const total = plus(1, 6);
        console.log(total);

 

 

        //함수 정의
        function calc(num1, num2, type) {
            const typeNum1 = typeof num1;
            const typeNum2 = typeof num2;

            if (typeNum1 !== 'number' || typeNum2 !== 'number') {
                console.error('첫번째 두번째 인수는 모두 숫자로 입력하세요');
            }
            const result = num1 + num2;
            return result;
        }

        //함수 호출
        const result2 = calc(2, 3);
        console.log(result2);

    //위의 calc함수를 토대로 3번째 인수값에 따라 4칙연산이 가능하도록 함수 개선
    //cacl(2,3,'+') : 더하기 기능
    //calc(2,3,'-') : 뺴기
    //calc(2,3,'/') : 나누기
    //calc(2,3,'*') : 곱하기

 

화살표 함수( Arrow function)

기존의 익명함수를 좀더 쓰기 편하게 축약한 상태

내부로 전달되는 파라미터가 하나면 괄호는 생략가능하다.

코드블록 안에서 실행되는 코드가 한줄이면 코드블록 중괄호도 생략가능하다.

    const plus = (num1, num2) => {
        const result = num1 + num2;
        return result;
    }

    const total = plus(3, 5);
    console.log(total);

    const abc = txt => console.log(txt);
    abc("hello");

---

템플릿 리터럴(백틱)

    const name = "홍길동";
    const age = "20살";

    console.log("안녕하세요 내이름은" + name + "나이는" + age + "입니다.");
    
    console.log(`안녕하세요 제 이름은 ${name}이고 나이는 ${age} 입니다.`);