[Javascript] 삼항 연산자에서 null 처리하기

삼항 연산자(? :)를 활용한 null 처리삼항 연산자는 조건을 평가하여 두 개의 값 중 하나를 선택하는 간단한 방법입니다. 기본 문법조건식 ? 참일 때 반환값 : 거짓일 때 반환값; 삼항 연산자로 null 값 처리하기See the Pen Untitled by saladent (@saladent) on CodePen.위 코드에서는 value가 null인지 확인한 후, null이면 "기본값"을 할당합니다.  논리 OR 연산자 (||) vs. 삼항 연산자삼항 연산자는 null과 같은 특정 값에 대해 명확한 조건을 설정할 수 있습니다. 반면, || 연산자는 Falsy(거짓 같은 값, 즉 null, undefined, false, 0, NaN, "" 등)인 경우에도 기본값을 설정할 수 있습니다. || 연산자로..

• format_list_bulleted javascript
• · 2025. 3. 12.
• textsms

[JavaScript] 삼항 연산자로 값 여러개 비교하기

1. 삼항 연산자로 세 개의 값 비교하기기본적으로 삼항 연산자는 두 개의 값 중 하나를 선택하는 용도로 사용됩니다. 하지만 중첩 삼항 연산자를 활용하면 세 개 이상의 값을 비교할 수도 있습니다.예제 : 세 개의 숫자 중 가장 큰 값 찾기See the Pen 세 개의 숫자 중 가장 큰 값 찾기 by saladent (@saladent) on CodePen.위 코드를 분석하면 다음과 같은 흐름으로 실행됩니다:a > b를 먼저 비교true라면 a > c 비교 후 결과 반환false라면 b > c 비교 후 결과 반환이렇게 하면 max 변수에 세 개의 숫자 중 가장 큰 값이 할당됩니다.  2. 삼항 연산자로 세 개의 값 정렬하기삼항 연산자는 비교 연산과 결합하여 값을 정렬하는 데도 사용할 수 있습니다. 예제 :..

• format_list_bulleted javascript
• · 2025. 3. 4.
• textsms

[Javascript] 조건(삼항)연산자 예제, && 연산자로 축약하기

1. 삼항 연산자란?삼항 연산자는 ? 와 : 기호를 사용하는 조건부 연산자로, 기본적인 구조는 다음과 같습니다.조건 ? 참일 때 실행할 코드 : 거짓일 때 실행할 코드;이 구조를 사용하면 if-else 문을 한 줄로 줄일 수 있어 코드의 가독성을 높이는 데 도움이 됩니다.  2. 기본적인 삼항 연산자 사용See the Pen Untitled by saladent (@saladent) on CodePen.위 코드는 if-else 문으로 작성하면 이렇게 됩니다.See the Pen if else 예제 by saladent (@saladent) on CodePen.삼항 연산자를 사용하면 코드가 훨씬 간결해진 것을 확인할 수 있습니다.  2. 삼항 연산자 활용 예제2.1 값 할당에 사용하기See the Pe..

• format_list_bulleted javascript
• · 2025. 3. 4.
• textsms

[Javascript] URL 인코딩, 디코딩 방법

URL 인코딩은 웹 개발에서 매우 중요한 작업 중 하나입니다. 브라우저는 URL에서 일부 문자를 특정 형식으로 변환하여 서버가 정확하게 이해할 수 있도록 처리합니다. 자바스크립트에서는 URL을 인코딩하거나 디코딩하는 데 사용할 수 있는 다양한 내장 함수들이 있습니다. 이 글에서는 자바스크립트를 사용하여 URL을 인코딩하는 방법과 각각의 함수가 어떤 상황에서 유용한지 알아보겠습니다.  1. encodeURI 함수encodeURI는 전체 URL을 인코딩하는 데 사용됩니다. 이 함수는 URL의 구성 요소(예: :, /, ?, &)를 유지하면서 나머지 문자를 인코딩합니다.See the Pen encodeURI 함수 by saladent (@saladent) on CodePen.특징URL 전체를 인코딩할 때 적..

• format_list_bulleted javascript
• · 2025. 1. 24.
• textsms

[JavaScript] 사용자 브라우저 체크하기

사용자 브라우저를 체크하는 기능은 웹 개발에서 중요한 부분 중 하나입니다. 브라우저에 따라 기능 지원 여부가 다를 수 있기 때문에, 사용자 경험을 개선하려면 이를 파악하는 것이 필요합니다. 이번 글에서는 JavaScript를 사용해 사용자 브라우저 정보를 확인하는 방법을 알아보겠습니다.  1. Navigator 객체 활용하기JavaScript에서 브라우저 정보를 가져오는 가장 기본적인 방법은 navigator 객체를 사용하는 것입니다. navigator.userAgent 속성을 활용하면 브라우저 정보 문자열을 확인할 수 있습니다.See the Pen Navigator 객체 활용하기 by saladent (@saladent) on CodePen.위 코드로 출력된 문자열은 사용자의 브라우저와 관련된 다양한..

• format_list_bulleted javascript
• · 2025. 1. 23.
• textsms

[Javascript] input 박스에 숫자만 입력되도록 설정하는 방법

웹 폼을 만들 때, 특정 입력 필드에 숫자만 입력되도록 제한하는 것은 흔히 필요합니다. 예를 들어, 전화번호, 나이, 금액 등을 입력받을 때 유용합니다.이번 포스팅에서는 JavaScript를 사용해 input 박스에 숫자만 입력되도록 설정하는 다양한 방법을 알아보겠습니다.  HTML의 input 요소와 type 속성 사용가장 간단한 방법은 HTML의 input 요소에 type="number" 속성을 사용하는 것입니다. 이는 기본적으로 숫자만 입력할 수 있도록 제한해 줍니다.See the Pen input 숫자만 입력 by saladent (@saladent) on CodePen.이 방법은 사용자가 숫자가 아닌 값을 입력하려 할 때 브라우저에서 기본적인 유효성 검사를 제공합니다. 하지만, 이 방법은 숫자..

• format_list_bulleted javascript
• · 2024. 7. 21.
• textsms

[Javascript] 조건을 만족하는 첫 번째 요소 인덱스 찾기 - Array.findIndex()

Array.findIndex() 메서드는 특정 조건을 만족하는 첫 번째 요소의 인덱스를 반환하는 유용한 메서드입니다. 이 글에서는 Array.findIndex() 메서드의 사용법, 활용 예제, 그리고 이 메서드를 사용할 때 주의할 점에 대해 자세히 살펴보겠습니다.  Array.findIndex() 메서드란?Array.findIndex() 메서드는 배열에서 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만약 배열 내에 판별 함수를 만족하는 요소가 없다면 -1을 반환합니다. 이 메서드는 배열의 요소를 순차적으로 검사하며, 조건을 만족하는 첫 번째 요소를 찾으면 즉시 탐색을 중단합니다.  기본 구문Array.findIndex() 메서드의 기본 구문은 다음과 같습니다.array.findInd..

• format_list_bulleted javascript
• · 2024. 7. 21.
• textsms

[Javascript] 디데이(D-Day) 계산하는 방법

특별한 날을 기다리거나, 프로젝트 마감일을 계산할 때 디데이(D-Day)를 사용하는 경우가 많습니다.JavaScript를 사용하면 간단하게 디데이를 계산할 수 있습니다. 이번 포스팅에서는 JavaScript를 사용해 디데이를 계산하는 방법을 단계별로 알아보겠습니다.  1. 디데이 계산 기본 원리디데이를 계산하려면 다음과 같은 단계를 거칩니다:오늘 날짜를 구합니다.목표 날짜를 구합니다.두 날짜의 차이를 계산합니다.  2. JavaScript로 디데이 계산하기오늘 날짜 구하기JavaScript에서 오늘 날짜를 구하려면 Date 객체를 사용합니다.const today = new Date(); 목표 날짜 설정하기목표 날짜는 Date 객체를 사용해 설정할 수 있습니다. 예를 들어, 2024년 12월 25일을 목표..

• format_list_bulleted javascript
• · 2024. 7. 18.
• textsms

[Javascript] 배열을 뒤집는 간단한 방법 - reverse()

JavaScript에서는 배열을 다루는 다양한 메서드들이 제공되며, 그 중에서도 배열의 요소 순서를 반대로 뒤집는 reverse() 함수는 매우 유용합니다.이번 글에서는 reverse() 함수의 기본 사용법부터 주의사항, 고급 활용법까지 다양한 예제와 함께 자세히 알아보겠습니다.  reverse() 함수란?reverse() 함수는 배열의 요소 순서를 반대로 뒤집어 주는 메서드입니다.이때 원래의 배열이 변경되므로, 주의가 필요합니다.  기본 문법array.reverse();array: 순서를 반대로 뒤집고자 하는 배열  기본 사용법See the Pen js reverse() -1 by saladent (@saladent) on CodePen.이 예제에서 배열 numbers의 요소 순서가 반대로 뒤집혔습니..

• format_list_bulleted javascript
• · 2024. 7. 18.
• textsms

[Javascript] 배열과 문자열에서 값 확인하기 - includes()

JavaScript에서는 특정 값이 배열이나 문자열에 포함되어 있는지 확인해야 하는 경우가 자주 발생합니다.이때 매우 유용하게 사용되는 함수가 includes() 함수입니다. 이 글에서는 includes() 함수의 기본 사용법부터 고급 활용법까지 다양한 예제와 함께 자세히 알아보겠습니다.  includes() 함수란?includes() 함수는 배열이나 문자열에 특정 값이 포함되어 있는지 확인하는 메서드입니다.이 함수는 불리언 값을 반환하며, 값이 포함되어 있으면 true, 그렇지 않으면 false를 반환합니다.  기본 문법배열에서 사용array.includes(valueToFind, startIndex)array: 값을 찾을 배열valueToFind: 배열에서 찾고자 하는 값startIndex: (선택 ..

• format_list_bulleted javascript
• · 2024. 7. 17.
• textsms