Operators,Loops

WorldWannyWeb.·2020년 9월 20일
JavaScript
0
post-thumbnail

Operator와 Loops로 넘어가기 전에 vairable에 대해서 조금 설명하고 들어가보자

  1. Variable read/write

    메모리에 읽고 쓰는게 가능하다. 예를 들어 let name = karen이라 하면, karen을 billy로 바꾸는게 가능한 이유 Variable이 메모리에 읽고 쓰기가 가능하기 때문이다.

  2. Constant read만 가능

반대로 const는 읽기만 가능하다. 그래서 const를 선언함과 값을 할당한 후에는 자물쇠가 생겨버려서 읽기만 가능하고, 다시 다른값으로 쓰는 것이 불가능하다. 그래서 변수의 값이 계속 바뀌어야할 이유가 없다면, const 키워드를 이용해서 constance로 작성해주는 것이 좋다.

그리고

메모리에 값이 저장되는 방법은 두가지로 볼 수 있다.
primitive type 과 Object type

object타입은 너무커서 메모리에 한번에 다 올라갈 수가 없다. 그래서 const karen이라고 선언하고, 'object'를 할당하고 나면, karen이가 가리키는 곳에는 reference가 있다. reference는 실제로 object를 가리키고 있는 곳이다. 그래서 reference를 통해서 실제로 object가 담겨있는 메모리를 가리키게 되는 것이다. 그래서 const karen 이라고 선언하게 되면, karen이 가리키고 있는 pointer만 잠겨서 karen이 다른 object로 변경이 불가능하지만, karen의 이름과 나이는 계속 변경이 가능한 것도, 이 이유중에 하나이다. single item들을 모아서 한 단위로, 한박스로 관리할 수 있다.

Data Type에는 두가지가 있다.

Immutable data types: primitive types, frozen objects(i.e object.freeze())
data자체를 절대 변경하지 못한다. 예를 들어 'karen'이라는 string자체를 변경할 수는 있지만, string 안에 있는 k나 a 같은 string안에 있는 데이터는 변경이 불가능하다.

Mutable data types: all objects by default are mutable in JS
object는 변경이 가능 / 계속 스스로 변경이 가능 자바스크립트 안에서 모든 object가 변경가능하다. 예를 들면 자바스크립트에서는 Array가 Mutable date type인데, 간혹 다른 언어에서는 Mutable array와 immutable array로 나누어서 데이터타입이 따로 존재하는 경우도 있다.

< Operator >

1. String concatenation

console.log('my' + 'cat'); // my cat
// + 기호를 이용해 문자열 과 문자열을 합할 수 있음
console.log('1' + 2); // 12
// 숫자가 문자열로 변환되어 합쳐질 수 있다.
console.log(`string literals: 1 + 2 = ${1 + 2}`);
// ``백틱을 이용해서 string literals를 만들 수 도 있다. 
// ${} 처럼 달러기호를 사용하면 변수값을 계산해서 string에 포함해서 만들 수 있다. 
// string literals 는 중간에 줄바꿈을 하거나 중간에 특수기호를 적어도 
// 그대로 문자열로 변환되서 나온다.      
console.log('karen's book'); 
// 싱글quate로 문자열을 만들게 되면 중간에 single quote나 기호가 인식이 되지 않는다. 
// 그경우 \를 이용해서 기호앞에 붙여주어야 변환된다. 줄바꿈을 할 때에는 \n을 붙여준다.
// 특수문자열은 찾아서 적용하자!

2. Numberic opertaors

console.log(1 + 1); // add

+(add), -(substract), /(divide), *(multiply), %(remainder), **(exponentiation) 등등이 있음

3. Increment and Decrement operators

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

counter라는 변수가 있으면 ++ 기호를 변수 앞에 붙여주면 preIncrement라고 부른다. 

let counter = 2; 
const preIncrement = ++counter;
counter = counter + 1; 
// ++counter; 와 counter = counter + 1; 은 동일하다. 
// counter에 1을 더해서 다시 counter에 값을 다시 할당한 다음에  
// 즉, counter의 값이 2에 1 이 증가되어서 3이 된 다음에 
preIncrement = counter; 
// preIncrement라는 변수에 counter의 값을 할당하는 것

반대로 postIncrement는

let counter = 2;

const postIncrement = counter++;
// counter변수 다음에 ++기호를 붙이게 되면 먼저 counter 변수값를
// postIncrement에 할당한 후에 (1)
// 즉 counter가 2로 시작해서 1증가가 시킨 상태인 3이 되어서 왔으니
// 3을 postIncrement에 할당해서 3이 할당이 되고 (1)
postIncrement = counter;
counter = counter + 1;
// 그뒤에 counter의 값을 1 증가 시키는 것 (2)
// 즉, 3이 할당이 된 후에 counter의 값이 1이 증가하니까 4가 할당이 되는것!

>

--기호도 똑같다 post 랑 preDecrement도 값을 하나씩 감소하는 것이다. 앞에 붙으면 바로 업데이트되서 할당이 되고, 뒤에 기호가 붙으면 할당을 해놓고 업데이트는 그 뒤에 되는 것.
   
   
   ***
    
#### 4. Assignment operators
  
    
 `할당하는 operator`
  
>
```js
    let x = 3;
    let y = 4;
    x += y; // x = x + y; 반복되는 x를 생략해서 코드작성이 가능

5. Comparison operators (비교연산자)

  conole.log(10 < 6); // less than
  conole.log(10 <= 6); // les than or equal
  conole.log(10 > 6); // greater than
  conole.log(10 >= 6); // greater than or equal

***6. Logical operator : ||(or), &&(and,) !(not)

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

1. ||(or) : finds the first truty value

console.log(`pr: ${value1 || value2 || check()}`);
function check(){
  for(let i = 0; i < 10; i++){
    //wasting time
    console.log(':(');
  }
  return true;
}

value1 || value2 || check()
위의 value 와 expression 중에서 하나라도 true가 되는 애들이 있으면 true로 연산되는 연산자.
보면, value1은 false로 선언되어있고, value2는 4가 2보다 작다고 되어있으니 false, check함수는 결국은 true를 return이 되므로 check()가 리턴이 되는 아이

***중요 포인트는 or 연산자는 처음으로 true가 나오면 거기서 멈춘다. 예를 들어 value1이 true가 나오게 되면, '나는 value1 뒤에 뭐가 나오든 상관이 없어 첫번째에 이미 true가 나왔거든!' 이 되어 버려서 작동이 멈춘다. 연산이 많은 함수를 호출하거나 expression같은 아이들을 맨앞에 넣는 것은 주니어개발자가 많이 지적당하는 부분이다. 그러니 심플한 value를 앞에서부터두고 함수같은 것들을 뒤에 배치하는 것이 좋다!

2. && (and), finds the first falsy value

    console.log(`pr: ${value1 || value2 || check()}`); 
      function check(){
    for(let i = 0; i < 10; i++){
      //wasting time
      console.log(':(');
    }
    return true;
  }

and연산자도 or연산자와 똑같다. 다만 and연산자는 value1, value2, check() 이 3개가 다 true가 되어야 true로 리턴한다. and연산자도 첫번째 value1이 false가 나오면 '얘가 false가 나왔으니까 끝났어. 뒤에는 상관안해'가 되어버리니 or과 마찬가지로 함수나 expression은 뒤쪽에 두는 것이 맞다.

3. && operator often used to compress long if-statement
nullableObject && nullableObject.something

and는 간편하게 null체크가 가능 nullableObject가 null이면 false가 되기 때문에 그 뒤에 있는 nullableObject.something이 실행이 안된다. nullableObject가 null이 아닐때만 Object.something이라는 value를 받아오게 된다.

이것을 code로 표현하면

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

6. ! (not) not operator

console.log(!value1);
// not 연산자는 값을 반대로 바꾸어 준다. value1이 true이기 때문에 false로 바꿔서 변경

< Equality>

const stringFive = '5';
const numberFive = 5;
   `'== loose equality'` with type conversion 
   // type를 변경해서 검사하기 때문에 loose equality.
   const stringFive = '5';
   const numberFive = 5;
   console.log(stringFive == numberFive); // true
   console.log(stringFive != numberFive); // false

이 뜻은 stringFive가 string이긴 하지만 string 안에 숫자 5가 같으니까 똑같아! 라고 하는 것.

 === strict equality, no type conversion
 // type을 신경써서 type이 다르면 다르다.
 const stringFive = '5';
 const numberFive = 5;
 console.log(stringFive === numberFive); // false  타입이 달라서 false
 console.log(stringFive !== numberFive); // true

strict equality를 자주 쓰는 것이 좋다.

//object equality by reference

object를 신경써서 공부해야한다. object는 메모리에 저장될떼 reference형식으로 저장이 됨.

billy1 ->(X) ref1
- name - ellie
- age - 23
billy3 ->(X) ref1
billy2 ->(X) ref2
- name - ellie
- age - 22 

const billy1 = {name: 'billy'}; 
// billy1과 billy2는 똑같은 데이터가 들어있지만, 실제로 메모리에는 각각 다른 reference가 들어있고, 그 reference들은 서로 다른 object를 가리키고 있다. billy3은 billy1이 똑같은 reference를 가지고 있으니까 billy1가 같은 reference를 가지고 있다.
const billy2 = {name: 'billy'};
const billy3 = billy1;
console.log(billy1 == billy2); // false 각각 다른 reference가 저장되어있어서 false
console.log(billy1 === billy2); // false 똑같든 아니들 둘다 reference가 달라서 false
console.log(billy1 === billy3); // true ellie1이 가지고 있는 reference를 3으로 할당했기 때문에 true이다

//equality - puzzler텍스트

console.log(0 == false); // true 0,null,undefined,''는 false값 이므로 true
console.log(0 === false); // false  0은 Boolean타입이 아니므로 type이 맞지 않아서 false
console.log('' == false); // true
console.log('' === false); // false empty string은 Boolean타입이 아니어서 
console.log(null == undefined); // true  null과 undefined가 같은것으로 간주되지만
console.log(null === undefined); // false null과 undefined는 타입이 서로 다르므로 false
``` >

8. Conditional Operators: if문

if, else if, else

const name = 'ellen';
if(name === 'ellen'){ 
// if의 statement가 true이면 그 밑에 있는 
//console.log가 실행된다.
  console.log('Welcome, Ellen!');
} else if(name === 'coder'){ 
  //name이 ellen이 아니고 coder라면 
  //if를 넘어와서 else if안에 있는 {}이 실행된다.
  // 즉 'You are amazing coder'가 실행되는 것
  console.log('You are amazing coder');
} else {
  // name이 랜덤한 이름이 들어가게 되면, if문도 패스,
  //else if (name === 'coder')도 패스하고 
  //else로 넘어와서 else가 실행된다.
  console.log('unknown');
}

9. Ternary operator: ?

Ternary operator는 if를 좀 더 간단하게 쓸 수 있다.
//condition ? value1 : value2;

console.log(name === 'ellie' ? 'yes' : 'no'); // statement 즉 'name === 'ellie'에 ?를 붙이면
// statement가 true니? true면 'yes'를 실행하고
// 아니면 : 다음에 오는 것을 실행하는 것. 즉 'no'를 실행
// Ternary operator는 값을 할당하거나 간단하게 출력할때
// 사용하는 것이 좋다. 
// 계속 묶어서 쓰면 가독성이 낮아지기 때문에 간단할때만 사용

10. Switch statement

use for multiple if checks
use for enum-like vlaue check
use for multiple type checks in TS

const browser = 'IE';
switch(browser){ 
// switch 안에 있는 값 즉,browser가 IE이면, 
  case 'IE':  // 'go away'를 실행하게 된 후,
    console.log('go away!');
    break;  // 멈춘다.
  case 'Chrome': 
  // chrome과 firefox가 출력하는 값이 같으므로
  // case 'Chrome': 밑에 연달아서 
  // case 'Firefow':를 붙여도 된다.
    console.log('love you!');
    break;
  case 'Firefox':
    console.log('love you!');
    break;
  default:
    console.log('same all!');
    break;
}

if에서 else if 여러개를 반복한다면, switch를 사용하는 것을 고려하는 것이 좋다. 타입스크립트에서는 정해져있는 타입을 검사하거나 enum비슷한 아이들을 검사할때는 switch를 쓰는것이 가독성이 좋다.

11. Loops

1. while loop

while loop, while the condition is truthy, body code is executed.

let i = 3;
while(i > 0){ 
// while 같은 경우는 statement인 i > 0 이 
// false로 나오기 전까지는 무한대로 console을 출력한다.
  console.log(`while: ${i}`);
  i--;
}

2. do-while loop

do while loop, body code is executed first, then check the condition

let i = 3;
while(i > 0){ 
  console.log(`while: ${i}`);
  i--;
}
do{  
// do의 {}을 먼저 실행한 다음에
// while의 조건이 맞는지 아닌지를 검사한다.
// while을 실해하고 난 후, i = 0 이어도,
// {}안의 내용을 먼저 실행해서, 
// do while: 0을 먼저 출력이 되고 나서
// i 가 0보다 큰지 검사하고 멈추게 되는것.
  console.log(`do while: ${i}`);
  i--;
} while (i > 0);

블럭을 먼저 실행하고 싶다면, do while문을 써야하고, 조건문이 맞을때만 블럭을 실행하고 싶다면 while문을 사용하면 된다.

3. for loop, for(begin; condition; step)

for(i = 3; i > 0; i--){ 
// begin부분은 딱 한번만 작동이 된다.
// 그다음 {}을 실행하기 전에 condition이 맞는지 아닌지 
// 검사한 후에 {}이 다 실행되면 step을 실행하게 된다.
// 그래서 condition과 step이 condition의 조건이
// 틀릴 때까지 계속 돌게된다.
  console.log(`for: ${i}`);
}  
for(let i = 3; i > 0; i = i - 2){ 
// for문 안에서 let이라는 지역변수를 선언해서
// inline declaration을 하기도 한다.
// inline variable declaration
  console.log(`inline variable for: ${i}`);
}

4.nested loops // for문안에 for문을 작성하는 것

while이나 for같은것은 서로 nesting에서 작성할 수 도 있다. 그렇지만 nesting에서 작성을 하게 되면, 0가 n의 2승이므로 되도록 피하는 것이 좋다.

for(let i = 0; i < 10; i++){ // 먼저 i가 0일때
  for(let j = 0; j < 10; j++){ // j를 0-9까지 삥삥돌리고 그다음 i = 1 일때 j를 0-9까지 돌리고는 반복해서 i가 9일때 까지 반복한다. 그렇지만 자주 쓰는 것은 권하지 않는다.
    console.log(`i: ${1}, j:${j}`);
  }
}

12. break, continue

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

for(i = 0; i < 11; i++){
  if(i % 2 !== 0){
    continue;
  }
  console.log(`q1. ${1}`);
}

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

for(i = 0; i > 11; i++){
 if(i > 8){
    break;
 }
  console.log(`q1. ${1}`);   
}

반복문에서는 break나 continue 키워드를 넣어서 반복문을 끝낼 수 있다. break는 반복문을 완전히 끝내는 것이고, continue는 지금껏만 skip하고 다시 다음 것으로 넘어가는 것이라고 생각하면 된다.

profile
WorldWannyWeb.
와니완의 월드와이드와니웹🐥
이전 포스트

Variable, Data Type

다음 포스트

Function, 함수의 선언과 표현

0개의 댓글