본문 바로가기

Basic Programming/javascript

(17)
#01 javascript - 변수 Javascript 변수 선언방법1. var- ES5 이전부터 사용된 변수 선언 방식이다.- 함수 스코프(Function Scope)를 가진다.- 동일한 변수명을 중복 선언 가능하다.- 재선언, 재할당 모두 가능하다.var a = 10;var a = 20;a 를 이미 선언했음에도 a를 두번 선언 할수 있다.이때 a의 값은 20 - 호이스팅(hoisting)이 발생하며, 선언은 끌어올려지지만 값은 undefined로 초기화된다.다음 코드로 예를 들자면.console.log(a);var a = 10;사람이 보기에는 a 가 아직 선언되지 않은 것처럼 보인다.그러나 JavaScript 엔진은 내부적으로 다음과 같이 처리한다.var a; // 선언이 먼저 처리됨 (초기값: undefined)console.log(..
#10 동기와 비동기 자바스크립트에서 동기(synchronous)와 비동기(asynchronous)는 코드 실행 방식에 대한 개념으로, 프로그램의 흐름과 처리 방식에 큰 영향을 미친다.1. 동기(Synchronous)순차적으로 실행되는 방식.앞의 작업이 끝나야 다음 작업이 실행된다. funciton print() { console.log("2");}console.log("1");print();console.log("3"); 출력순서 : 1 -> 2 -> 3 - 위 코드는 순서대로 실행되며, 각각이 끝난 뒤에 다음 줄로 넘어간다.- 블로킹(blocking): 앞 작업이 오래 걸리면 뒤 작업이 지연됨.- CPU와 메모리를 기다리는 동안 낭비할 수 있음. 2. 비동기(Asynchronous)작업을 요청한 후 바로 다음 작업을 수행..
#09 javascript 날짜관련 함수들 Date 객체를 생성하는 방법// 1. Date 객체를 생성하는 방법let date1 = new Date(); // 생성자let date2 = new Date("1988/04/20");let date3 = new Date("1987-04-20");// console.log(date1);// console.log(date2);// console.log(date3); 시분초 적용let date4 = new Date("1990-10-01 23:59:59");console.log(date4); 옵션 적용 toLocaleString() 및 Intl.DateTimeFormat에서 사용 가능한 옵션들은 날짜와 시간을 포맷팅하는 데 매우 유용하다.let date5 = new Date(2005, 2, 10, 0, 0, ..
#08 배열에 관한 메서드들 배열 조작 메서드JavaScript 배열 조작 메서드에 대한 예제 코드와 함께 정리한 표입니다. 실무에서 자주 사용되는 메서드를 위주로 구성하였습니다.1. 순회 및 반환 관련forEach()각 요소에 대해 콜백 실행 (결과 반환 없음)const arr = [1, 2, 3];arr.forEach((num) => { console.log(num * 2); // 2, 4, 6 출력});map()각 요소에 함수를 적용해 새 배열 생성const arr = [1, 2, 3];const doubled = arr.map((item, idx, arr) => item * 2);console.log(doubled); // [2, 4, 6]filter()조건에 맞는 요소만 필터링하여 새 배열 반환const arr = [1,..
#07 배열 순회 순회(iteration)자바스크립트에서 순회(iteration)는 배열, 객체, Map, Set 등 다양한 데이터 구조를 하나씩 접근하거나 처리할 때 사용하는 방식 배열 순회1. for문const arr = [10, 20, 30];for (let i = 0; i 인덱스를 직접 제어할 수 있어 유연하지만 코드가 길어질 수 있다. 2. for...of 문for (const value of arr) { console.log(value);} 배열 요소를 하나씩 꺼내는 방식으로 가독성이 좋고 간결하다. 3. forEach() 메서드arr.forEach((value, index) => { console.log(index, value);}); 콜백 함수를 통해 요소와 인덱스를 동시에 처리 가능 객체 순회1. f..
#06 원시타입과 객체타입 원시타입(Primitive)과 객체타입(Object)자바스크립트에서 값의 자료형은 크게 두 가지로 나뉜다.바로 원시 타입(Primitive Type)과 객체 타입(Object Type)이다. 원시 타입 : Number, String, Boolean, Null, Undefined객체 타입 : Array, Function, RegexExp 이 두 가지는 저장 방식, 복사 방식, 메모리 구조, 비교 방식에서 중요한 차이가 있다. 항목원시 타입 (Primitive)객체 타입 (Object)예시 타입string, number, boolean, null, undefined, symbol, bigintobject, array, function, date, regexp, map, set 등저장 방식값 자체를 저장참조(..
#05 rest 매게변수 (Rest parameter) Rest 매개변수란?Rest 매개변수(Rest parameter)는 함수의 매개변수 중 가변적인 개수의 인자들을 배열 형태로 받기 위한 문법이다.자바스크립트 ES6부터 도입되었으며, 형식은 ...이름이다. 기본 문법function 함수이름(고정매개변수, ...rest) { // rest는 배열} ...rest는 항상 마지막 매개변수여야 하며, 하나만 사용할 수 있다. 1. 인자의 개수가 정해지지 않은 함수function sum(...numbers) { return numbers.reduce((total, num) => total + num, 0);}console.log(sum(1, 2, 3)); // 6console.log(sum(5, 10, 15, 20)); // 50 numbers는 배..
#04 Spread 연산자 Spread 연산자자바스크립트의 Spread 연산자 (...)는 배열이나 객체의 요소 또는 속성을 개별적으로 펼쳐서 복사하거나 전달할 때 사용하는 문법.ES6(ECMAScript 2015)에서 도입되었으며, 다음과 같은 주요 용도로 사용 기본 문법const arr = [1, 2, 3];const newArr = [...arr]; // [1, 2, 3] ...arr는 arr의 요소들을 펼쳐서 새로운 배열에 복사합니다. 1. 배열 복사const original = [10, 20, 30];const copy = [...original];console.log(copy); // [10, 20, 30]console.log(copy === original); // false (다른 참조) 얕은 복사(s..