[22-23 동계 모각코] 1회차 목표 및 결과

목표

1회차: 23/01/28 14:00 ~ 18:00
계획: Javascript 기본 문법 정리 (1)
목적: React 사용을 위함
방향: 기존의 프로그래밍 언어의 개념(e.g. 변수, 함수, 조건문, 반복문 등)이 Javascript에서는 어떻게 사용되는지 코드로 간단하게 확인

결과

Javascript 기본 문법 정리

출력

console.log("Hello");

변수 선언

let a;
let b = 1;
console.log(a);
console.log(b);

• 기본적으로는 let이지만 실전에서는 const를 변수로 많이 사용

함수 선언

function add(a, b) {
  return a + b;
}
console.log(add(1, 2));

비교 연산

console.log(3 === 3);
console.log(3 !== 3);
console.log('abcd' === 'abcd');

AND, OR, NOT

console.log(true && false);
console.log(false || true);
console.log(!true);

typeof 연산자

console.log(typeof 123);
console.log(typeof 1.23);
console.log(typeof "abc");
console.log(typeof true);
console.log(typeof add);
console.log(typeof 1 - 2);
console.log(typeof (1 - 2));

• 우선순위가 높은 연산자

형 변환

console.log(Number('10') + Number('2'));
console.log(String(10) + String(2));
console.log(Number(true));
console.log(Boolean("abc"));
console.log(Boolean(3));
console.log(Boolean(0));
console.log(Boolean(''));
console.log(Boolean(NaN));              // 0, '', NaN -> falsy
console.log(Boolean(typeof false));

산술연산자에 대한 형 변환

console.log(4 + '2');      // + -> 문자열 연결을 우선시
console.log(4 + true);
console.log(4 - true);
console.log(4 * false);
console.log(4 / '2');
console.log('4' ** true);
console.log(4 % 'two');    // NaN과의 연산 -> NaN

관계연산자에 대한 형 변환

console.log(2 < '3');
console.log(2 > true);
console.log('2' <= false);
console.log('two' >= 1);    // NaN -> 비교가 불가능할 때 false

비교연산자에 대한 형 변환

console.log(1 === '1');   // === -> 일치 -> type까지 고려
console.log(1 === true);
console.log(1 == '1');    // == -> 동등 -> type 달라도 형 변환 통해 같다면
console.log(1 == true);

템플릿 문자열

let year = 2018;
let month = 3;
let day = 11;
console.log(`생년월일은 ${year}년 ${month}월 ${day}일입니다.`)
let num = 3;
function getTwice(num) {
  return 2 * num;
}
console.log(`${num}의 두 배는 ${getTwice(num)}입니다`);

• ``, ${} 활용

NULL & UNDEFINED

let c;
console.log(c);                   // undefined -> 처음부터 없음
c = null;
console.log(c);                   // null -> 의도적으로 없음
console.log(null == undefined);
console.log(null === undefined);
function square(x) {
  console.log(` 결과는 ${x * x}`);
}
console.log(square(2));           // 함수에 return 문이 없을 때도 undefined

Optional Parameter

function introduce(name, age, nationality='한국') {
  console.log(`제 이름은 ${name}입니다.`);
  console.log(`나이는 ${age}살이고,`);
  console.log(`국적은 ${nationality}입니다.`);
}
introduce("Mark", 24, "미국");
introduce("철수", 25);

• 함수의 parameter 중 맨 뒤에 선언

상수

const PI = 3.14;
// const PI;      error
// PI = 3;        error
const MY_NUMBER = 3;
const f = {
  name : "Jake"
};
f.age = 25;   // 이렇게는 변할 수 있음
console.log(f);
let g = [1, 2, 3];
const h = g;
g.splice(2, 1, 4);    // 이렇게도 변할 수 있음
console.log(h);

• 상수의 변수명은 대문자로 표기
• 실전에서는 const로 변수를 (소문자로) 쓰는 것을 권장

IF

let t = 0;
if (t <= 0) {
  console.log("물이 업니다.");
} else if (t > 100) {
  console.log("물이 끓습니다.");
} else {
  console.log("물이 얼지도 끓지도 없습니다.");
}

• 조건 비교는 === 이용

SWITCH

let choice = 1;
switch (choice) {
  case 1:
    console.log("토끼를 선택한 당신, ...");
    break;
  case 2:
    console.log("고양이를 선택한 당신, ...");
    break;
  case 3:
    console.log("코알라를 선택한 당신, ...");
    break;
  case 4:
    console.log("강아지를 선택한 당신, ...");
    break;
  default:    // else 느낌
    console.log("1~4의 숫자를 선택해주세요.");
}

FOR

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

WHILE

let i = 0;
while (i < 5) {
  console.log(`${i} abc`);
  i++;
}

BREAK

i = 1;
while (i < 5) {
  if (i === 3) {
    break;
  }
  console.log(i);
  i++;
}

• 반복문(for, while)을 끝냄

CONTINUE

i = 1;
while (i < 5) {
  if (i === 2) {
    i++;
    continue;
    // console.log(i)    unreachable
  }
  console.log(i);
  i++;
}

• 반복문에서 특정 부분을 건너 뜀