본문 바로가기

바닐라 코드

(30)
13. nullish 병합 연산자 (??) nullish 병합 연산자 (??)null과 undefined 값만을 체크해 비어있지 않은 값을 찾는 연산자입니다.||와의 차이점||: falsy(0, '', false 포함)를 건너뜀??: null과 undefined만 건너뜀 (숫자 0이나 false는 값으로 인정)연산자 우선순위??는 우선순위가 낮아 괄호를 사용해 명확하게 표현하는 것이 좋습니다.nullish 병합 연산자의 평가 방식let a = null;let b = undefined;let c = "값 있음";let result = a ?? b ?? c ?? "기본값";console.log(result); // "값 있음"a와 b는 nullish이므로 건너뜀.c는 값이 존재하므로 반환됨.??는 null과 undefined만 체크합니다.??와 ||..
12. 논리연산자 논리 연산자란 무엇인가?자바스크립트의 논리 연산자는 조건을 판별하거나 결합하는 데 사용된다.논리 연산자에는 세 가지가 있다.OR (||): 조건 중 하나라도 참이면 결과는 참AND (&&): 조건이 모두 참일 때 결과가 참NOT (!): 값의 논리 상태를 반대로 바꾼다.1. OR (||) 연산자기본 개념OR 연산자는 **두 개의 수직선 ||**로 표현하며 **주어진 조건 중 하나라도 참이면 참**이 된다.let result = condition1 || condition2;기본 예제피연산자1피연산자2결과truetruetruefalsetruetruetruefalsetruefalsefalsefalseconsole.log(true || true); // trueconsole.log(false || true)..
11. if와 '?' 조건 처리: if문과 ? 연산자의 차이와 활용if문과 ?(삼항 연산자)는 자바스크립트에서 조건에 따라 동작이나 값을 처리할 때 사용하는 도구다.두 방법의 차이와 사용 목적을 이해하면 더 간결하고 명확한 코드를 작성할 수 있다.1. 기본 개념if문: 특정 조건에 따라 코드 블록을 실행한다. "문(statement)"이며, 값을 반환하지 않는다.? 연산자: 조건에 따라 값을 반환하는 "식(expression)"이다. 값을 반환하므로 변수에 직접 할당할 수 있다.2. if문문법:if (조건식) { // 조건이 참일 때 실행되는 코드}예제:let 출판년도 = prompt('ES6는 몇 년도에 발표되었을까요?', '');if (출판년도 == 2021) { alert('정답입니다!');}조건이 참일 경우 중괄호..
10. 비교연산자 기본 비교 연산자function biggerThanZero(value){ if(value !== null && value !== undefined) { console.log(value > 0); }else { console.log("정확한 숫자를 입력해 주세요"); }}문법과 역할보다 큼 / 작음: a > b, a 보다 크거나 같음 / 작거나 같음: a >= b, a 동등 비교: a == b (값만 비교, 타입은 비교하지 않음)예: 1 == '1'은 true를 반환한다.엄격 동등 비교: a === b (값과 타입 모두 비교)예: 1 === '1'은 false를 반환한다.부등 비교: a != b (값만 비교, 같지 않으면 true)엄격 부등 비교: a !== b (값과 타입 모두 비교, 둘 다 다르면..
9. 연산 자바스크립트 연산자와 활용법1. 기본 연산자와 수학 연산자연산자란?*피연산자(Operand)**는 연산자가 연산을 수행하는 대상이다. 예를 들어, 5 * 2에서 5와 2는 피연산자다.*연산자(Operator)**는 피연산자에 대해 특정 작업을 수행한다.예를들어 * 는 곱셈 연산자다단항 연산자와 이항 연산자단항(Unary) 연산자는 피연산자가 하나인 경우다.let x = 5;x = -x; // 단항 마이너스 연산자는 부호를 반대로 바꾼다.console.log(x); // -5이항(Binary) 연산자는 피연산자가 두 개인 경우다.let x = 10, y = 3;console.log(x - y); // 7 (뺄셈 연산)2. 수학 연산자자바스크립트에서 제공하는 주요 수학 연산자덧셈(+)뺄셈(-)곱셈(*)나눗셈..
8. 브라우저 알림창 띄우기 1. 모달 창이란?모달 창은 웹사이트에서 특정 작업을 완료하기 전까지 다른 작업을 막는 창을 말한다.예: "확인" 버튼을 눌러야만 닫히는 경고 창.브라우저가 모달 창의 위치를 자동으로 결정하며, 보통 중앙에 위치한다.모양은 브라우저마다 다르며, 개발자가 수정할 수 없다.2. 주요 모달 창 함수2.1 alert메시지와 확인 버튼만 있는 간단한 모달 창을 띄운다.사용자에게 정보를 전달할 때 사용된다.alert("안녕하세요!"); // 모달 창에 "안녕하세요!" 표시특징:사용자 입력은 필요하지 않다."확인" 버튼을 눌러야 창이 닫힌다.2.2 prompt메시지, 입력 필드, 확인, 취소 버튼이 있는 모달 창을 띄운다.사용자 입력을 받을 때 사용된다.문법:let result = prompt("메시지", "초기값"..
7. 자료형 변환 자바스크립트에서 자료형 변환자바스크립트는 자료형을 유연하게 다룰 수 있지만, 문자 ↔ 숫자 간 변환은 실무에서 자주 필요하다. 여기서는 숫자, 문자, 불리언 간 변환 방법을 설명한다.1. 숫자를 문자로 바꾸기숫자를 문자로 변환할 때는 String() 함수나 문자열 연산을 사용할 수 있다.// 방법 1: String() 함수 사용let age = 30;let ageAsString = String(age); // "30"console.log(typeof ageAsString); // "string"// 방법 2: 빈 문자열과 더하기let score = 100;let scoreAsString = score + ""; // "100"console.log(typeof scoreAsString); // "strin..
6. 자바스크립트의 자료형 자료형이란자료형이란 숫자, 문자 등 데이터의 종류를 뜻한다. 각 데이터가 메모리에서 어떻게 저장되고 처리 될 지를 결정하는 데 중요한 역할을 한다.자료형이 중요한 이유메모리 공간을 효율적으로 사용컴퓨터 메모리는 제한적이므로, 데이터를 효율적으로 저장하기 위해 자료형을 기준으로 사용할 메모리 공간의 크기를 결정한다.컴퓨터는 모든 데이터를 1과 0으로 저장하며, 자료형이 데이터를 어떻게 해석할지를 알려준다.특정 자료형에만 동작하는 기능자바스크립트는 자료형에 따라 사용할 수 있는 기능이 다르다.숫자 자료형에는 수학 연산을, 문자열에는 텍스트 조작을 위한 기능을 사용할 수 있다.배열과 객체는 각각 고유한 메서드가 제공된다.자료형 요약// 기본 자료형 (Primitive Types)let age = 30; ..