-
[JavaScript] Intl.NumberFormat 객체
2024.06.28
Intl.NumberFormat 객체들어가며자바스크립트(JavaScript)의 @Intl.NumberFormat@ 객체에 대해 알아보자.@Intl.NumberFormat@ 객체를 사용하면 숫자를 특정 로케일과 옵션에 맞춰 포맷팅(Formatting) 할 수 있다. Intl.NumberFormat 객체개념에크마스크립트(ECMAScript) 국제화 API의 일부로, 숫자의 형식을 지정하는 데 사용된다.로케일(Locale)과 옵션(Option)을 사용하여 숫자의 형식을 세부적으로 지정할 수 있다. 주로 통화, 소수점 자리수, 숫자 그룹화 등의 형식을 지정하는데 사용된다. 사용 방법new Intl.NumberFormat(locales, options) @locales@로케일 지정로케일(Locale)컴퓨터 프로그..
-
[JavaScript] 옵셔널 체이닝 연산자(Optional Chaining Operator), null 병합 연산자(Nullish Coalescing Operator) (ES11(ECMAScript2020))
2024.05.16
옵셔널 체이닝 연산자(Optional Chaining Operator), null 병합 연산자(Nullish Coalescing Operator) (ES11(ECMAScript2020))들어가며ES11(ECMAScript2020)에서 도입된 옵셔널 체이닝 연산자와 null 병합 연산자에 대해 정리해본다.옵셔널 체이닝 연산자와 null 병합 연산자는 모두 단축 평가(Shortcut Evaluation)을 위해 사용되는 연산자이다. 옵셔널 체이닝 연산자(Optional Chaining Operator, @?.@)좌항의 피연산자가 @null@ 또는 @undefined@인 경우 @undefined@를 반환하고, 그렇지 않을 경우 우항의 프로퍼티 참조를 이어간다.프로퍼티 참조 : 변수를 통해 변수값을 참조하듯이,..
-
[JavaScript] 비동기 프로그래밍(Asynchronous Programming)
2024.01.24
자바스크립트 비동기 프로그래밍(Asynchronous Programming) 들어가며 자바스크립트의 비동기 프로그래밍(Asynchronous Programming)에 대해 공부했던 내용을 정리해본다. 비동기 프로그래밍(Asynchronous Programming) 개념 자바스크립트에서 서버와 통신을 하다 보면 어떤 자료를 요청하고 받는지에 따라, 또는 네트워크 속도에 따라 조금씩 처리 시간이 달라진다. 그리고 시간 차이가 나는 처리 결과를 받아서 순서대로 처리해야 하는데, 이러한 처리 방식을 '비동기 처리 방식'이라고 한다. 자바스크립트 프로그램은 많은 함수들이 모여서 하나의 기능을 만든다. 그런데 이들 함수의 실행 시간이 서로 다르므로 특정 작업이 끝나면 다른 작업을 하고, 그 작업이 끝나면 이어서 또..
-
[JavaScript] 변수 재선언과 재할당 (var, let, const)
2024.01.18
1
변수 재선언과 재할당 (var, let, const) 들어가며 자바스크립트의 변수(@var@, @let@, @const@)의 재선언과 재할당에 대하여 알아보자. 재선언과 재할당 ① @var@ 재선언 및 재할당이 모두 가능하다. var sum = add(10, 20); console.log(sum); // 30 var sum = 100; // 재선언 (가능) console.log(sum); // 100 sum = 200; // 재할당 (가능) console.log(sum); // 200 하지만 @var@을 사용할 경우, 다음과 같이 호이스팅(Hoisting)이 발생할 수 있다. var x = 10; var sum = x + y; // y 변수가 선언되기 전에 실행 var y = 20; console.log..
-
[JavaScript] 스프레드 연산자(Spread Operator)
2023.12.14
스프레드 연산자(Spread Operator) 들어가며 자바스크립트(JavaScript) ES6에 추가된 스프레드 연산자(Spread Operator)에 대해 알아보자. 스프레드 연산자(Spread Operator) 개념 스프레드 연산자(@...@)는 자바스크립트에서 배열(Array)이나 객체(Object)를 확장하거나 펼치는데 사용된다. 이 연산자를 사용하면 배열이나 객체의 요소를 추출하거나 복제하여 다른 배열이나 객체에 포함시킬 수 있다. 스프레드 연산자는 코드를 더 간결하게 만들고 배열이나 객체를 조작하거나 복제할 때 유용하게 사용된다. 활용 방법 ① 배열(Array)에서의 스프레드 연산자 활용 배열에서 스프레드 연산자는 다음과 같이 사용될 수 있다. const numbers = [1, 2, 3];..
-
[JavaScript] 디스트럭처링(Destructuring)
2023.12.14
디스트럭처링(Destructuring) 들어가며 자바스크립트 ES6에 추가된 디스트럭처링(Destructuring) 기능에 대해 알아보자. 디스트럭처링(Destructuring) 개념 ECMAScript 2015(ES6)에서 도입된 기능 중 하나 ES6에서 배열(Array)과 객체(Object)의 요소들을 해체(Destructuring)하여 변수에 할당(Assign)하는 방법으로 등장했다. 이전에는 요소들을 하나씩 변수에 할당하는 번거로운 작업을 해야했는데, 디스트럭처링은 이를 보다 간단하고 직관적으로 처리할 수 있게 해준다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있게 되었다. 종류 및 사용 방법 디스트럭처링은 변수 이름과 객체 또는 배열의 속성 이름이나 순서가 일치해야 한다. const an..
-
[JavaScript] Map / Filter / Reduce / Find / FindIndex / IndexOf / Includes
2023.12.13
Map / Filter / Reduce / Find / FindIndex / IndexOf / Includes 들어가며 자바스크립트 ES6의 @Map@, @Filter@, @Reduce@, @Find@, @FindIndex@, @IndexOf@, @Includes@ 함수에 대해 알아보자. 이 함수들은 배열을 다양한 방식으로 조작하고 필터링하며, 배열 요소를 가공하여 필요한 결과를 얻을 때 유용하게 사용된다. 설명 ① Map Map 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 함수가 반환하는 값을 모아 새로운 배열을 생성한다. 기존 배열의 각 요소를 변환하여 새로운 배열을 만들 때 주로 사용된다. 예를 들어, 모든 요소를 2배로 만드는 경우와 같이 각 요소를 수정하고 새로운 배열을 생성하는 ..
-
[JavaScript] 모듈 시스템 (import/export)
2023.11.27
모듈 시스템 (import/export) 들어가며 ES6에서 도입된 모듈 시스템(Module System)에 대해서 알아보자. 모듈 시스템 개념 ES6에서 도입된 모듈 시스템은 자바스크립트 코드를 여러 파일로 나누고 재사용 가능한 모듈로 구성하는 기능을 제공한다. 이 기능은 @import@와 @export@ 키워드를 사용하여 모듈을 가져오고 내보내는 것으로 이루어진다. 내보내기(Export) 모듈에서 특정한 기능, 변수, 함수, 클래스 등을 다른 파일에서 사용할 수 있도록 내보내려면 @export@ 키워드를 사용한다. ① Named Export 내보내려는 대상에 이름을 붙여서 내보내는 방법이다. // 변수, 함수, 클래스 등을 내보내기 export const myVariable = 10; export f..
-
[JavaScript] splice 메서드, slice 메서드, split 메서드 비교
2023.11.16
1
splice 메서드, slice 메서드, split 메서드 비교 들어가며 자바스크립트의 @splice@ 메서드와 @slice@ 메서드, @split@ 메서드를 비교해보고 차이점을 알아보자. @splice@ 메서드 설명 배열의 요소를 제거하거나 삽입할 수 있다. 사용법 array.splice(start, deleteCount[, item1, item2, ...]) @start@ : 변경을 시작할 인덱스 @deleteCount@ : 제거할 요소의 개수 @item1, item2, ...@ : 추가할 요소 [선택 사항] 사용 예 let array = [1, 2, 3, 4, 5]; array.splice(2, 1); // 인덱스 2에서 1개의 요소 제거 -> [1, 2, 4, 5] array.splice(1, 0..
-
[JavaScript] 화살표 함수(Arrow Function)
2023.11.16
화살표 함수(Arrow Function)들어가며자바스크립트(JavaScript)의 화살표 함수(Arrow Function)에 대해 알아보자. 화살표 함수(Arrow Function)개념ES6(ECMAScript 2015)에서 도입된 자바스크립트의 새로운 함수 선언 방식일반 함수 선언보다 간결하고 짧은 문법을 제공하여 코드를 더 읽기 쉽고 간결하게 만들어준다.화살표 함수는 간결하고 콜백 함수를 사용할 때 유용한데, 특히 반복적인 코드 작성을 줄여주는데 도움을 준다.그러나 모든 상황에서 사용해야 하는 것은 아니며, 특히 메서드 함수에서는 일반 함수와의 차이점을 고려하여 사용해야 한다. 기본 문법화살표 함수는 @const functionName = (parameters) => { function body }..
-
[JavaScript] 웹 요소의 내용 가져오기 (innerText, innerHTML, textContent)
2023.07.29
웹 요소의 내용 가져오기 (innerText, innerHTML, textContent) 들어가며 자바스크립트로 웹 요소의 내용을 가져오고 수정하는 방법을 알아보자. 웹 요소의 내용 가져오기 ① @innerText@ 프로퍼티 웹요소.innerText 웹 브라우저에서 보이는 내용만 가져온다. @display: none@을 사용해서 화면에서 감춘 요소의 내용을 가져오지 않는다. 소스 코드에 공백이 여러 개 입력되어 있어도 웹 브라우저 창에 보이는 대로 공백 1칸만 가져온다. ② @innerHTML@ 프로퍼티 웹요소.innerHTML 웹 브라우저 창에 어떻게 보이는지와는 상관 없이, 요소 안에 있는 태그(Tag)와 함께 소스 코드에 있는 그대로 가져온다. ③ @textContent@ 프로퍼티 웹요소.textC..
-
[JavaScript] 자바스크립트(ES6)의 다양한 for 문 : forEach 문, for ... in 문, for ... of 문
2023.07.19
자바스크립트(ES6)의 다양한 for 문 : forEach 문, for ... in 문, for ... of 문 들어가며 자바스크립트 ES6에 있는 다양한 종류의 for 문에 대해 알아보자. 자바스크립트에는 for 문, forEach 문, for ... in 문, for ... of 문이 있다. (ES6 기준) ① for 문 for (초깃값; 조건; 증가식) { ... } 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 편리하다. 몇 번 반복했는지 기록하기 위해 카운터를 사용하고, for 문의 첫 번째 항에서 카운터 변수를 지정한다. 예제 코드 const seasons = ["Spring", "Summer", "Fall", "Winter"]; for (let i = 0; i < season..
-
[JavaScript] ==/!= 연산자와 ===/!== 연산자의 차이점
2023.07.19
==/!= 연산자와 ===/!== 연산자의 차이점 들어가며 자바스크립트에서 사용되는 @==@ / @!=@ 연산자와 @===@ / @!==@ 연산자의 차이점에 대해 알아보자. @==@ / @!=@ 연산자 비교하는 피연산자의 자료형을 자동으로 변환해서 비교한다. 숫자 @3@과 문자열 @"3"@을 비교하면, 문자열로 변환해서 비교하므로 2개의 값이 같다고 인식한다. 3 == "3" // true 3 != "3" // false @===@ / @!==@ 연산자 값 뿐만 아니라 데이터 유형(자료형)까지 비교한다. 자동으로 자료형이 변환되지 않는다. 따라서 자바스크립트를 사용하면서 값을 비교할 때는 @==@, @!=@ 연산자보다 @===@, @!==@ 연산자를 사용하는 것이 좋다. 3 === "3" // false..