[프론트엔드]_JavaScript(es6)_2. operator, if, for loop

공부 자료 : 드림코딩 by 엘리

 

개발 환경 : visual studio code

언어 : js

 

String 연산

Js에서도 + 사용 가능.

연산자

console.log(2**3); // 2의 3승

++/-- 순서

다른 언어와 같다.

증감 연산자

x += y; // x = x + y

x -= y // x = x - y

논리 연산자

 

|| 와 && 를 사용한다.

 

여기서 코드적으로 중요한 부분은 || 의 경우 앞에서부터 검사하게 되는데 앞이 true가 나와버리면 어차피 전체 결과는 true로 반환된다. 즉 뒤의 2가지 검사는 하지 않고 반환하기 때문에 시간적으로 걸리는( 함수 등..) 을 앞에 넣어버리는 것 보다 빠르게 결과가 나오는 것을 앞에 두는 것이 효율적인 코드라고 할 수 있다.

&&도 마찬가지로 한가지만 나오면 false를 반환하기 때문에 결과를 보고 순서를 정해야 한다.

위의 코드에서 check()는 true를 호출한다.

 

||의 경우 앞에다 둬서 2가지 항을 건너 뛸 수 있고

 

&&의 경우 나머지 2개의 값이 false이기 때문에 굳이 함수호출을 하지 않고 false를 반환하기 때문에 뒤에다 두는것이 좋다.

 

= Equality

 

=는 대입연산자

== 는 loose equality

=== 는 strict equality

 

위에서 test1 과 test2는 각기 다른 레퍼런스를 가지고 있다 -> false

만약 test2의 값이 test1일 경우 ==에서는 true를 출력하고 ===에서는 false를 출력한다.

test3은 test1을 전부 받아왔기 때문에 (레퍼런스도 동일) ===에 대입시 true를 출력한다.

 

여기서 null의 경우 undefined 와 같지만 레퍼런스는 다르다

null == undefined // true

null === undefined // false

 

if, else if , else

다른 언어와 같다.

const name1 = 'yoon';

if(name1 ==='yoon'){

    console.log('collect');

} else if(name1 === 'tester') {

    console.log('tester');

} else {

    console.log('unknown');

}

//ternary operator

console.log(name1 ==='yoon'? 'yes' : 'no');  // yoon 이 맞으면 yes 출력 아니면 no

switch 문

정해져 있는 타입을 검사할 때 switch 사용이 좋다. (API 검사 등)

while / do while 문

조건이 false가 될 때 까지 반복

위의 예제는  while은 반복시 1씩 줄어든다.

3, 2, 1 일때 반복 하고 i가 0이 된 순간 반복하지 안는다 즉 i는 0인 상태

밑의 do while 의 경우에는 do 문을 먼저 시행한다. 그리고 나서 i의 상태를 검사

log 로 i는 0을 출력하고 -1을 한다. 즉 i는 -1 의 상태

while 문에서 i의 상태를 검사,  0보다 작으니 반복을 중지한다.

 

for 함수

가장 많이 사용하는 반복문이다.

break 와 continue를 사용 할 수 있다.

break는 만남과 동시에 반복문을 빠져나온다

continue는 해당 조건을 무시(넘어간다) 다음 반복문부터 진행

 

예제

 

코드 전문

// 1. String concatentaion

console.log('my'+'cat');

console.log(`string literals : 1 + 2 = ${1+2}`); // 연산기능 `` 사이에 ${}

//---// 연산자

console.log(2**3); // 2의 3승

//++의 순서

let counter =2;

const preIncrement = ++counter; // 선 증가 후 대입

const postIncrement = counter++; // 대입후 카운터 증가

console.log(`preIncrement = ${preIncrement} , counter = ${counter} , postIncrement = ${postIncrement}`);

// Assignment operators

let x = 3;

let y = 4;

x += y; // x = x + y

x -= y // x = x - y

// 비교

console.log(10 <= 6);

// *** logical operators

// || or 중요한건 처음 true가 나오면 멈춘다. 어차피 true이기 떄문.

const value = false;

const value2 = false;

console.log(`or: ${value || value2 || check()}`);

console.log(`and: ${value && value2 && check()}`);

function check(){

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

        console.log('time waste');

    }

    return true;

}

// ! not

// = equlity

//== loose equality -> 타입이 달라도 값이 같으면 true 출력

// === strict equality -> 타입이 다르면 false 출력 << 이게 더 좋다.

// ** 오브젝트는 메모리에 탑재시 레퍼런스 형태로 들어간다.

const test1 = {name: 'test1'};

const test2 = {name: 'test2'};

const test3 = test1;

console.log(test1== test2); // 각각 다른 레퍼런스를 가지고 있다 -> 즉 false

console.log(test1===test2); // 레퍼런스가 아에 다르기 때문에 false

console.log(test1===test3); // test3에는 test1의 레퍼런스를 받아왔기 때문에 true 출력

//null 은 undefined 와 같지만 레퍼런스는 다르다.

console.log(null== undefined); //t

console.log(null===undefined); //f

//if, else if, else

const name1 = 'yoon';

if(name1 ==='yoon'){

    console.log('collect');

} else if(name1 === 'tester') {

    console.log('tester');

} else {

    console.log('unknown');

}

//ternary operator

console.log(name1 ==='yoon'? 'yes' : 'no');  // yoon 이 맞으면 yes 출력 아니면 no

//switch 정해져 있는 타입 검사시 switch 사용이 좋다

const browser = 'Chrome';

switch(browser){

    case 'Chrome':

        console.log('chrome');

        break;

    case 'IE':

        console.log('soso');

    break;

    case 'Firefox':

    case 'whale':

        console.log('good');    // 같은 내용 반복시 줄여서 사용 가능

        break;

    default:

        console.log('same all');

        break;

    }

//반복문 while 내부가 false 가 될 때 까지

let i = 3;

while (i>0){ // i 가 0이 되는 순간 반복문을 빠져나온다. 즉 출력은 3,2,1 만출력

    console.log(`while : ${i}`);

    i--;

}

//do while 은 먼저 블럭을 실행 하고 그뒤에 검사

do{

    console.log(`do while: ${i}`); // i의 검증과는 상관 없이 i의 값을 출력후 검사.

    i--;

} while(i>0);

console.log(i); // -1

//for 함수

for (i = 3 ; i>0; i--){

    console.log(`for: ${i}`);

}

//break: 루프를 끝냄 와 continue : 지금껀 스킵함

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

    if(i%2==1){

        continue;

    }

    console.log(`짝수만 출력 continue 사용하기 : ${i}`);

}

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

    if(i>8){

        break;

    }

     console.log(`8을 만나면 break  : ${i}`);

}

 

콘솔