[JavaScript] 기본개념 04

해당 벨로그는 드림코딩의 자바스크립트 기초 강의 (ES5+) 4강을 보고 작성한 글입니다.

4강은 기본 연산자, if문, 반복문에 대해서 배운다.

Operator(연산자)

String concatenation (문자열 연산)

플러스(+) 기호를 이용해서 문자열과 문자열을 합해서 새로운 문자열을 만들어줄 수 가 있다. 문자열에 숫자를 더하게 되면, 숫자가 문자로 변환되어서 합해질 수 있다. 백틱 기호를 활용해서 string literals 도 만들 수 있다. $ 기호를 이용하면 변수 값을 계산해서 문자열 값으로 포함해서 문자열을 만들게 된다. string literals 의 장점은 줄바꿈을 해서 작은따옴표(’) 를 이용해도 그대로 (’) 문자열로 출력된다. 백틱을 이용하는 대신 (’) 를 이용하려면 \' 를 사용하면 (’) 로 인식된다. 특수 문자열 이라고 부르는 데 \’ 외에도 \n (줄바꿈) , \t (탭) 등이 있다.

numberic operators (숫자 연산)

++, — operators (증가, 증감 연산자)

증가 연산자

• preIncrement (전치 증가 연산자) → ++ 기호가 변수 앞에 붙는다. (++counter) counter 를 1 증가시킨 다음에 preIncrement 라는 변수에 counter 를 할당한다.
• postIncrement (후치 증가 연산자) → ++ 기호가 변수 뒤에 붙는다. (counter++) counter 를 postIncrement 에 그대로 할당한 다음에 그 뒤에 counter 를 1 증가시킨다.

증감 연산자

• preDecrement (전치 증감 연산자) → 마이너스(—)가 변수 앞에 있어 counter 값이 바로 1 감소된 후 preDecrement 에 할당된다.
• postDecrement (후치 증감 연산자) → counter 값이 그대로 postDecrement 에 할당된 후 counter 값이 1 감소한다.

= operators (할당 연산자)

할당 연산자는 +=, -=, *=, /= 이런 식으로 간추려서 사용하는 경우가 많다.

≤ operators (비교 연산자)

Logical Operators(논리연산자)

논리연산자 ( ||or, &&and, !not )

• or 는 조건 중에 true 가 제일 처음 나오자마자 연산을 멈춘다 → 그 문항 때문에 조건이 이미 true가 되기 때문이다. 더 이상 연산을 진행해 시간을 낭비할 필요가 없기 때문이다.

• and 는 false 가 나오면 false 가 결과가 된다.

  • and 연산은 주로 null 체크에 이용한다. → null 이 아니여야 value 값을 받아오기 때문
  • not 연산은 값을 반대로 바꿔준다.
    
    
  

• or 연산자는 ${value1 || value2 || check()} 에서 처음으로 true 가 나오면, 그곳에 멈춘다. → or의 조건문 중에 하나라도 true 가 있으면 결과값이 true 이기 때문이다.

  앞에서 true 가 나오면, 뒤에 조건문은 확인도 하지 않고 바로 결과값을 true 로 반환한다.

• check 함수처럼 연산을 많이하는 함수 혹은 복잡한 조건을 조건문 가장 앞에 두게 되면 안된다. → 확인하기 간단한 조건들을 앞에 두고, 복잡한 함수나 조건들을 뒤에 두어 마지막에 마지못해 호출하도록 설계하는 것이 개발에서 가장 효율적이다.

• and 연산자는 ${value1 || value2 || check()} 가 모두 true 여야 true 를 반환한다.

  그래서 조건 중에 하나라도 false 가 있다면 뒤에 있는 조건을 보지도 않고 false 를 반환한다. and 연산자도 heavy 한 operation 일수록 조건문의 가장 뒤에서 체크하는 것이 가장 효율적이다.
  

• and 연산자는 간편하게 null 체크할 때도 사용한다. object 가 null 이면, false 가 되기 때문에, 뒤의 조건들이 실행되지 않는다. nullableObject 가 null 이 아닐때만, nullableObject 에 something 을 받아온다.

• not 연산자는 반환값을 반대로 바꿔준다.

Equality Operators

Equality( ==, ! =, ===, ! = = )

• loose equality( ==, 2개의 등호) → 타입을 변경해서 검사. 타입이 달라도 값이 같으면 같다고 출력

• strict equality( ===, 3개의 등호) → 타입, 값 둘 다 검사. 값과 타입까지 같아야 같음

  ⇒ 코딩할 때, strict equality 를 사용해야 좋다.
  

• Equality 를 공부할 때, 오브젝트를 좀 더 신경써서 공부할 필요가 있다.

  오브젝트라는 값이 탑재될 때 reference 형태로 저장된다.

  

  ellie1, ellie2 가 같은 값을 가지고 있더라도 ellie1, ellie2 에 각각 다른 reference 가 들어있다. 각 reference 들은 서로 다른 오브젝트들을 가르키고 있다.

  ellie3 은 ellie1 의 reference 가 할당되니까 ellie1 과 동일한 reference 를 가지고 있게된다. ellie3 에 ellie의 reference 가 대입되어 ellie1 과 동일한 곳을 가르킨다.

If Operators

• if, else, else if
  • if의 조건이 true 라면 조건을 실행
  • 아니라면 else if 조건 확인
  • else if도 아니라면 else 확인

? operators (삼항 연산자)

• ( 조건 ) ? (실행1) : (실행2)
  • 조건이 참이라면 실행1을 실행함
  • 조건이 거짓이라면 실행2를 실행함

Switch Operators

• switch (값) { case A : a~ break; case B : ~ break; default : ~ break; }
  - switch의 값이 A 라면 a 실행 후 break 문으로 빠져나옴
  - switch의 값이 B 라면 b 실행 후 break 문으로 빠져나옴
  - switch의 값이 A, B 둘다 아니라면, default 실행 후 break 문으로 빠져나옴

  ⇒ if 사용할 때, switch 사용할 때를 잘 구분해 각각을 사용해야 한다. 둘이 섞이는 경우 없음

Loops(반복문)

• While Loop
  • while 의 조건이 참이라면 블록 내부를 무한히 실행

• Do-While Loop

  • do 블록 내부를 먼저 실행한 후 while 조건을 확인한다. 조건 검사후 루프를 계속도는지 판단
  • 블록을 먼저 실행하고 싶으면 do-while 문, 조건문이 맞을 때만 블록을 실행하고 싶다면 while 문을 사용하면 된다.

• For Loop

  • for(시작점; 조건; 어떤스텝) → 시작점 한번 체크 후, 조건과 스텝을 상황에 맞게 무한 확인

• Nested Loop

  • while 문이나 for 문은 중첩해서 사용할 수 있다.
  • nested loop 는 빅오가 O(n^2) 라서 추천하는 작성법은 아니다. → 지양

퀴즈 → 1, 2

1. 0~10까지 continue를 이용해 짝수만 출력하시오.

for(let i=0; i≤10; i++) {
	if(i%2!=0) {
		continue;
	}
	console.log(`${i}`);
}

2. 0~10까지 출력하되 break을 사용해 8 이상 에서 멈추시오.

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