본문 바로가기

자바스크립트

(18)
23. 자바스크립트 닌자코드 닌자 코드 🥷✨: 절대 하지 말아야 할 코딩 습관"닌자 코드"란 마치 닌자가 연막탄을 터뜨리고 사라지듯, 다른 사람이 절대 알아볼 수 없게 코드를 작성하는 것을 비꼬는 말입니다. 닌자 코드는 동료 개발자들에게 혼란을 주고, 유지보수와 디버깅을 악몽으로 만듭니다. 여기서는 피해야 할 닌자 코딩 스타일을 살펴보고, 올바른 코딩 방식도 함께 배워보겠습니다.1️⃣ 코드 짧게 쓰기 ✂️닌자 코드 스타일:삼항 연산자 ? :를 과도하게 사용해 짧게 쓴 코드:i = i ? i 문제점:읽기 어렵고, 디버깅하기 힘들다.조건문이 중첩될수록 가독성은 바닥으로 떨어진다.올바른 코드:가독성을 위해 명확한 조건문 사용:if (i) { if (i 설명:삼항 연산자는 짧고 간단한 조건에만 사용하세요.조건문이 복잡해질수록..
16. 함수 함수(Function): 코드의 재사용성과 가독성을 높이는 비밀 무기함수는 반복적으로 사용되는 코드를 효율적으로 관리하는 도구로, 개발자들이 생산성을 높이고 유지보수를 간편하게 만들 수 있도록 돕습니다. 한 번 정의하면 여러 곳에서 호출해 재사용할 수 있으며, 잘 작성된 함수는 코드의 가독성을 크게 향상시킵니다.함수 선언 방식함수는 function 키워드를 사용해 선언합니다. 이름, 매개변수, 그리고 실행될 코드를 작성하면 됩니다.문법function 함수명(매개변수1, 매개변수2) { // 여기에서 매개변수를 사용해 작업을 수행합니다. console.log("이 함수는 매우 쓸모있습니다!");}예시: 안부를 전하는 함수function sayHello() { console.log("안녕하세요, 코딩 ..
15. switch문 if 조건문과 switch문의 비교 및 활용if 조건문은 다양한 조건을 처리하는 데 유용하지만, 조건이 많아질수록 가독성이 떨어지고 유지보수가 어려워질 수 있습니다. 이를 해결하기 위해 switch문을 활용할 수 있습니다. switch문은 특정 변수의 값을 여러 경우에 비교하고, 각 경우에 따라 코드를 실행할 수 있는 구조를 제공합니다.문법switch문은 case문과 선택적으로 사용할 수 있는 default문으로 구성됩니다. 각 case문은 특정 조건을 만족할 때 실행될 코드를 포함하며, break문을 사용해 실행을 종료할 수 있습니다.switch (변수) { case 값1: // 변수 === 값1 // 실행할 코드 break; case 값2: // 변수 === 값2 // 실행할 코드 break;..
14. while, for 반복문 1. 반복문이란?반복문은 동일한 작업을 여러 번 실행하거나 조건에 따라 작업을 반복하는 데 사용됩니다. 이는 코드의 중복을 줄이고 가독성을 높이는 데 매우 유용합니다.예시로, 상품 목록을 출력하거나 특정 횟수만큼 데이터를 처리할 때 반복문을 사용할 수 있습니다.2. 반복문의 종류2.1. while 반복문특징: 조건을 먼저 확인하고, 조건이 truthy인 동안 본문을 실행합니다.문법:while (condition) { // 반복문 본문 }예시 1: 기본적인 while 반복문let i = 0;while (i 설명:i 조건이 false가 되면 반복문이 종료됩니다.예시 2: 조건 축약let i = 3;while (i) { console.log(i); // 3, 2, 1 출력 i--;}설명:숫자 0은 ..
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 (값과 타입 모두 비교, 둘 다 다르면..