자바스크립트 6. 연산

< 참고영상 > https://www.youtube.com/watch?v=YBjufjBaxHo

 

 

Imumutable data type : 데이터 자체를 절대 변경할 수 없다.

mutable data type : object > 안에 있는 내용을 변경할 수 있다. 변경이 가능한 데이터 타입

자바스크립트에서 오브젝트는 대부분 변경이 가능

 

<연산>

< 1. String concatenation >

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

 > mycat

 > 문자열을 합해서 새로운 문자

 

2. console.log('1' + 2 );

 > 12

 > 문자열에 숫자를 더하게 되면 숫자가 문자열로 변환되어 합해진다.

 

3. console.log(`string literals : 1 + 2 = ${1 + 2}`);

 > string literals : 1 + 2 = 3

 > 백틱(`) 을 이용해서 string literals 사용 가능

 > '$' 이용하면 변수 값을 계산해서 string으로 포함해서 문자열을 만들게 된다.

 

string literals의 좋은 점은 '''''라고 입력을 해도 그대로 문자열로 변환되어 출력이 된다.

ex)

console.log('ellie\'s book'); > ellie's book

console.log("ellie's book"); > ellie's book

console.log("ellie's \nbook");

>ellie's

  book

 

 

\n > 줄바꿈

< 2. Numeric operators >

console.log(1 + 1); // 더하기(Add)
console.log(1 - 1); // 빼기(substract)
console.log(1 / 1); // 나누기(divide)
console.log(1 * 1); // 곱하기(multiply)
console.log(5 % 2); // 나머지(remainder)
console.log(2 ** 3); // 승(exponentiation)

 

< 3. Increment and decrement operators >

let counter = 2;
const preIncrement = ++counter;

// counter = counter + 1;

// preIncrement = counter;

> 1씩 증가시키셔서 preIncrement에 값을 할당

 

const postIncrement = counter ++;

// postIncrement = counter;

// counter = counter +1;

postIncrement = counter ++;

> 먼저 변수의 값을 postIncrement에 할당 한 다음에 그 뒤에 counter의 값에 1씩 증가

 

> 앞에 연산자가 있으면 바로 update되서 할당, 뒤에 있으면 할당을 하고 update는 나중

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

 > 값이 업데이트 되서 연산 되는 듯

 

// 6. Comparison operators
console.log(10 < 6); // less than

console.log(10 <= 6); // less than or equal

console.log(10 > 6); // greater than

console.log(10 >= 6); // greater than or equal

 

 

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

 

 

 

<6. Logical operators: || (or), && (and), ! (not)>

const value1 = false;
const value2 = 4 < 2;

 

// ||(or)

console.log('or : $(value1 || value2 || check()}');  // 3개 중에 하나라도 true가 있으면 true가 출력된다.

 

function check() {

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

//wasting time

          console.log("헐");

      }

return true ; > 위에 함수를 돌면서 시간을 낭비하다가 결국은 함수를 빠져나와서 "true".를 출력하게 된다.

} > 결국 value 1 = false, value2 = false, check{} = true   >>>>>>>> or 연산자이기때문에 true

 

<or> 연산자는 처음 true가 나오면 멈춘다, 뒤에 실행이 안된다.  >>> 어짜피 true면 true 이기 때문

 

// &&(and)

// && (and), finds the first falsy value

console.log('and : $(value1 && value2 && check()});  > 3개 모두 true 여야지 true

 

// often used to compress long if - statement

// nullableObject && nullableObject.something

 > nullableObject 가 null 이 아닐때만  something 을 받아올 수 있다.

if (nullableObject = != null){
    nullableObject.something

}

 

function check() {

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

//wasting time

          console.log("헐");

      }

return true ; > 위에 함수를 돌면서 시간을 낭비하다가 결국은 함수를 빠져나와서 "true".를 출력하게 된다.

 

// ! (not)

값을 반대로 바꿔주는 연산자

const value1 = false;

 

console.log(!value1);     >>>>> value1 이 false이기 때문에 반대인 true 가 출력된다.

 

 

<7. Equality >

const stringFive = '5';

const numberFive = 5;

 

// == loose equality, with type conversion

console.log(stringFive == numberFive); >>>>> 안에 숫자값만을 확인하고 타입 신경안쓰고 값은 같으니까 true

console.log(stringFive != numberFive); >>>>> 같은거니까 false

 

// === strict equality, no type conversion

console.log(stringFive === numberFive); >>> 타입 확인했을때 타입이 다르니까 넌 다른애들이야 같지 않아!!!  false

console.log(stringFive !== numberFive); >>> 어 다른거 맞으니까 true

 

// object  equality by reference >>>> 오브젝트는 메모리에 탑재될때 레퍼런스 형태로 저장된다. 

const ellie1 = {name : 'ellie'};

const ellte2 = {name : 'ellie'};

const ellie3 = ellie1;

console.log(ellie1 == ellie2); >> 각각 다른 레퍼런스가 저장되어 있기때문에 false

console.log(ellie1 === ellie2); >> 타입이 같든 아니든 레퍼런스가 다르기 때문에 false

console.log(ellie1 === ellie3); >> ellie1의 레퍼런스값을 ellie3에 할당했기 때문에 같은것 true

 

// equlity - puzzler

console.log(0 == false);   > 0, null, undefined, string 은 false로 간주될 수 있다. 따라서 true

console.log(0 === false); > 0은 불리언 타입이 아니기 때문에 다른 타입 > false

console.log(' ' == false); > true

console.log(' ' === false); > false

console.log(null == underfined); > true

console.log(null === underfined); >false

 

 

<8. if , else if, else >

const name = 'coder':

if(name === 'ellie'){

    console.lot('welcome ellie');

}

else if (name === 'coder') {

    concole.log('you are amaxing coder');

}

else {

    console.log('unknown');

}

 

 

<9. Ternary operator : ? >

// condition ?  value1 : value2 ;

const name = 'coder';

console.log(name === 'ellie' ? 'yes' : 'no'); > name 값이 elle가 아니기 때문에 'no'가 출력될 것이다.

 

<10. Switch statement >

browser가 'IE'

case = 'IE';인 경우의 값에서 console창을 출력하게 되고 break하게 된다.

 

'Chrome', 'Firefox'가 같은값을 출력하게 됨으로 간단하게 축약 가능하다.

 

 

< 11. while 반복문 >

// while loop, while the condition is truthy,

// body code is executed

let i = 3;

while (i > 0) {

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

   i -- ;

}

>>>>> while : 3 

>>>>> while : 2

>>>>> while : 1

 

 

// do while loop, body code is executed first,

// then check the condition.

do {

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

  i -- ;

} while(i > 0);

 

>>>> 먼저 블럭을 실행한 다음에 조건이 맞는지 안맞는지 검사

블럭을 먼저 실행하고 싶아면 do while loop

조건문이 맞을 때에만 블럭을 실행하고 싶다면 while loop

 

< 12. for 반복문 >

// for loop, for (begin; condition; step)

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

   console.log('for : $(i)'};

}

>>>> begin은 한번만 실행되고 뒤에 condition이 맞지 않을때까지 반복한다.

>>>> for : 3

>>>> for : 2

>>>> for : 1

 

// nasted loops > 반복문 안에 반복문 가

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

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

     console.lot('i : ${i}, j:${j}');

  }

}

 > 값이 너무 쓸데 없어짐 > cpu에 좋지 않음

 

 

< 13.  break, continue >

// break(반복을 아예 끝내는 것), continue(지금 반복만 끝내고 다음으로 스킵)

// 01. iterate from 0 to 10 and print only even numbers (use continue)

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

    if(i % 2  !== 0){

       continue;

      }

  console.log('q1.${i});

}

// 02. iterate from 0 to 10 and print numbers untill reaching 8 (use break)

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

  if (i > 8) {

  break;

}

console.log('q2.${i}');

}