JS기초 2 : 형 변환, 연산자, SCOPE, 조건문, switch, 반복문, while, 반복문 제어

형변환

- 자바스크립트는 느슨한 타입 언어 혹은 동적 타입 언어로 변수의 자료형을 명시적으로 선언하지 않아도 됌

- 연산자로 인한 계산이나 변수에 전달되는 값은 자동으로 암묵적 형 변환 수행

- 강제적 형 변환을 위해서는 자료형 함수를 이용해 명시적 형 변환 수행

 

string 예제

- 거의 그대로 나옴

console.log(String(123)); // 123
console.log(String(1/0)); // Infinity
console.log(String(-1/0)); // -Infinity
console.log(String(NaN)); // NaN
console.log(String(true)); // true
console.log(String(false)); // false
console.log(String(undefined)); // undefined
console.log(String(null)); // null

 

number 예제

- 정수와 실수를 모두 포함하는 자료 형 변환이므로 정수 혹은 실수의 명시적 변환은 parse 함수 사용

- 정수 변환: parseInt(피연산자), 실수 변환 : parseFloat(피연산자)

console.log(Number("")); // 0
console.log(Number("123")); // 123
console.log(Number("hello")); // NaN
console.log(Number("123hello")); // NaN 
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(undefined)); // NaN 
console.log(Number(null)); // 0

console.log(parseInt("123.123")); // 123
console.log(parseFloat("123.123")); // 123.123

 

boolean 예제

- 문자열에 어떤 값이 있으면 전부 다 true, 빈 문자열이면 false

console.log(Boolean("")); // false
console.log(Boolean("123")); // true
console.log(Boolean("hello")); // true
console.log(Boolean("0")); // true
console.log(Boolean(0)); // false
console.log(Boolean(123)); // true
console.log(Boolean(NaN)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(null)); // false

 

연산자

- 연산자는 프로그램에서 데이터를 처리하여 결과를 산출할 목적으로 사용되는 문자

- 연산의 대상 값은 피연산자라고 하며 피연산자의 개수에 따라 단항/이항/삼항 연산자의 종류 존재

 

산술 연산자 

console.log(31 + 10);
console.log(31 + 10);
console.log(31 + 10);
console.log(31 - 10);
console.log(31 * 10);
console.log(31 / 10);
console.log(parseInt(31 / 10)); // 3
// 나머지 연산자 %
console.log(31 % 10); // 1
// 거듭제곱 연산자 **
console.log(2 ** 4); // 16

 

대입 연산자

- 계산한 결과를 하나의 변수에 저장하기 위한 연산자

- 문자열에 대한 산술도 가능

let num_1 = 123;
let num_2 = 456;
let str_1 = "hello";
let str_2 = "world!";

let num_3, str_3;
num_3 = num_1 + num_2;
str_3 = str_1 + str_2;

console.log(num_3); // 579
console.log(str_3); // helloworld!

let num_4;
num_4 = num_1 - num_2;
console.log(num_4); // -333

 

복합 대입 연산자

- 산술 연산자로 피연산자를 계산해 결과값을 한번에 대입시켜주는 연산자

- += : 더한 값을 왼쪽에 넣어라

let num = 10;

let result_1, result_2, result_3, result_4, result_5; 
result_1 = result_2 = result_3 = result_4 = result_5 = 31;

result_1 += num;
console.log(result_1); // 41

result_2 -= num;
console.log(result_2); // 21

result_3 *= num;
console.log(result_3); // 310

result_4 /= num;
console.log(result_4); // 3.1

result_5 %= num;
console.log(result_5); // 1

 

증가 감소 연산자

- 1만큼 증가시키거나 감소 시킬 때 사용되는 연산자

- 증가 연산자 : ++(피연산자), (피연산자)++

- 감소 연산자 : --(피연산자), (피연산자)--

let num, result;

num = 10;
result = num++;
console.log(result); // 10 num값은 후순위로 반영되기 때문에 result=10
console.log(num); // 11 이후에는 +1이 된 11

num = 10;
result = ++num;
console.log(result); // 11
console.log(num); // 11

num = 10;
result = num--;
console.log(result); // 10
console.log(num); // 9

num = 10;
result = --num; 
console.log(result); // 9
console.log(num); // 9

 

비교 연산자

- 좌항과 우항의 피연산자를 비교한 다음 결과값을 논리적 자료형으로 반환하는 연산자

- ==은 단순 값의 같음을 비교하는 동등 비교, ===는 자료형까지 같음을 판단하는 일치 비교 연산자

비교 연산자	설명	예제	결과
a > b	a가 b보다 크면 true 아니면 false	5 > 3	true
a < b	a가 b보다 작으면 true 아니면 false	5 < 3	false
a >= b	a가 b보다 크거나 같으면 true 아니면 false	5 >= 10	false
a <= b	a가 b보다 작거나 같으면 true 아니면 false	5 <= 10	true
a == b	a와 b가 같으면 true 아니면 false	5 == '5'	ture
a != b	a와 b가 같지 않으면 true 아니면 false	5 != '5'	false
a === b	a와 b의 자료형과 값이 같으면 true 아니면 false	5 === '5'	false
a !== b	a와 b의 자료형과 값이 다르면 true 아니면 false	5 !== '5'	true

console.log("Z" > "A"); // ture
console.log("Hello" < "Hi"); //ture
console.log("Hello" >= "Helloo"); // false
console.log("5" <= 10); // true
console.log(true == 1); // ture
console.log(false != 123); // true
console.log(true === 1); // false
console.log(false !== 123); // true

 

논리 연산자 

- 좌항과 우항의 피연산자 간 논리 값을 연산하여 참 또는 거짓을 결과로 얻는 연산자

- 논리 연산자 : &&(AND), ||(OR), !(NOT)

- 조건문에서 많이 사용됨

논리 연산자	설명	예제	결과
a || b	a가 b보다 크면 true 아니면 false	false || 0	false
		false || true	true
a && b	a가 b보다 작으면 true 아니면 false	true && 3	true
		true && false	false
!a	a가 b보다 크거나 같으면 true 아니면 false	!false	true
		!123	false

console.log(true || false); // true
console.log(Boolean(0 || false)) // false
console.log(Boolean(123 || false))// true
console.log(Boolean(123 && 0))// false
console.log(Boolean(false && true))// false
console.log(Boolean(true && 3))// true
console.log(Boolean(0 && false))// false
console.log(!false);// true
console.log(!123);// false

 

scope

- 변수 혹은 상수에 접근할 수 있는 범위

- 모듈/함수 내 코드에서 동일한 변수 사용시 간섭을 줄이는 용도로 사용(코드 간의 구역을 나눔)

- Global Scope와 Local Scope 타입으로 구분

- Global Scope : 전역에 선언되어 어디에서도 접근 가능

- Local Scope(block, function level scope) : 특정 지역에 선언되어, 해당 지역 내에서만 접근 가능

let x = 1;
let y = 2

{ // local scope
  let x = 3;
  let y = 4; 
  console.log(x); // 3
  console.log(y); // 4
}
 
console.log(x); // 1
console.log(y); // 2

- local scope 내에 있는 값은 전역 속성이 아니기 때문에 에러 발생

let A = 1;
let B = 2;

{
  let C = 3;
  let D = 4;
  console.log(C); // 3
  console.log(D); // 4
}

console.log(C) // ReferenceError: C is not defined

- local scope 내 또다른 local scope가 있을 때에도 해당 지역에서 불러옴

let A = 1;

{
  let C = 3;
  let D = 4;
  console.log(C); // 3

  {
    let C = 5;
    let D = 6;

    console.log(C); // 5
  }
}

- Block Level Scope, Function Level Scope 예시

let index = 1000;

// function Level Scope
function local_func() {
  let index = 100;

  // Block Level Scope
  for (let index=0; index < 10; index++) {
    console.log(index); // 0~9
  }

  console.log(index); // 100
}

local_func();
console.log(index); // 1000

 

조건문 if-else

- 알고리즘에서 논리적 비교를 할 때 사용되는 조건식

- if, if else, else 키워드로 구성되며 조건식에 맞을 경우 {} 내에 있는 명령문을 수행함

- 실행 문장이 단일 문장일 경우에 {} 생략 가능

- if에 조건이 들어감

let apple_price = 9;

if (apple_price >= 10) { 
  console.log("very expensive");
} else if (apple_price < 5) {
  console.log("very cheap");
} else {
  console.log("nice~"); // nice~
}

 

3항 연산자

- if-else 대체하여 사용 가능

- 변수 = (조건식) ? 참일 때 값 : 거짓일 때 값

let age = 25;

// 조건문 : if-else 
if (age < 20) { 
  msg ="so young"
} else {
  msg ="still young"
}

console.log(msg); // still young

// 조건문 : 3항 연산자
msg_2 = age < 20 ? "so young" : "still young";
console.log(msg_2); // still young

 

조건문 switch

- 표현식을 평가해 그 값이 일치하는 case문을 실행하는 조건문

- switch, case, break, default 키워드로 구성되며 switch 조건에 맞는 case 구문을 수행

- 일반적으로 하나의 case만 수행되도록 case 끝을 break로 끝맺음

let day_number = 6;
let day;

switch (day_number) {
  case 0 :
    day = "Sunday"; break;
  case 1 :
    day = "Monday"; break;
  case 2 :
    day = "Tuesday"; break;   
  case 3 :
    day = "Wednesday"; break;   
  case 4 :
    day = "Thursday"; break;   
  case 5 :
    day = "Friday"; break;   
  case 6 :
    day = "Saturday"; break;  
  default :
    day = "error"; break;
}

console.log(day); // Saturday

let browser = "Chrome";
let msg;

switch (browser) {
  case "Explorer" :
    msg = "ActiveX installation required";
    break;
  case "Chrome" :
  case "Firefox" :
  case "Safari" :
  case "Opera" :
    msg = "Supported browser!";
    break;
  
  default :
    msg = "Unssupported browser!";
    break;
}

console.log(msg); // Supported browser!

 

반복문 for

- 선언문(Init Expression), 조건문(Test Expression), 증감문(Update Expression) 형태로 이루어진 반복문

- 조건문이 fail 되기 전까지 코드 블록을 반복 수행

- 선언문, 조건문, 증감문 자리에 공백 입력 가능

for (let i = 0; i < 3; i++) {
  console.log(i);
}

for (let i = 1; i < 3; i++) {
  console.log(i);
}

let i = 0;
for (; i < 3;) {
  console.log(i);
  i++;
}

 

2중 for 예제

for (let i = 0; i < 3; i++) {
  for (let j = 0; j <3; j++) {
    console.log(`${i} + ${j} = ${i + j}`)
  }
}

/**
 * 0 + 0 = 0
 * 0 + 1 = 1
 * ...
 * 2 + 2 = 4
 */

 

반복문 for(확장)

for .. in 반복문

- 객체의 key, value 형태를 반복하여 수행하는데 최적화 된 유형

- 첫번째부터 마지막까지 객체의 키 개수만큼 반복

/** for ...in 반복문
for(Key in object) {
} 
*/

const person = { fname: "John", lname: "Bob", age : 25};

let text = "";
for (let x in person) {
  text += person[x]; 
}

console.log(text); // JohnBob25

 

for ...of 반복문

- Collection 객체 자체가 Symbol.iterator 속성(property)을 가지고 있어야 동작 가능한 유형

- ES6에 새로 추가된 Collection 기반의 반복 구문

/**  for ...of 반복문
for(variable of iterable) {
 }
 */

let language = "JavaScript";
let text = "";

for (let x of language) {
  text += x; // text에 x 값을 누적
  console.log(x); // J a v a ... t
}

 

반복문 while

- 조건문이 참일 때 코드 블록을 계속해서 반복 수행하는 반복문

- for 문에 비해 선언문과 증감문 없이 loop를 수행하며, 무한 loop 등 수행 시 많이 사용

- 조건문을 코드 블록보다 아래로 옮긴 do... while 반복문도 존재(최소 한번 수행이 필요할 때 많이 사용)

let i = 0;
while ( i < 3 ) {
  console.log(i); // 0,1,2
  i++;
}

i = 0;
do {
  console.log(i); // 0,1,2
  i++;
} while ( i < 3 );

i = 4;
do {
  console.log(i); // 4
  i++;
} while ( i < 3 );

 

반복문 제어

break

- 반복문 수행시 코드 블록을 탈출할 때 사용되는 식별자

- 다중 반복문일 경우 가장 안쪽의 반복문을 종료

- Label을 통해 다중 반복문을 한번에 종료 가능

*Label :반복문 앞에 콜론과 함께 쓰이는 식별자

 

continue

- 반복문 수행시 코드 블록을 해당 라인에서 중지하고 블록 코드를 종료시킨 후 반복문 내 명시된 조건 판단

//break
let text = "";

for (let i = 0; i < 10; i++) {
  if (i === 3) break;
  text = text + i;
}
console.log(text); // 012

text ="";

//continue
for (let i = 0; i < 5; i++){
  if (i === 3) continue;
  text = text + i
}
console.log(text); // 0124

 

Lable 예제

- 프로그램 내 특정 영역을 지정해 별도 이름을 붙이는 식별자

- break와 continue를 사용하는 반복문 안에서만 사용 가능하며, break나 continue 지시자 위에 있어야 함

// 0 * 0 = 0  1 * 0 = 0  2 * 0 = 0
for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
  console.log(i + " * " + j + " = " + i * j);
  break;
  }
}

// 0 * 0 = 0 
end: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
  console.log(i + " * " + j + " = " + i * j);
  break end;
  }
}

반복문 연습문제

const UNTIL_NUM = 10;
let sum = 0; 

/* 내오답
for (let sum; sum <= UNTIL_NUM; sum++) {
  sum = sum + 2; 
  console.log(sum);
} 
*/

for (let i = 0; i <= UNTIL_NUM; i++) {
  if (i % 2 == 0) sum += i;
} 
console.log(sum); // 30

// 2 x 1 = 2 ... 9 x 9 = 81
for (let i =2; i <= 9; i++) {
  for (let j = 1; j <= 9; j++)
  console.log(i + " x " + j + " = " + i*j);
}

---

자바스크립트 기초 20강 완료! 앞으로도 20강 남음

논리적인 판단이 들어가는 구문을 작성하다보니 이해+ 어떻게 활용하는지도 알아야 했던 ㅎㅎ;

 

강의 듣고 블로그에 쓰기 위해 한번 더 듣는 과정에서 이해하는 것들이 훨씬많다. 

 

이 속도로는 코딩테스트 전까지 할 수 있는게 많지 않으니 더 힘을 내보자구~~