Dani's Dev TokTok

들어가며로컬 스토리지와 세션 스토리지는 HTML5 부터 추가된 웹 스토리지의 종류로 서버가 아니라 클라이언트에서 데이터를 저장할 수 있다.이번 포스팅에서는 로컬 스토리지와 세션 스토리지에 대해서 다루도록 하겠다. 웹 스토리지(Web Storage)웹 스토리지(Web Storage) 는 브라우저가 제공하는 클라이언트 측 저장소다.데이터는 키-값(key-value) 쌍으로 저장하며, 문자열 형태로 저장된다.데이터 저장 시 : JSON.stringify(배열/객체)데이터 사용 시 : JSON.parse(문자열배열/객체)서버와의 통신 없이 데이터를 읽고 쓸 수 있어 빠르고 간단하게 사용할 수 있다. 웹 스토리지는 쿠키와 유사하지만 용량이 훨씬 크다.(쿠키 : 4KB / 웹 스토리지 : 약 5MB)서버와 독립적으..

Set 객체는 중복되지 않는 유일한 값들의 집합이다. (수학적 집합을 구현하기 위한 자료구조! -> 교집합, 합집합, 차집합, 여집합 구현 가능) Set 객체 생성const set = new Set() // Set(0) {} -> 인수를 전달하지 않으면 빈 Set 객체 생성 이터러블을 인수로 전달받아 Set 객체를 생성한다.중복된 값이 있다면 중복된 값은 저장되지 않는다.이를 이용해서 배열에서 중복값을 제거할 수 있다. // 중복값 제거 함수 const uniq = array => [...new Set(array)]// array라는 배열을 매개변수로 받고, set 객체 내에 배열을 넣어서 스프레드 연산자를 통해서// 중복값이 제거된 배열을 반환한다.uniq([2,2,2,1,1,3,4,4,5]) // [..

자바스크립트에서 this 는 기본적으로 자기 자신을 참조하는 객체다.그러나 어디에서 호출되느냐에 따라 다른 객체를 참조한다. 1. 객체 메서드에서 객체 자신을 의미 const obj = { name : '고양이', getName(){ console.log('객체 메서드의 this >>>', this); console.log('객체 메서드의 속성 읽기 >>>', this.name); } } obj.getName()  ※ 단, 화살표 함수는 전역 객체(window)를 의미힌다. const obj = { name : '고양이', fn1 : function () { co..

1) Array.sort배열의 요소를 정렬한다. 원본 배열을 직접 변경하여 정렬된 배열을 반환한다.기본적으로 오름차순으로 요소를 정렬한다.내림차순으로 정렬하려면 reverse 메서드를 사용한다.const fruits = ['Banana', 'Orange', 'Apple']fruits.sort() // [ 'Apple', 'Banana', 'Orange' ]// 한글 문자열도 오름차순 정렬const fruits2 = ['바나나', '오렌지', '사과']fruits2.sort() // [ '바나나', '사과', '오렌지' ]// 내림차순 정렬fruits.reverse() // [ 'Orange', 'Banana', 'Apple' ] sort메서드는 배열 요소가 숫자형이라 하더라도 일시적으로 문자열로 변환한 ..

1) Array.indexOf원본 배열에서 인수로 전달된 요소를 검색하여 인덱스 반환원본 배열에 인수로 전달한 요소와 중복되는 요소가 있으면 첫 번째로 검색된 요소의 인덱스 반환원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1 반환const arr = [1,2,2,3]arr.indexOf(2) // 1 반환arr.indexOf(4) // -1 반환arr.indexOf(2, 2)// 두번째 인수는 검색을 시작할 인덱스, 그러므로 2 반환 2) Array.push인수로 전달받은 값을 원본 배열의 마지막 요소로 추가const arr = [1,2,3,4,5]arr.push(6) // [1,2,3,4,5,6]※ push 메서드는 원본 배열을 직접 변경한다. 원본배열을 변경하고 싶지 않다면 spread 문법을..

1. 들어가며JavaScript에서 Date 객체는 날짜와 시간에 관한 정보를 얻기 위한 객체다. 이 객체를 이용해서 시계와 달력을 만들어보고자 한다.  2. Date 객체Date 객체Date 객체는 날짜와 시간을 위한 메서드를 제공하는 객체이며 생성자 함수다.일반적으로 new 키워드로 객체를 생성해서 사용한다.new Date() // 객체 생성방법let today = new Date() // 변수에 할당해서 사용할 수 있음 Date 생성자 함수에 연, 월, 일 시, 분 등을 의미하는 숫자를 인수로 전달하면 날짜와 시간을 나타내는 Date 객체를 반환한다. 이 때 연과 월은 반드시 지정해야 한다.let date = new Date(2024, 5, 4) 이 때, 월은 숫자 0부터 1월로 반환하기 때문에 5..

1. 들어가며JavaScript에서 반복문으로 사용되는 for문, for of문, forEach 메서드를 배웠다. 이들의 차이점은 무엇이고 어떤 반복문을 쓰면 좋을지 생각해보았다. 2. 반복문반복문프로그래밍 언어에서 반복문은 특정 코드를 반복할 때 사용한다.예를 들어 1~100까지 수를 적어야 한다고 할때console.log(1)console.log(2)console.log(3)console.log(100)위와 같이 일일히 적을 수도 있겠지만 그러면 작업시간이 너무 느려지고 무엇보다 비효율적이다.반복문을 사용하면 이 작업을 훨씬 단축시킬 수 있다.for(let i = 1; i  for문을  흐름을 표현하자면 아래 그림과 같다.  배열에서의 반복배열 요소를 순회하며 코드를 반복하기 위한 반복문도 있다 하나..

1. 서론JavaScript의 변수와 함수의 호이스팅에 대해서 알아보기2. 본론호이스팅이란?호이스팅이란 변수 및 함수 선언이 코드의 최상단으로 올려지는 것처럼 동작하는 현상을 말한다. 변수 호이스팅변수는 프로그램을 실행하는 동안 다양한 형태의 데이터를 저장할 수 있는 메모리 공간이다.자바스크립트에서 사용되는 변수는 var, let, const 가 있다.(변수에 대해 정리한 포스팅 : https://daddda3232.tistory.com/5) var, let, const 의 차이점을 표로 간단히 정리해보았다. 변수 키워드재선언재할당스코프생성과정호이스팅var가능가능함수 스코프1. 선언 및 초기화2. 할당Olet불가능가능블록 스코프1. 선언2. 초기화3. 할당Oconst불가능불가능블록 스코프1. 선언+초기화..

switch case문 단일조건을 분류하여 실행문을 만들어 줄때 사용하는 제어문 switch(조건 또는 변수) { case 경우1: 실행코드; break; case 경우2: 실행코드; break; case 경우3: 실행코드; break; default: 실행문; } 1. 변수값에 해당하는 경우 그 값에 해당하는 case에 들어가서 실행코드를 실행 2. 각 case 끝에 break 예약어를 반드시 써야함 -> 쓰지 않으면 다른 case에 들어가는 경우가 생김 -> 일반적으로 break 키워드는 제어문을 빠져나갈 때 씀(if문에서도 사용 가능) 3. default는 if문의 else문과 비슷하여 해당 case가 없으면 이 부분이 실행됨(단, 필요시 사용) default문에는 break 를 쓰지 않는다.

if 문 조건문이란? 결과가 true/false로 나오는 구문 if 문은 괄호안의 조건을 체크해서 결과값이 true 면 중괄호 내의 코드를 실행 false면 아무것도 하지 않음 if(조건) { 코드 } else if 와 else if 내의 조건 말고도 다른 조건을 추가하고 싶을 때 사용하거나 -> else if 결과값이 false일 때 코드를 실행할 때 사용 -> else if(조건) { 코드 } else if(조건2) { 코드 } else { 코드 } if 내의 조건이 참이면 if문 코드 실행, 충족하지 못하면 else if 내의 조건 확인 후 결과가 참이면 코드 실행, 결과가 다 충족하지 못하면 else내의 코드 실행 1. if문은 단독으로 사용가능하다 2. else if 문은 if 문 뒤에 또는 e..