[ JavaScript ] 자바스크립트 기초 (2)

📌 연산자

- 산술연산자

• 덧셈 / 뺄셈 / 곱셈 / 나눗셈 / 나머지
• 괄호를 이용해 먼저 계산할 부분 지정

console.log(10 + 10);
console.log(10 - 10);
console.log(10 * 10);
console.log(10 / 10);
console.log(10 % 13);

- 지수연산자

console.log(2**3);

- 증감 연산자

let number = 1;

number++;
console.log(number);

number--;
console.log(number);

/* result에 값 할당 후 증감 */
let result = 1;
console.log(result);
result = number++;
console.log(result, number);

result = number--;
console.log(result, number);

/* 선증감후 result에 값 할당 */
result = ++number;
console.log(result, number);

result = --number;
console.log(result, number);

// 숫자 타입 아닌 타입에 + -
let tmp = '99';
console.log(+tmp)
console.log(typeof +tmp)     //number로 변경 but, 기존 타입이 변경되는 건 아님

tmp = true;
console.log(+tmp);
console.log(typeof +tmp);

tmp = false;
console.log(+tmp);
console.log(typeof +tmp);

tmp = '가나다';
console.log(+tmp);

tmp = '99'
console.log(-tmp)

- 할당연산자

num = 100;
console.log(num);

// 계산후 다시 변수에 저장
num += 10;
console.log(num);

num -= 10;
console.log(num);

num *= 10;
console.log(num);

num /= 10;
console.log(num);

num %= 10
console.log(num);

- 비교연산자

값의 비교

console.log(5 == 5);
console.log(5 == '5');
console.log(0 == '');
console.log(1 == true);

console.log(5 != 5);
console.log(5 != '5');
console.log(0 != '');
console.log(1 != true);

값과 타입 비교

console.log(5 === 5);
console.log(5 === '5');
console.log(0 === '');
console.log(1 === true);

console.log(5 !== 5);
console.log(5 !== '5');
console.log(0 !== '');
console.log(1 !== true);

대소관계 비교

console.log(100 > 1);
console.log(100 <= 1);

- 삼항 조건 연산자

// 조건 ? 참일경우 : 거짓일경우 
console.log(10 > 0 ? '10이 0보다 큼' : '10이 0보다 작음')

- 논리연산자

// && (and) : 모두 true => true
console.log(true && true);
console.log(true && false);

// || (or) : 한쪽만 true => true
console.log(true || true);
console.log(true || false);

⭐ 단축평가

• 장점 : 계속 연결할 수 있음
• && 사용할 때 좌측이 true => 우측값 반환
• && 사용할 때 좌측이 false => 좌측값 반환
• || 사용할 때 좌측이 true => 좌측값 반환
• || 사용할 때 좌측이 false => 우측값 반환

console.log(true || '가나다');
console.log(false || '가나다');
console.log(true && '가나다');
console.log(false && '가나다');

console.log(true && true && '가나다');
console.log(true && false && '가나다');

⭐ null 연산자

let name;
console.log(name);

// if name 변수가 undefined or null => 좌측값 반환
name = name ?? '가나다';
console.log(name);

name = name ?? '다나가';
console.log(name);

let name2;
name2 ??= '가나다';
console.log(name);

📌 조건문

- if 문

let num = 5;

if (num % 2 === 0) {
    console.log('num은 짝수');
} else {
    console.log('num 홀수');
}


if (num % 2 === 0) {
    console.log('2의 배수이다')
} else if (num % 3 === 0) {
    console.log('3의 배수이다')
} else {
    console.log('2, 3의 배수가 아니다.')
}

- switch 문

const en_day = 'monday';
let kr_day;

switch (en_day) {
    case 'monday':
        kr_day = '월요일';
        break;
    case 'tuesday':
        kr_day = '화요일';
        break;
    case 'wednesday':
        kr_day = '수요일';
        break;
    case 'thursday':
        kr_day = '목요일';
        break;
    case 'friday':
        kr_day = '금요일';
        break;
    default:
        kr_day = '주말';
        break;
}

console.log(kr_day);

📌 반복문

- for 문

for (기준 변수; 조건; 행동)

// for (기준 변수; 조건; 행동)
for (let i = 0; i < 10; i++) {
    console.log(i);
}

중첩 for 문

// 중첩 for문
for (let i = 0; i < 3; i++) {
    for (let j = 3; j > 0; j--) {
        console.log(i, j)
    }
}

// * 을 이용해 6x6의 정사각형 출력
let square = '';
for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
        square += '*';
    }
    square += '\n';
}
console.log(square);

for ~ in

인덱스 값을 가져오기 위함

// for ... in
const info = {
    name : '가나다',
    age : 22,
}

for (let key in info){
    console.log(key)
}

const numberArray = ['one', 'two', 'three', 'four', 'five', 'six', 'sevex']
for (let key in numberArray) {
    console.log(key)        // 인덱스 값 출력
}

const numberArray = ['one', 'two', 'three', 'four', 'five', 'six', 'sevex']
for (let key in numberArray) {
    console.log(`${key}:${numberArray[key]}`);  // 인덱스 해당하는 값 출력
}

for ~ of

value 값을 가져오기 위함

for (let value of numberArray) {
    console.log(value);
}

- while 문

let num = 0;
while (num < 10) {
    num++;
    console.log(num);
}

do-while 문

• 먼저 바디 실행후, 조건 판단

let number = 0;
do {
    number ++;
}while (number<10);

console.log(number);

// 실행결과 => 10

- break 문

• 반복문 탈출

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break;
    }
    console.log(i);
}

// -------------------------------------

while (number < 10){
    if (number===5){
        break;
    }

    number ++;
    console.log(number);
}

- continue 문

• 현재 진행하고 있는 반복문은 skip하고, 다음 반복으로 넘어감

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        continue;
    }
    console.log(i);
}

// -------------------------------------

number = 0;
while (number < 10) {
    number++;

    if (number === 5) {
        continue;
    }
    console.log(number);
}

📌 타입변환

1. 명시적 (강제적)
2. 암묵적

- 명시적

let age = 32;
let strAge = age.toString();
console.log(typeof strAge, strAge);

// 실행결과: string 99

console.log(typeof (99).toString(), (99).toString());
console.log(typeof (true).toString(), (true).toString());
console.log(typeof (Infinity).toString(), (Infinity).toString());

// 숫자타입으로 변환
console.log(typeof parseInt('0'), parseInt('0'));
console.log(typeof parseFloat('0.99'), parseFloat('0.99'));
console.log(typeof +'1', +'1');

Boolean 타입으로 변환

• string 안에 값이 있으면 => boolean 기준으로 true
• 안에 값이 있으면 => true
  => 즉, 안에 값이 있으면 true, 없으면 false
• 숫자 0일경우 false, object와 배열은 무조건 true

console.log(!'x');
console.log(!!'x');

console.log(!!0);
console.log(!!'0');

console.log(!!false);
console.log(!!undefined);
console.log(!!null)

console.log(!!{})   // object는 무조건 true
console.log(!![])   // 배열은 무조건 true

- 암묵적

let test = age + '';
console.log(typeof test, test);

console.log('98' + 2);
console.log('98' * 2);
console.log('98' - 2);

---

📒 코드팩토리 - <9시간만에 끝내는 코드팩토리의 Javascript> https://inf.run/8E6Q