개발/JavaScript
[JavaScript] 조건부 삼항 연산자 사용 방법
조건부 삼항 연산자란 무엇이며 또 어떻게 사용할까요? 조건부 삼항 연산자는 자바스크립트에서 세 개의 피연산자를 사용할 수 있는 유일한 연산자로 보통 if 문을 간결하게 표현하기 위해 사용합니다. 조건부 삼항 연산자 예시 조건부 삼항 연산자는 어떻게 사용할까? 다음은 삼항 연산자를 사용한 함수의 예시입니다. 아래에서는 isWin이 true일 경우 10이 출력되고, false일 경우 0이 출력됩니다. function getScore(isWin) { return (isWin ? 10 : 0); } console.log(getScore(true)); // 10 console.log(getScore(false)); // 0 조건부 삼항 연산자 사용 방법 조건부 삼항 연산자는 condition ? exprIfTru..
[JavaScript] 비구조적 할당 사용 방법과 이유
비구조 할당(destructuring assignment)이란 배열 또는 객체의 속성을 변수에 연결하는 방식입니다. 비구조적 할당 문법은 어떻게 사용하며, 왜 사용하는 것일까요? 비구조적 할당 사용 방법 자바스크립트에서는 배열이나 객체를 사용하여 일련의 데이터를 간편하게 저장할 수 있죠. 비구조적 할당은 이와 유사한 문법을 사용합니다. 차이점은 왼쪽에 값이 오고 오른쪽에 기존의 배열 또는 객체 변수 이름이 온다는 것입니다. 아래의 예시 코드를 참고해보세요. const numbers = [1, 2, 3, 4, 5]; const [firstNumber, secondNumber, ...restNumbers] = numbers; console.log(firstNumber); // 1 console.log(sec..
자바스크립트 배열 forEach, filter, map 설명
자바스크립트 배열에서는 내장 메소드를 사용하여 복잡한 반복 작업을 편리하게 처리할 수 있습니다. 이번 포스팅에서는 대표적인 메소드인 forEach, filter, map의 특징과 사용 방법에 대해 알아보도록 하겠습니다. forEach: 배열 요소를 하나씩 돌며 작업을 수행하며 리턴 값은 없음 filter: 조건에 맞는 요소만 필터링하여 새로운 배열로 리턴 map: 배열 요소를 하나씩 돌며 작업을 수행하고 새로운 배열로 리턴 forEach forEach는 각 배열 요소를 하나씩 돌며 작업을 수행할 때 사용합니다. 별도의 리턴 값은 없습니다. 다음과 같이 각 배열 요소를 console.log()로 찍어볼 수 있습니다. const fruits = ["banana", "apple", "orange"]; func..
자바스크립트 배열 요소 랜덤 선택하기
자바스크립트 배열에 담긴 요소를 랜덤으로 선택하려면 어떻게 해야 할까요? 다양한 방법이 있지만 가장 많이 사용되는 방법은 다음과 같습니다. 배열 요소 랜덤 선택하기 아래와 같이 날씨의 정보를 담은 배열이 있다고 해보겠습니다. const weather = ["Sunny", "Cloudy", "Rainy", "Windy"]; 각 요소를 랜덤으로 선택하려면 아래와 같이 Math() 메소드를 사용할 수 있습니다. Math.floor(Math.random() * weather.length); Math.random()은 0에서 1 사이의 소수를 랜덤하게 생성해주는 메소드죠. 여기에 배열의 길이를 곱해준 다음 Math.floor()를 통해 정수로 만들어줍니다. 이렇게 하면 랜덤한 배열 인덱스를 받을 수 있습니다. 최..
자바스크립트 디데이 계산하기
자바스크립트를 사용하여 현재 날짜를 받고, 이를 통해 디데이를 계산하는 방법에 대해 알아보도록 하겠습니다. 현재 날짜와 디데이 날짜 설정 디데이를 계산하려면 현재 날짜와 디데이 날짜를 알아야겠죠? 자바스크립트에서는 new Date()를 통해 현재 날짜와 시각을 받을 수 있습니다. 디데이 날짜는 올해의 크리스마스로 지정해보도록 하겠습니다. function christmasClock() { const today = new Date(); const year = today.getFullYear(); const christmas = new Date(`${year}-12-25`); 디데이 계산하기 이제 오늘 날짜와 디데이 날짜의 차이를 계산하고 이를 디데이 형식으로 표현할 수 있습니다. const untilChri..
자바스크립트 클래스 설명
클래스는 객체를 생성하는 템플릿입니다. 클래스를 설명하면서 붕어빵 이야기를 많이 하죠. 붕어빵을 만들려면 붕어빵을 찍어내는 틀이 있어야 합니다. 이 틀을 바로 클래스라고 하며, 클래스를 통해 찍어낸 실제 붕어빵을 객체의 인스턴스라고 합니다. 클래스 정의하기 자바스크립트에서는 두 가지 방식 1) 클래스 선언식과 2) 클래스 표현식으로 클래스를 정의할 수 있습니다. 클래스 선언식 (Class declarations) 클래스 선언식은 클래스를 정의하는 방법 중 하나이며, class 키워드와 함께 클래스 이름을 지정합니다. 이때 이름의 첫 문자는 대문자로 적어주는 것이 컨벤션입니다. class Rectangle { constructor(height, width) { this.height = height; thi..
자바스크립트 Set 설명
자바스크립트의 Set() 은 고유한 값만을 가진 새로운 객체를 생성하는 데 사용합니다. 모든 유형의 값들을 저장할 수 있기 때문에, NaN과 undefined 또한 저장할 수 있습니다. 예시를 통해, 사용 방법을 살펴보도록 하겠습니다. 이번 예시에서는 set 메소드를 사옹하여 배열 내 중복 요소들을 제거해 보도록 하겠습니다. const numbers = [1, 1, 1, 2, 3, 4, 4, 5, 6, 6, 7, 8, 9, 10, 10] [...new Set(numbers)]; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 추가적으로 Set()을 통해 배열 내 중복 요소들을 제거한 다음, 요소를 포함하고 있는지 확인해볼 수 있습니다. 다음과 같이 Set.prototype.has(value..
자바스크립트 Promise, async, await 정리
1. Promise Promise 생성자 함수는 비동기 요청을 처리하는 방법 중 하나인데요. 실행은 되었지만 결과를 아직 반환하지 않은 객체를 의미합니다. 비동기 처리를 수행할 콜백 함수를 인수로 받습니다. 콜백 함수는 resolve와 reject 함수를 인수로 받습니다. 성공 또는 실패 하나의 결과만 반환됩니다. const promise = new Promise((reslove, rejcet) => { if (/*비동기 처리 성공*/{ resolve('value'); } else { /*비동기 처리 실패*/ reject(new Error("...")); } }); 2. async/await async와 await는 프로미스를 보다 쉽게 구현하는 방법입니다. 프로미스의 then, catch, finall..
