26.9.22 / Tue

BaO·2026년 9월 22일

TIL

목록 보기
28/33

4-2

기본 연산자

산술 및 복합 대입 연산자

  • 증감 연산자
    • ++ : 1씩 증가
    • -- : 1씩 감소
let num = 10;
// let num2 = num++; // ++ 연산자가 뒤에 존재하는 경우 대입보다 우선순위가 낮음
let num3 = ++num;    // ++ 연산자가 앞에 존재하는 경우 대입보다 우선순위가 높음

// console.log(num2); // 10
console.log(num3);    // 11
  • 동등성 비교 VS 동일성 비교
    • 동등성 비교
      • ==
    • 동일성 비교
      • === (권장 사항)
    • 부정 연산자
      • ! : 참은 거짓으로, 거짓은 참으로 변경
      • != : 동등하지 않다.
      • !== : 동일하지 않다.
    • 논리 연산자
      • && : AND
      • || : OR
      • ! : NOT

제어문

조건문 ( if, else - if, else )

// IF문
if (조건1) {
    조건1이 참일때 실행 코드
}

// IF-ELSE 문
if (조건1) {
    조건1이 참일때 실행할 코드
} else {
    조건1이 거짓일때 실행할 코드
}

// IF - ELSE IF - ELSE 문
if(조건1) {
    조건1이 참일때 실행할 코드
} else if(조건2){
    조건1이 거짓, 조건2가 참일때 실행할 코드
} else if (조건3){
    조건1이 거짓, 조건2가 거짓, 조건3이 참일때 실행할 코드  
} else {
    조건1이 거짓, 조건2가 거짓, 조건3이 거짓일때 실행할 코드 
}

// 삼항 조건식
(조건식) ? 참일때 실행되는 코드, 값 : 거짓일때 실행되는 코드, 값 

let num = 10;
const result = num === 10 ? '숫자 10임' : '숫자 10 아님'
console.log(result) // 숫자 10임
let greeting = '';
greeting = greeting || '기본값';

// gretting을 선언만 하고 값을 대입하지 않았기 때문에 undefined 상태 논리연산자가 false라고 판별하는 값을 가진 경우 
// OR 연산자를 사용하면 다음항의 값을 대입할 수 있기 때문에 기본값 설정으로 사용할 수 있다.
console.log(greeting)

let num = 0;
num = num || 10;
// 0 또한 논리 연산자에서는 false로 인식하기 때문에 num = 10이 된 상태
console.log(num) // 10

let num = 0;

num = num || 10;
// 0 또한 논리 연산자에서는 false로 인식하기 때문에 num = 10이 된 상태
console.log(num) // 10


// ?? -> nullish 연산자 -> null, undefined 일 때만 판단
// ""이나 0을 값으로 사용하고 싶지만 논리 연산자가 false로 인식하는걸 해결하기 위해서 사용
let num = 0;
let num2;
num = num ?? 10;
num2 = num2 ?? 10;
console.log(num) // 0
console.log(num2) // 10

// && : 단락회로평가를 이용한 간단한 조건식 수행
const message = 'hello';
message && console.log(message); // hello
// 첫번째 항이 참이여야 두번째 항이 실행되는 코드이기 때문에
// 첫번째에 값이 존재하는지 파악하여 코드를 실행시키는 용도로 사용 가능

선택문 (Switch - case)

// switch ~ case : case의 키워드에 매칭이 되면 코드 실행 시작점이며, break를 만날때까지 하위로 내려가며 지속 실행
// break : 코드 실행 흐름을 중단한다.

const rank = 2;

switch(rank) {
    case 1:
        console.log('금메달');
        break;
    case 2:
        console.log('은메달');
        break;
    case 3:
        console.log('동메달');
        break;
    default:
        // default 키워드는 상위의 case들에 키워드 매칭이 되지 않은 경우
        // default 키워드 내부의 코드를 실행 시작점으로 한다.
        // if문의 else 같은 느낌
        console.log('까비');
        break;
}

// 선택문에서 break;를 사용하지 않았을 경우에는 선택문을 탈출하지 못하기 때문에
// 키워드 매칭 시점부터 맨 끝까지 전체 실행을 하게 된다.
// break가 없는 경우에 rank가 2라면 은메달, 동메달, default까지 전체 출력이 진행되기 때문에
// break 키워드를 사용하여 다른 케이스의 코드를 실행하지 않도록 방지해야 함

반복문

for문

  • 횟수가 정해진 반복에서 주로 사용
num = 0;
for (let i = 1; i <= 100; i++){
    num += i;
}

console.log(num); // 5050

반복문 흐름 제어 : break & continue

  • break : 반복을 중단 시키고 반복문 탈출
  • continue : 반복을 건너뛰고 다음 반복 시작

while문

while(조건식){
    // 조건식이 참일때 반복되는 구간
    // 반복을 중단 시키는 코드가 존재해야 함 - break
}

while(true){
    const menu = prompt("choice");

    if (menu === 'q'){
        console.log('중단..');
        break;
    }
}

do-while문

  • 무조건 한 번 실행 후에 조건식 비교
do {
    // 조건식이 참일때 반복되는 구간
} while(조건식);

let i = 101, total = 0;

while(i <= 100){
    total += i;
    i++;
}
console.log(`합계 : ${total}`); // 합계 : 0

let i = 101, total = 0;
do {
    total += i;
    i++;
} while(i <= 100)
console.log(`합계 : ${total}`); // 합계 : 101

/*
    기본 while문은 최상단에서 조건을 체크 후에 코드를 실행하지만,
    do while문은 최하단에서 조건을 체크 하기 때문에 최소 1번은 실행 후에 조건에 따라서 반복을 진행하거나, 중지한다.
*/

예외 처리 (try - catch - finally)

try {
    // 예외가 발생할 가능성이 있는 코드
} catch(err) {
    // 예외가 발생하면 유입되는 구간 - 대안적인 처리, err: 발생한 예외에 대한 정보
} finally{
    // 예외가 발생하거나, 안하거나 무조건 실행되는 코드
} 


try{
    let str;
    const str2 = str.uoUpperCase();
    console.log(str2, "대문자로 변경 완료");
} catch (err){
    console.log(err);
}

// TypeError: Cannot read properties of undefined (reading 'uoUpperCase')
try {
    let str;
    const str2 = str.toUpperCase();
    console.log(str2, "대문자료 변경 완료");
} catch(err){
    //console.dir(err);
    //console.error(err);
    console.log(err.message, err.name);
}
  • throw : 예외 발생 시킴 / throw new 예외 객체(Error의 하위 생성자 객체)
// new 연산자

4-3

자바스크립드 객체

객채, 빈 객체 생성

obj = {
    key : value,
    key : value,
    ...
}

const person = {
	name : 'KIM',
	age : 31,
	study : function() {
		console.log('공부한다!')
	}
};

console.log(person)
// { name: 'KIM', age: 31, study: [Function: study] }

프로퍼티 읽기 & 수정

  • 마침표 연산자 : 속성의 이름이 변수 이름 규칙에 해당하는 속성만 접근 가능
    • 변수명 규칙
      • 알파벳(대소), 숫자, _ , $ 문자로만 구성해야함
      • 숫자는 맨 앞자리 불가능
      • 예약어(if, throw 등) 불가능
    • 변수명 관례
      • 여러 단어로 구성된 변수가 있는 경우 : 카멜 케이스 사용 ( noOfStudent )
      • 여러 단어로 구성된 상수가 있는 경우 : 전체 대문자, 언더바 사용 NO_OF_STUDENT
    • 함수명 관례
      • 변수명 관례와 동일
      • 함수 중 생성자로 사용되는 함수는 앞글자를 대문자로 씀 -> OrderItem
  • 대괄호 연산자 : 변수명 규칙에 해당하지 않는 속성 접근시에 사용
  • 없는 프로퍼티 접근
// 마침표 연산자로 속성 값 불러오기
console.log(person.age, person.name); // 31, KIM

// 마침표 연산자로 함수 호출하기
person.study(); // 공부한다!

// 대괄호 연산자로 속성 값 불러오기
console.log(person['age'], person['name']) // 31, KIM

// 대괄호 연산자로 함수 호출하기
person['study'](); // 공부한다!

// 존재하지 않는 속성 접근 통해서 신규 추가
person.address = '주소';

// 존재하는 속성 접근 통해 정보 수정
person.address = '(수정) 주소';

// 속성 제거
delete person.address;
// 속성이 정상적으로 제거 되면 true를 반환함

0개의 댓글