[JS] 공부 - 엘리코딩 JS 4 연산자와 반복문

youtu.be/YBjufjBaxHo

 

이 영상을 보고 공부했습니다.

 

 

 

복습

Variable rw(read, write) 읽기 쓰기 가능  Const r(read only)읽기만 가능

 

primitive타입의 변수는 메모리에 그대로 저장된다.

object는 너무 커서 메모리에 그대로 저장될 수 없어서 레퍼런스를 통해서 메모리의 위치를 가르킨다.

 

immutable 변경이 불가능한 데이터타입들

mutable 변경이 가능한 데이터타입들

 

기본적으로 자바스크립트에서는 대부분의 object들은 변경이 가능하다.(mutable data type)

 

 

연산자 Operator

String concatenation 문자연결

//1. String concatenation

console.log('my' + ' cat');
console.log(1 + '2'); //문자열로 할당된다.
console.log(`string literals: 1 + 2 =  ${1+2}`);

 

문자열과 숫자를 더하면 문자열로 할당이 된다.

 

 

Numeric operators 숫자 연산자

//2. Numeric operators

console.log(1 + 1); // add 더하기
console.log(1 - 1); // subtract 빼기
console.log(4 / 2); // divide 나누기
console.log(2 * 3); // multiply 곱하기
console.log(3 ** 3); // exponentiation 제곱
console.log(10 % 3); // remainder 나머지

숫자를 계산하는 여러 연산자들이 있다.

 

 

Increment (++), Decrement(--) operators 

++는 증가, --는 감소연산자이다. 

이것은 변수에서 앞에쓰냐, 뒤에쓰냐에 따라서 차이가 있다.

//3. increment, decrement operators
let counter = 2;
const preIncrement = ++counter;
// counter = counter + 1;
// preIncrement = counter; 
console.log(`preIncrement : ${preIncrement}, counter : ${counter}`);

const postIncrement = counter++;
// postIncrement = counter;
// counter = counter + 1;
console.log(`postIncrement : ${preIncrement}, counter : ${counter}`);

 

변수앞에쓰면 먼저 증가(또는 감소)하고 값을 할당하고, 변수뒤에 쓰면 값을 할당하고 증가를 한다.

 

 

Assignment operators 할당 연산자

//4. Assignment operators
let x = 6; 
let y = 3;
x += y; // x = x + y;
x -= y;
x *= y;
x /= y;

할당연산자는 지금까지 많이 사용을 했었다. 

할당을 할 때는 =을 사용하고 변수에 값을 할당하는등 여러곳에서 써왔다.

+=등을 사용해 조금더 코드를 보기좋게 줄일 수 있다.

 

 

Comparison operators 비교 연산자

//5. Comparison operators
console.log(10 > 5);
console.log(6 <= 7);

비교 연산자도 지금까지 많이 사용해본 연산자이다.

 

 

 

Logical operators 논리 연산자

논리 연산자에는 or, and, not이 있다.

 

|| (or)

|| (or) 한국어로 하면 또는으로 하나만 참이 있어도 참이 된다.

//6. Logical operators : || (or), && (and), !  (not)
const value1 = false; 
const value2 =  4 < 2;

// || (or)

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

function check() {
    for(let i = 0; i < 10; i++){
        //wasting time
        console.log('oh');
    }
    return true;
}

 

정의한 check 함수는 true값을 리턴하니 결국 true가 된다.

또한 or은 여러 값중에 true가 나오면 그 즉시 멈춘다.

 

위 코드의 결과는 다음과 같다.

value1과 value2의 값이 false이니 check함수에서 oh를 10번 출력한게 보인다.

이제 value1값을 true로 바꾸고 실행해봅시다.

 

 

or은 true값이 나오면 그대로 멈추니 oh가 출력이 되지 않는다.

 

이것을 활용하여 코드를 좀 더 잘 짤 수 있는데 기능이 많은 함수를 앞쪽에 위치시키는 것보다는 가벼운 

변수나 값을 넣는것이 조금 더 효율적이라고 할 수 있다.

 

 

&& (and)

이번에는 and를 한 번 사용해보자.

and는 먼저 모든 값이 true가 되어야 true를 값을 내보낸다.

여기서 or과 비슷하게 값들중에 하나라도 false가 나오면 그 즉시 멈추게 된다.

 

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

 

아까와 같이 value1값에는 false가 들었다고 하면 check함수는 실행되지 않는다.

and도 실행해야 할 것이 많은 함수는 뒤에 위치하는 것이 좋다.

 

 

! (not)

그 다음은 not입니다. not은 값을 반대로 바꿔줍니다.

 

onsole.log(`${!value1}`);

value1에 true가 들어있다면 false를 반대로 value1에 false가 들어있다면 true를 내보낸다.

 

 

Equality operators ( ==, ===)

// 7. Equality operators

const stringFive = '5';
const numberFive = 5;

//loose equality, with type conversion
console.log(stringFive == numberFive);
console.log(stringFive != numberFive);

//strict equality, no type conversion
console.log(stringFive === numberFive);
console.log(stringFive !== numberFive);

먼저 ==은 타입을 바꿔서 서로 비교한다.

그래서 문자열 5와 숫자 5를 같다고 판단한다.

 

===은 타입이 다르면 다르게 판단한다. 

이왕이면 ===을 사용하도록 하자.

 

객체를 비교할때는 같은 레퍼런스라면 참이라고 판단한다.

 

 

Conditional operators : if (조건 연산자)

// 8. Conditional operators : if
const lName = 'java';
if (lName === 'java') {
    console.log('Java!');
} else if (lName === 'python') {
    console.log('python!');
}
else {
    console.log('Who are you?');
}

if는 주어진 조건이 참이라면 실행하고 거짓이라면

그 밑에 있는 else if나 else를 실행하게 된다.

 

else는 아니면 이라는 뜻으로 if에 있는 조건이 

참이 되지 않았을 때 실행된다.

 

 

Ternary operators : ? (삼항 연산자)

//9. Ternary operators
//condition ? value1 : value2;
console.log(lName === 'java' ? 'java!' : 'not java!');

?를 사용해 if를 줄여서 쓸 수 있다.

조건 ? 참일때 실행 : 참이 아닐때 실행;

이렇게 쓸 수 있다.

간단하게 쓸 때 사용하자

 

 

Switch operators 

//10. Switch operators

const browser = 'IE';
switch (browser) {
    case 'IE':
        console.log('go away');
        break;
    case 'Chrome':
    case 'Firefox':
        console.log('love you');
        break;
    default:
        console.log('same all!');
        break;
}

스위치는 if를 조금 더 보기좋게 쓸 수 있다. case를 이용하여 조건을 만들 수 있고

다른 조건이 같은 결과를 실행해야 한다면 case를 붙여서 쓰면 된다.

 

if에 있는 else처럼 포함되지 않을때는 default를 사용한다.

 

이제 반복문을 알아보자

 

 

while loop

//11. While loop
let i = 3; 
while (i > 0) {
    console.log(`while : ${i}`);
    i--;
}

while는 ~동안에라는 뜻으로 조건이 참일때 실행하게 된다.

위의 코드를 보면 3에서 1씩작아지고 있으니 3번을 반복하고 멈추게 된다.

 

 

do-while loop

do-while은 while과 다르게 내용을 먼저 실행시키고 조건을 비교한다.

while은 조건을 비교한 후에 내용을 실행하지만 do-while은 그 반대이다.

 

//12. do-while loop
do{
    console.log(`do while: ${i}`);
    i--;
} while (i > 0);

 

 

for loop

//13. for loop, for(begin; condition; step)
for(let i = 3; i > 0; i--) {
    console.log(`for : ${i}`);
}

for은 3가지로 이루어진다.

for( 시작값; 조건; 증가값 ) 이렇게 시작값을 처음에 정하고

그다음에는 조건과 증가값만을 비교하여 실행하게 된다.

 

또 for안에서 위의 코드같이 변수를 선언하고 사용할 수 있는데 이때 

이 변수는 지역변수가 된다.

 

 

nested loop (중첩 반복문)

반복문은 중첩해서 사용할 수 있다.

 

//14. nested loop
for(let i = 0; i < 10; i++) {
    for(let j = 0; j < 10; j++) {
        console.log(`i : ${i}, j : ${j}`);
    }
}

 

위 코드를 시행하면 i가 1일때 0부터 9까지 2일떄 0부터 9까지...

이렇게 i가 9가 될때까지 반복하게 된다.

 

이러한 반복문에서는 break와 continue를 사용하여 끝내거나 건너 뛸 수 있다.

break는 반복문을 아예 끝내는 것이고 continue는 지금 단계를 건너 뛰는 것이다.