KDT 5th 웹개발자 입문 수업 12일차

 

1. 기본 연산자 

 

1-1. % : 나머지 연산자

나머지는 나눠준 그 num보다 큰 수가 나올 수 없다는 특성을 이용한 문제가 많음

 

홀수 : num % 2 == 1

짝수 : num % 2 == 0

 

✚ Math.floor() : 소수점 아래는 버리고 리턴 <-> Math.ceil()

✚ Math.random() : 0.0~1.0 사이의 값을 랜덤하게 반환, 주로 * 10해서 사용

✚ Math.sqrt() : 루트 값 리턴

✚ Math.pow(base, exp) : base^exp 제곱 표현

✚ Math.PI  : 원주율의 유사값이 정의되어 있음

 

1-2. ** : 거듭 제곱

Math.pow(base, exp) 와 base**exp는 같음.

 

1-3. 연산자 줄여쓰기

a += b -> a = a + b

a -= b -> a = a - b

a *= b -> a = a * b

a /= b -> a = a / b

a %= b -> a = a % b

 

1-4. 증가/감소 연산자

전위 증가감소 연산자 --> 결과가 바로 반영

++num;

--num;

 

후위 증가감소 연산자 --> 결과가 다음 줄부터 반영

num++; ----> num+=1 로 쓰는 것을 권장

num--;

 

1-5. 비교 연산자

== : 타입과 무관하게 '값'이 동일하면 true (지양)

!= : 동일하지 않으면 true

a < b : a가 b 보다 작으면 true

a <= b : a가 b 보다 작거나 같으면 true

 

1-5-1. 일치 연산자 : ===

변수의 값뿐만 아니라 자료형까지도 동일해야 true

<-> !==

// 비교 연산자
// 일치 연산자
let a = 10;
let b = 5;
let strB = "10";

console.log(a === b);
console.log(a < b);
console.log(a === strB);
console.log(a == strB);

 

1-6. 논리 연산자

a && b : a, b 전부가 true일 때만, true/ and

------> a 값이 false 라면 성능을 위해 b를 따로 검사하지 않고 바로 넘어감

a || b : a, b 둘 중 하나라도 true라면, true/ or

------> a 값이 true 라면 성능을 위해, b를 따로 검사하지 않고 바로 넘어감

!a : a가 true면 false, false면 true / not

 

 

 

2. 조건문

2-1. if else (else if)

if (조건1) {
	조건1이 참일 때 실행하는 블럭
} else {
	조건1이 거짓일 때 실행하는 블럭
}

if (조건1) {
	조건1이 참일 때 실행
} else if (조건2) {
	조건2가 참일 때 실행
} else {
	조건1, 조건2 모두 거짓일 때 실행
}

 

2-2. 다중 비교 연산자 사용 조건

&&이 || 보다 우선순위가 높으므로 ()를 잘 사용하여 묶어줘야 함

가급적 다중 비교 연산자를 사용하지 않도록 주의, 중요한 조건을 앞쪽에 써주는 게 좋음

 

2-3. switch 문

default문은 가급적 써주는 것을 지향

if문을 switch문으로 써줄 수 있을 때 가독성을 위해서 switch문으로 작성해주는 것을 지향

 

switch ( 변수) {
	case 값1 :
    	변수와 값1이 일치하면 실행
   	 	break;
    case 값2 :
    	변수와 값2이 일치하면 실행
    	break;
    default :
    	일치하는 값이 없을 때 실행
        break;
    finally :
    	무조건 실행하는 블록
}

new Date().getDay() 를 사용하면 0~6 사이를 리턴하는데 각 숫자마다 요일을 나타낸다.

let day;
switch(new Date().getDay()) {
	case 0:
    	day = "일요일";
        break;
    case 1:
    	day = "월요일";
        break;
    //...
    case 6:
    	day = "토요일";
        break;
}
console.log(day);

 

3. 3항 연산자

조건식 ? 참 : 거짓

 

 

4. 반복문

 

4-1. for

for (초기화식 ; 조건식 ; 증감식 ) {
	실행 문장
}
//초기화식 -> 조건식 -> 실행문장 -> 증감식

2중 반복문
for (let i = 0; i < 3; i++) {
   console.log(`상위 for문 ${i}`);
   for (let j = 0; j < 3; j++) {
     console.log(`   하위 for문 ${j}`);
   }
 }

 

4-2. while

초기화식
while ( 조건식 ) {
증감식
}

for 문과 달리 조건을 변경하는 구문이 포함이 되어 있지 않아 무한 루프의 가능성이 높으므로 주의하여 사용

 

1. while 문의 조건문에 끝날 수 있는 조건을 넣어주기

2. while 문은 true로 무한 루프를 돌리다가 break문을 사용하여 끝내주기

let idx = 0;

while(true) {
  idx++;
  if(idx === 10) break;
}

 

4-3. do-while

초기화식

do {
	증감식
} while( 조건식 );

무조건 1번은 실행되도록 하고자 할 때 사용

 

let idx = 0;
do {
  idx++;
  console.log("do-while 실행"); //실행 됨
} while (idx > 10);

let idx2 = 0;
while (idx2 > 10) {
  idx2++;
  console.log("while 실행"); //실행 안됨
}

 

5. 반복문 제어

 

5-1. break 문

break를 만나는 순간 반복문을 멈추고 빠져나옴

 

5-2. continue 문

continue를 만나는 순간 해당 반복 분기의 아래의 나머지 코드를 실행하지 않고 증감식으로 이동하여 실행하고 다음 반복 분기의 코드를 실행

 

 

6. Function

특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

 

// 함수의 선언
function 함수명(매개변수) {
	함수 실행 코드
}

// 함수의 호출
함수명(인자);

6-1. 기명함수 / 익명함수

 

6-2.

매개변수 : 함수를 정의할 때, 값을 전달하기 위해 사용하는 변수 (인자를 받아주는 변수)

인자 : 함수를 호출할 때 실제로 전달되는 값

* 매개변수가 있는 함수인데 인자를 전달해주지 않았다면, undefined가 들어가진다.

* 이를 방지하기 위해 기본값 설정이 가능 (ES6 이후)

 

// 직각 삼각형의 넓이
function triangleArea(width, height) {
  if (typeof width !== 'number' || typeof height !== 'number') return;
  return (width + height) / 2;
}

// 원의 넓이
function circleArea(radian) {
  if (typeof radian !== 'number') return;
  return Math.PI * (Math.pow(radian, 2));
}

// 피타고라스의 정리
function pythagoras(width, height) {
  if (typeof width !== 'number' || typeof height !== 'number') return;
  return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
}

 

6-3. 함수 선언 방법들

 

6-3-1. 함수 선언문

어디서든 호출 가능 (호이스팅에 의해 가능한 것)

 

6-3-2. 함수 표현식

함수의 선언을 특정 변수에 담는 것으로, 호이스팅 되지 않아서

코드에 함수 표현식에 도달해야 생성되고 사용할 수 있는 것

 

6-3-3. 화살표 함수

function 키워드를 없애고 매개변수와 { } 사이에 => 를 추가

변수에 함수를 담아준 것이므로 당연히 호이스팅 안됨

this가 생기지 않으므로 메모리 관련으로 좀더 효과적이라고 하여 권장됨

 

sayHello(); //OK
//sayBye(); //ReferenceError
//showError(); //ReferenceError

//함수 선언식
function sayHello() {
  console.log("Hello!");
}

//함수 표현식
let sayBye = function() {
  console.log("Bye!");
}

//화살표 함수 
let showError = () => {
  console.log("Error!");
}
sayBye(); //OK
showError(); //OK