Javascript

[Javscript] 배열에서 임의의 요소 가져오기

Math.random 임의의 인덱스를 가져와서, 배열에서 랜덤한 인덱스에 해당하는 요소를 가져올 수 있다. const array = ['A', 'B', 'C', 'D', 'E']; const randomValues = array[Math.floor(Math.random() * array.length)]; Math.random() 은 0~1 사이의 숫자를 반환한다. (0 0.5 - Math.random()) const [randomValue] = randomArray; ES6의 구조분해할당을 사용하여 뒤섞인 배열의 첫번째 요소를 얻는다. 라이브러리 Lodash JavScript에서 array, collection, date 등 데이터를 쉽게 다룰 수 있게 해주는 라이브러리이다. fetch('https://..

[Javascript] !! 연산자

자바스크립트에서 느낌표 두 개(!!)는 다른 타입의 데이터를 boolena 타입으로 명시적으로 형 변환(Type conversion)하기 위해 사용한다. var a = "test"; //a: "test" (조건문 적용시 true) var b = !"test"; //b: false var c = !!"test"; //c: true 자바스크립트에서 아래의 기본 타입 데이터 6가지는 false, 이 외에는 모두 true가 된다. 사실상 조건문에서 비교할 때는 자동으로 boolean 타입으로 변환해주기 때문에 조건문에서 사용시에는 큰 의미를 찾지 못한다. "" 빈 문자열 false 기본 boolean false NaN Not a Number undefined 정의되지 않은 값 null Null 값 0 숫자 기본값

[Javascript] new Date(), toLocaleDateString (현재 날짜, 시간 표시하기)

[Javascript/자바스크립트 ] new Date(), toLocaleDateString (현재 날짜, 시간 표시하기) // 한글식 표기 function printKorDate() { const today = new Date(); const dateString = today.toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric', }); const dayName = today.toLocaleDateString('ko-KR', { weekday: 'long', }); return `${dateString} ${dayName}`; // 2022년 5월 30일 월요일 } // 영어식 표기 function printDate()..

모달 만들기

See the Pen 모달 만들기 by HARU (@greenyhub) on CodePen.

카운터 만들기

See the Pen 카운터 만들기 by HARU (@greenyhub) on CodePen.

Promise.all / Promise.race

[Javascript/자바스크립트] Promise.all / Promise.race function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } const getDog = async () => { await sleep(1000); return '멍멍이'; }; const getRabbit = async () => { await sleep(500); return '토끼'; }; const getTurtle = async () => { await sleep(3000); return '거북이'; }; async function process() { const dog = await getDog(); console.log(dog); ..

async/await

[Javascript/자바스크립트] async await async/await 문법은 ES8에 해당하는 문법으로, Promise 를 더욱 쉽게 사용할 수 있게 해준다. 사용법 async/await 문법을 사용할 때에는 함수를 선언할 때 함수의 앞 부분에 async 키워드를 붙여준다. 그리고 Promsie 앞 부분에 await 을 넣어주면 해당 프로미스가 끝날 때 까지 기다렸다가 다음 작업을 수행할 수 있다. function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function process() { console.log('안녕하세요!'); await sleep(1000); // 1초쉬고 console.log(..

Promise

[자바스크립트/Javascript] Promise Promise 프로미스는 비동기 작업을 조금 더 편하게 처리할 수 있도록 ES6에 도입된 기능이다. 이전에는 비동기 작업을 처리 할 때에는 콜백함수로 처리 했어야 했는데, 비동기 작업이 많아질 경우 코드가 쉽게 난잡해지게 되었다. 예시) 숫자 n을 파라미터로 받아와서 다섯번에 걸쳐 1초마다 1씩 더해서 출력하는 작업을 setTimeout 으로 구현해보자. function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; console.log(increased); if (callback) { callback(increased); } }, 1000); } increaseAn..

비동기처리의 이해

[자바스크립트/Javascript] 비동기처리의 이해 동기적 처리와 비동기처리 만약 작업을 동기적으로 처리한다면 작업이 끝날때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없다. 그리고 작업이 끝나야 비로소 그 다음 예정된 작업을 할 수 있다. 하지만 이를 비동기적으로 처리한다면 흐름이 멈추지 않기 때문에 동시에 여러가지 작업을 처리할 수도 있고, 기다리는 과정에서 다른 함수도 호출할 수 있다. 예를 들어 연산량이 많은 작업을 처리하는 함수를 만들어보자. function work() { const start = Date.now(); for (let i = 0; i < 1000000000; i++) {} const end = Date.now(); console.log(end - start..

Hoisting 이해하기

[자바스크립트/JavaScript] Hoisting 의 이해 Hoisting이란, 자바스크립트에서 아직 선언되지 않은 함수/변수를 '끌어 올려서' 사용할 수 있는 자바스크립트의 작동 방식을 의미한다. myFunction(); function myFunction() { console.log('hello world!'); } 위 코드에서 myFunction 함수를 선언하기 전에, myFunction( ) 를 호출해주었다. 함수가 아직 선언되지 않았음에도 불구하고 코드는 정상적으로 작동하게 된다. 이게 잘 작동하는 이유는, 자바스크립트 엔진이 위 코드를 해석하는 과정에서 다음과 같이 받아들이게 되기 때문이다. function myFunction() { console.log('hello world!'); } m..

[spread] n개의 숫자들이 파라미터로 주어졌을 때 최대값 구하기

함수 max에 n개의 숫자들이 파라미터로 주어졌을 때, 그 중 가장 큰 값을 알아내세요. function max() { return 0; } const result = max(1, 2, 3, 4, 10, 5, 6, 7); console.log(result); 정답 function max(...numbers) { return numbers.reduce( // acc 이 current 보다 크면 결과값을 current 로 하고 // 그렇지 않으면 acc 가 결과값 (acc, current) => (current > acc ? current : acc), numbers[0] ); } const result = max(1, 2, 3, 4, 10, 5, 6, 7); console.log(result); // 테스..

spread 와 rest

ES6부터 도입된 spread와 rest 문법에 대해서 알아보자. 서로 완전히 다른 문법이지만 비슷한 부분이 있다. spread *spread: 펼치다, 퍼뜨리다 이 문법을 사용하면 객체 혹은 배열을 펼칠 수 있다. const slime = { name: '슬라임' }; const cuteSlime = { name: '슬라임', attribute: 'cute' }; const purpleCuteSlime = { name: '슬라임', attribute: 'cute', color: 'purple' }; console.log(slime); console.log(cuteSlime); console.log(purpleCuteSlime); slime - 객체 선언 cuteSlime - 기존에 선언한 slime을 ..