드림엘리 : Javascript - 5. 연산문 & 반복문

연산, 반복문

1. String concatenation

• 문자열 + 문자열 = 새로운 문자열
• 숫자로 된 문자열('1') + 숫자 = 숫자
• ` `을 활용한 string literals, ${}을 함께 이용하면 변수 값을 계산해서 string으로 포함해 문자열을 만들 수 있다.
  • 줄을 바꾸거나 특수문자인 single quote(' ') 등을 이용해도 고대로 문자열로 변환되서 나온다
• single quote(' ') 문자열 만들 경우 중간에 single quote나 특수 기호가 인식이 되지 않는다. 이럴 경우 \를 이용해서 특수 기호를 넣어줘야지 제대로 표시됨
  • \single quote
  • 줄바꿈 : \n
  • tab : \t

2. Numeric operators

• add(더하기) : +
• substract(빼기) : -
• divide(나누기) : /
• multiply(곱하기) : *
• remainder(나누고 나머지 값) : %
• exponentiation(지수, o의 o승) : **

3. Increment and decrement operators

• ++
  • preIncrement : 변수 앞에 ++ 붙여주면 1씩 증가해서 바로 업데이트 되어 할당
  • postIncrement : 변수 뒤에 ++ 붙이면 할당해놓고 그 뒤에 업데이트 일어남(1씩 증가)
• --
  • preDecrement : 변수 앞에 -- 붙여주면 1씩 감소해서 바로 업데이트 되어 할당
  • postDecrement : 변수 뒤에 -- 붙이면 할당해놓고 그 뒤에 업데이트 일어남(1씩 감소)

4. Assignment opertators

• 할당(=)하는 operators
• 할당이 가능하고 x = x + y 일경우 반복되는 x를 생략해서 x += y로 코드 작성 가능

5. Comparison operators

• 비교하는 operators
• less than 작거나 : <
• less than or equal 작거나 같거나 : <=
• greater than 크거나: >
• greater than or equal 크거나 같거나 : >=

6. Logical operators

• ||(or)
  • 처음으로 true가 나오면 거기서 멈춤, 왜냐하면 or 값 중에 어떤 것이든 하나라도 true면 true가 되기 때문이다.
  • heavy한 값들(함수나 expression 등)은 뒤에 배치 : 연산을 많이 하는 함수를 호출하거나 또는 expression 값들을 or 제일 앞 값으로 놓게 되면 안된다. simple한 값들을 앞쪽에 배치해서 그 값들이 false 일때만 마지막에 마지못해서 연산을 많이 하는 함수를 호출하거나 또는 expression 값들을 호출되게 끔 만드는 것이 효율적이다.
• &&(and)
  • && 묶여진 값들이 다 true 여야만 true 값 도출
  • 처음으로 false 나오면 이미 false 한 값 되니까 거기서 멈춤
  • heavy한 operation들(함수나 expression 등)은 뒤에 배치
  • 간편하게 null check 시 많이 사용 : && 기준 앞에 있는 object가 null이면 false가 되기 때문에 && 뒤에가 실행이 안됨. 즉 null 이 아닐 때만 && 뒤 실행하게 할 때 사용
• !(not)
  • 값을 반대로 바꿔줌
  • true 값일 경우 ! 사용시 false로 변경됨

7. Equality operators

• == lose equality(== / !==) : type을 변경해서 검사, 안에 들어있는 값이 똑같으면 true 반환 ex ) '5' == 5 은 true
• === strict equality(=== / !==) : type을 신경써서 type이 다르면 다른 것이라고 인지 ex) '5' === 5 은 false
  • 코딩할 때 웬만해서 이것을 사용해 연산하는 것이 좋다.
• object equality by reference
  • equality 공부시 object 신경써서 공부
  • object는 메모리에 탑재될 때 reference 형태로 저장됨
  • 똑같은 데이터가 들어있는 object여도 실제로 메모리에는 각각 다른 reference가 들어있고 그 다른 reference는 서로 다른 object를 가리키게 된다.
  • const laura1 = { name: 'laura' }; const laura2 = { name: 'laura' }; console.log(laura1 == laura2); // 각각 다른 reference가 저장되어 있어 reference가 달라 false console.log(laura1 === laura2); // 똑같은 type이든 아니든 reference 값이 다르므로 false
  • object가 이미 선언된 다른 object를 할당하게 될 경우는 똑같은 reference를 같게 된다.
  • const laura3 = laura1; console.log(laura1 === laura3); // laura1이 가지고 있는 reference value를 laura 3에 할당했기 때문에 laura1과 laura3은 똑같은 reference을 가지고 있기 때문에 true

8. Conditional operators : if

• if, else if, else
• if(statement) {} : statement가 true면 {} 안 내용 실행
• else if(statement) {} : if statement 내용이 false일때 else if로 넘어와서 else if statement 내용이 true 면 else if {} 안 내용 실행
• else {} : if statement도 false, else if statement도 false 일때 else {} 안 내용 실행

9. Ternary operator : ?

• condition ? value1 : value2;
• conditon이 true면 value1 실행하고 아니면 value2 실행
• if를 좀 더 간단하게 쓸 수 있는 연산자
• 값을 할당하거나 간단하게 출력할 때 많이 사용
• Ternary operator을 계속 nesting 해서 사용하는 경우(즉 묶고 묶어서 사용하는 경우) 코드의 가독성이 떨어지기 때문에 if나 switch문을 사용하는 것이 좋다.

10. Switch operators

switch (value) {
  case case1:
    statement1;
    break;
  default:
    statenebt2;
}

• switch () 안 value 값이 case1 이면 statement1 실행하고 break(멈춤)
• case 같은 문장 출력시 case 묶기 가능

  case case1:
  case case2:
      statement1
      break;

• 간편하게 사용 가능
• 사용시 유용한 경우
  • if에서 else if를 여러개 반복한다면 switch 사용하는 것을 고려하는 게 좋음
  • typescript에서 정해져있는 type을 검사하거나 enum 비슷한 값들을 검사할 때는 switch를 사용하는 것이 가독성이 좋음

11. Loops 반복문

• while loop : condition이 맞을 때만 블록 실행하고 싶을 경우 사용, condition이 false로 나오기 전까지는 {} 안 내용을 무한대로 반복해서 계속해서 도는 경우를 말함
• while (condition) {}
• do-while loop : 블럭을 먼저 실행하고 싶다면 사용, do {} 안 statement 먼저 실행한 다음에 while condition 맞는지 안맞는지 확인
• do { statement; } while (condition);
• for loop
  • (시작하는 문장; 조건; 어떤step을 밟아 나갈건지) 작성해야 함
  • begin은 딱 한번만 실행하고 블럭을 실행하기 전에 condition 이 맞는지 검사한 후 statement 실행 후 step대로 값 변화 시킨 후에도 condition이 맞으면 statement 실행 이 과정 condition 맞지 않을 때 까지 무한 반복
  • inline variable declaration : begin에서 선언된 기존 변수를 사용하는 경우가 아니라 블럭 안에 let으로 지역변수를 선언해서 작성하는 것이다.

    for (begin; condition; step) {
    statement;
    }

• nested loops : 반복문 안에 반복문 중첩해서 작성
• loop 안에서는 break나 continue라는 키워드를 사용해서 loop를 끝낼 수 있다
  • break : loop를 완전히 끝내는 것
  • continue : 지금 것과 skip하고 다음 것으로 넘어가는 것을 말한다
  • label을 쓰지 않고 코드를 간편하게 바꿔서 작성하는 것이 좋음

  label :
  반복문 키워드 {
  
  }