자바스크립트 JS 공부 #1 자료형, 연산자, 조건문, 함수선언

이전에 제이쿼리로 자바스크립트를 배운적이 있는데 오래되었으며 제이쿼리가 아닌 바닐라js로 Es6문법을 배우고 싶어서 패스트캠퍼스에 있는 velopert님의 강의를 들었다.

let const

let value = 1; //변수 값을 선언 
const abc = 1; //상수 값을 선언 

변수 - 값이 변할 수 있음 let
상수 - 값이 고정적임 const

같은 이름으로 설정 안된다
var는 이제 사용하지않는 편 (같은 이름으로 여러번 선언가능, let과 구현 범위가 다름 )

연산자 - 산술, 논리, 비교

산술연산자

사칙연산 +-/*
++ -- 일씩 더하거나 빼기

let a = 1;
console.log(a++); // 1
console.log(a); // 2 - 이후에 더해짐
console.log(++a); // 3 - 더해져서 값이 나옴

a += 3; //a에 3씩 더하기
a -= 3; //a에 3씩 빼기
a *= 3; //a에 3씩 곱하기
a /= 3; //a에 3씩 나누기

논리연산자

NOT !
AND &&
OR ||

논리연산자가 같이 있을 때 위의 순서로 연산된다!

비교연산자

== === != !==

< > >= <=

const b = 1;
const c = 1;
const equals = a == b; //타입검사안함
const equalsT = a === b; //타입까지 똑같아야함  - 웬만하면 이퀄세개쓰기
const notequals = a != b; //타입은 확인 안함 
const notequalsT = a !== b; //타입까지 달라아야함  - 웬만하면 이렇게 쓰기

const d = '안녕'
const e = '하세요'
console.log(d + e) //결과 - 안녕하세요 문자열도 더하기가능

조건문 - if, else, else if / switch

if, else, else if

a = 1;
if (a + 1 === 2){
    console.log('a + 1이 2입니다.'); //if 절이 맞아야 실행된다

    const a = 2; //블럭 안에서는 밖에 있는 변수랑 같은 이름써도 구분된다 !
    // var a = 2; - 하지만 둘다 var로 설정할 경우 두개의 값이 같게 나옴
    console.log('if문 안의 a값은' + a); //2
}
console.log('if문 밖의 a값은'+ a) //1

a =10;
if ( a === 5){
    console.log('5입니다.');
} else if ( a === 10){
    console.log('10입니다.');
} else {
    console.log('5도 10도 아닙니다.');
}

switch

const device = 'iphone';

switch(device){
    case 'iphone':
        console.log('아이폰!'); //이게 출력됨
        break; //작성해야 스위치문 탈출
    case 'ipad':
        console.log('아이패드!');
        break;
    case 'galaxy note':
        console.log('갤럭시 노트!');
        break;
    default: //위에 아무경우도 아닐떄
        console.log('모르겠네요..');
}

함수

function add (a,b){ //파라미터 인수
    return a+b;
}

// 함수선언의 다른 방식 화살표 함수 (s6, ES2015 문법)
const add = (a,b) => {
    return a+b;
}

const add = (a,b) => a+b; //반환값을 바로 작성하는 방법


const sum = add(1,2);
console.log(sum);

함수선언 방법
화살표 함수 - (s6, ES2015 문법)
const add = (a,b) => {return a+b;}

function hello(name){
    console.log( 'Hello,' + name + '!');
    console.log(`Hello ${name}!`); // s6, ES2015 문법 -   ` ` 백틱안에서 ${안에} 변수 넣기
}

const result = hello('ony540');
console.log(result);

function getGrade (score){
    if ( score === 100){
        return 'A+'
    } else if ( score >= 90){
        return 'A'
    } else if ( score === 89){
        return 'B+'
    } else if ( score >= 80){
        return 'B'
    } else if ( score === 79){
        return 'C+'
    } else if ( score >= 70){
        return 'C'
    } else if ( score === 69){
        return 'D+'
    } else if ( score >= 60){
        return 'D'
    } else {
        return 'F'
    }

}
const grade = getGrade(100);
console.log(grade);

Es6, ES2015 문법 - ` 백틱안에서 ${안에} 변수 넣기
console.log(Hello ${name}!);