티스토리

Home

검색하기

블로그 홈

Home

devts.tistory.com/m

하루 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

[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://.. 공감수 0 댓글수 0 2022. 11. 26.
[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 숫자 기본값 공감수 0 댓글수 0 2022. 10. 28.
[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().. 공감수 0 댓글수 0 2022. 5. 30.
모달 만들기 See the Pen 모달 만들기 by HARU (@greenyhub) on CodePen. 공감수 0 댓글수 0 2022. 5. 6.
카운터 만들기 See the Pen 카운터 만들기 by HARU (@greenyhub) on CodePen. 공감수 0 댓글수 0 2022. 5. 6.
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); .. 공감수 0 댓글수 0 2022. 5. 6.
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(.. 공감수 0 댓글수 0 2022. 5. 6.
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.. 공감수 0 댓글수 0 2022. 5. 6.
비동기처리의 이해 [자바스크립트/Javascript] 비동기처리의 이해 동기적 처리와 비동기처리 만약 작업을 동기적으로 처리한다면 작업이 끝날때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없다. 그리고 작업이 끝나야 비로소 그 다음 예정된 작업을 할 수 있다. 하지만 이를 비동기적으로 처리한다면 흐름이 멈추지 않기 때문에 동시에 여러가지 작업을 처리할 수도 있고, 기다리는 과정에서 다른 함수도 호출할 수 있다. 예를 들어 연산량이 많은 작업을 처리하는 함수를 만들어보자. function work() { const start = Date.now(); for (let i = 0; i < 1000000000; i++) {} const end = Date.now(); console.log(end - start.. 공감수 0 댓글수 0 2022. 4. 22.
Hoisting 이해하기 [자바스크립트/JavaScript] Hoisting 의 이해 Hoisting이란, 자바스크립트에서 아직 선언되지 않은 함수/변수를 '끌어 올려서' 사용할 수 있는 자바스크립트의 작동 방식을 의미한다. myFunction(); function myFunction() { console.log('hello world!'); } 위 코드에서 myFunction 함수를 선언하기 전에, myFunction( ) 를 호출해주었다. 함수가 아직 선언되지 않았음에도 불구하고 코드는 정상적으로 작동하게 된다. 이게 잘 작동하는 이유는, 자바스크립트 엔진이 위 코드를 해석하는 과정에서 다음과 같이 받아들이게 되기 때문이다. function myFunction() { console.log('hello world!'); } m.. 공감수 0 댓글수 0 2022. 4. 22.
[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); // 테스.. 공감수 0 댓글수 0 2022. 3. 8.
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을 .. 공감수 0 댓글수 0 2022. 3. 8.
정수인지 확인하기 Number.isInteger( ) 인자가 정수인지를 확인하는 메소드 전달된 값이 정수이면 true를 아니라면 NaN, Infinity와 같은 값은 모두 false 를 반환한다. Number.isInteger(1); // true Number.isInteger(3.14); // false Number.isInteger('문자'); // false Number.isInteger(true); // false 출처/참고 [자바스크립트] 전달된 값이 정수인지를 확인하는 메소드 공감수 0 댓글수 0 2022. 2. 9.
루트와 제곱 구하기 루트 Math.sqrt 루트값을 구하는 방법은 인자로 값을 넘겨주면 루트값을 반환한다. Math.sqrt(4);// 2 Math.sqrt(100);// 10 Math.sqrt(16);// 4 제곱 Math.pow 제곱의 값을 구하는 경우 Math.pow 를 사용해서 거듭 제곱 등을 쉽게 구할 수 있다. Math.pow(값, 제곱승) Math.pow(2, 2); // 4 Math.pow(10, 2); // 100 Math.pow(4, 2); // 16 출처/참고 [자바스크립트] 루트와 제곱 구하는 방법 공감수 0 댓글수 0 2022. 2. 9.
배열의 최대값 최소값 찾기 Math 함수 Math.max.apply(null, 배열) // 최대값 Math.min.apply(null, 배열) // 최소값 주의! 배열 내에 비교 불가능한 값이 있다면 결과는 NaN으로 나온다. 대부분의 경우는 Math 객체를 이용해도 결과를 얻을 수 있지만 큰 배열 (~10^7 elements) 정도 되면, Math.min 과 Math.max 를 사용할 경우, “RangeError: Maximum call stack size exceeded” 오류가 나게 된다. Math 객체를 이용하지 않고 더 메모리 소모도 적은 reduce 함수를 이용한 방법도 있다. reduce 함수 let array = [1, 10, 5, 11, 2] // 최대값 let max = array.reduce((previous,.. 공감수 0 댓글수 0 2022. 2. 5.
문자열이 숫자인지 체크하기 자바스크립트에서 문자열이 숫자인지 체크하는 방법은 isNaN( ) 함수를 이용한다. isNaN(테스트할값) 파라미터가 숫자가 아닐 경우 true 를 리턴하고, 파라미터가 숫자일 경우 false 를 리턴한다. '123', '123.1', 123, -123, .1 문자열 타입이든 숫자 타입이든 숫자가 입력되면 false 를 리턴한다. 'abc' 문자열이 입력되면 true 를 리턴한다. '123+123' 숫자로 이루어진 문자열 안에 숫자가 아닌 '+' 기호가 있어 true 를 리턴한다. undefined, { } undefined, { } 는 true 를 리턴한다. '', ' ', null, true, false, [ ] 빈 문자열, null, boolean 값, 배열은 false 를 리턴한다. new Dat.. 공감수 0 댓글수 0 2022. 2. 4.
비구조화 할당(구조분해) 비구조화 할당(구조분해) 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언 const object = { a: 1, b: 2 }; const { a, b } = object; console.log(a); // 1 console.log(b); // 2 함수의 파라미터에서 비구조화 할당 const object = { a: 1, b: 2 }; function print({ a, b }) { console.log(a); console.log(b); } print(object); 비구조화 할당 시 기본값 설정 만약에 비구조화 할당 후 값이 주어지지 않는다면 undefined 가 나타날 것이다. 이러한 상황에 기본값을 주고 싶다면 이렇게 해줄 수 있다. const object = { a: 1 }; func.. 공감수 0 댓글수 0 2022. 2. 2.
조건문 활용 특정 값이 여러값 중 하나인지 확인해야 할 때 includes 비교해야 할 값이 많아질 수록 코드는 길어지게 된다. function isAnimal(text) { return ( text === '고양이' || text === '개' || text === '거북이' || text === '너구리' ); } console.log(isAnimal('개')); // true console.log(isAnimal('노트북')); // false 이러한 코드를 간단하게 해결할 수 있는 방법은, 배열에 includes 함수를 사용하는 것이다. function isAnimal(name) { const animals = ['고양이', '개', '거북이', '너구리']; return animals.includes(nam.. 공감수 0 댓글수 0 2022. 2. 2.
함수의 기본 파라미터 함수의 기본 파라미터 기본 파라미터란 함수를 호출하게 될 때 원래 넣어야 할 파라미터를 넣지 않게 되었을 때 기본값으로 사용할 값을 지정하는 것을 의미한다. 지금까지 배운 것들을 활용하여 파라미터가 주어지지 않았을 때 기본값을 사용하도록 다음과 같이 작성할 수 있다. 더보기 예시 원의 넓이를 구하는 함수 function calculateCircleArea(r) { return Math.PI * r * r; } const area = calculateCircleArea(4); console.log(area); // 50.26548245743669 여기서 Math.PI 는 원주율 파이(π) 값을 가리킨다. 만약 이 함수에 r 값을 넣어주지 않으면 어떻게 나타날까? function calculateCircle.. 공감수 0 댓글수 0 2022. 2. 2.
단축 평가 논리 계산법 단축 평가 논리 계산법은 논리 연산자를 이용해서 코드를 좀 더 단축해서 쓰는 것을 의미한다. true && true // true true && false // false true || false // true false || true // true 논리 연산자를 사용할 때 무조건 우리가 true 혹은 false 값을 사용하는 것은 아니다. 문자열이나 숫자, 객체를 사용할 수도 있고, 해당 값이 Truthy 하냐 Falsy 하냐에 따라 결과가 달라진다. 만약 함수에서 animal 값이 제대로 주어졌을 때만 name 을 조회하고, 그렇지 않을 때는 그냥 undefined 를 반환하게 하고 싶으면 어떻게 해야할까? const dog = { name: '멍멍이' }; function getName(animal.. 공감수 0 댓글수 0 2022. 2. 1.
Truthy / Falsy 이것은 자바스크립트 문법까지는 아니지만 알아둬야 하는 개념이다. Truthy : true 같은거 console.log(3); console.log('hello'); console.log(['array?']); console.log([]); console.log({ value: 1 }); Falsy : false 같은거 console.log(undefined); console.log(null); console.log(0); console.log(''); console.log(NaN); *NaN: Not A Number NaN은 보통 문자열을 숫자로 변환하는 자바스크립트 기본함수 parseInt 라는 함수를 사용하게 될 때 볼 수 있다. 예시 print 함수가 파라미터가 비어진채로 실행됐을 때 functio.. 공감수 0 댓글수 0 2022. 2. 1.
삼항 연산자 사용법 조건 ? true일때 : false일때 예를 들어 특정 조건에 따라 text 값이 달라야하는 상황이 있다고 해보자. const array = [1, 2]; let text = ''; if (array.length === 0) { text = '배열이 비어있습니다.'; } else { text = '배열이 비어있지 않습니다.'; } console.log(text); // 배열이 비어있지 않습니다.ㅁ 삼항 연산자를 이용하여 다음과 같이 작성할 수 있다. const array = []; let text = array.length === 0 ? '배열이 비어있습니다' : '배열이 비어있지 않습니다.'; console.log(text); 중첩 (비추천) 가독성이 그렇게 좋지 않으니 이러한 코드는 피하는 것.. 공감수 0 댓글수 0 2022. 2. 1.
프로토타입과 클래스 객체 생성자 객체 생성자는 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현할 수 있게 해준다. 객체 생성자를 사용할 때 보통 함수의 이름은 대문자로 시작하고, 새로운 객체를 만들 때에는 new 키워드를 앞에 붙여주어야 한다. function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; this.say = function() { console.log(this.sound); }; } const dog = new Animal('개', '멍멍이', '멍멍'); const cat = new Animal('고양이', '야옹이', '야옹'); dog.say(); // 멍멍 cat.s.. 공감수 0 댓글수 0 2022. 2. 1.
문자열 자르기 substr, substring, slice, split 자바스크립트에서 문자열을 자르는 함수로는 substr, substring, slice, split 이 있다. // [대괄호 부분] 은 생략이 가능하며, 생략할 경우 시작위치부터 문자열 끝까지 자른다. str.substr(start[, length]) str.substring(indexStart[, indexEnd]) str.slice(beginIndex[, endIndex]) str.split([seperator[, limit]]) substr substr 함수는 시작 위치부터 해당 길이만큼 문자열을 자르는 함수이다. 길이 부분을 생략하면 시작위치부터 문자열 끝까지 자른다. substr(시작위치, 길이) 또는 substr(시작위치) var str = '자바스크립트'; var result1 = str.su.. 공감수 0 댓글수 0 2022. 1. 3.
[배열] 10보다 큰 숫자의 갯수를 반환하는 함수 숫자배열이 주어졌을 때 10보다 큰 숫자의 갯수를 반환하는 함수를 만들어보자. 1. forEach function countBiggerThanTen(numbers) { let count = 0; numbers.forEach(n => { if (n > 10) { count++; } }); return count; } const count = countBiggerThanTen([1, 2, 3, 5, 10, 20, 30, 40, 50, 60]); console.log(count); 2. filter function countBiggerThanTen(numbers) { return numbers.filter(n => n > 10).length; } const count = countBiggerThanTen([1.. 공감수 0 댓글수 0 2022. 1. 3.
배열 내장함수 배열을 다룰 때 알고있으면 유용한 내장함수들을 알아보자. forEach for문을 대체시킬 수 있다. const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지']; superheroes.forEach(hero => { console.log(hero); }); forEach 함수의 파라미터로는, 각 원소에 대항 처리하고 싶은 코드를 함수로 넣어준다. 위 함수의 파라미터 hero 는 각 원소를 가리키게 된다. 이렇게 함수 형태의 파라미터를 전달하는 것을 콜백함수라고 부른다. map map 은 배열 안의 각 원소를 변환할 때 사용되며, 이 과정에서 새로운 배열이 만들어진다. map 함수의 파라미터로는 변화를 주는 함수를 전달해준다. 또는 변화 함수를 선언해주지 않아도.. 공감수 0 댓글수 0 2022. 1. 2.
[반복문] 배열을 받아 총합을 구하는 함수 1. numbers 라는 배열을 파라미터로 받아서 총합을 구하는 함수를 만들어보자. function sumOf(numbers) { let sum = 0; for (let i = 0; i < numbers.length; i++) { sum += numbers[i]; } return sum; } const result = sumOf([1, 2, 3, 4, 5]); console.log(result); 2. 숫자로 이루어진 배열이 주어졌을 때, 해당 숫자 배열 안에 들어있는 숫자 중 3보다 큰 숫자로만 이루어진 배열을 새로 만들어서 반환해보자. function biggerThanThree(numbers) { const array = []; for (let i = 0; i < numbers.length; i++.. 공감수 0 댓글수 0 2021. 12. 31.
배열 배열 이전에 배운 객체는 한 변수 혹은 상수에 여러가지 정보를 담기 위함이었다면, 배열은 여러개의 항목들이 들어있는 리스트와 같다. 배열을 선언할 때에는 [ ] 안에 감싸주면 된다. 배열 안에는 어떤 값이던지 넣을 수 있다. n번째 항목 조회하기 objects[n]; 다음과 같이 객체 배열이 있다고 하자. 리스트의 순서는 0부터 시작하기 때문에 첫 번째 항목은 objects[0] 이다. const objects = [{ name: '멍멍이' }, { name: '야옹이' }]; console.log(objects); // 배열 조회 console.log(objects[0]); // 배열 첫번째 항목 조회 console.log(objects[1]); // 배열 두번째 항목 조회 배열에 새 항목 추가하기 배.. 공감수 0 댓글수 0 2021. 12. 31.
getter setter in ES6 본 글은 공부하기 위한 목적으로 포스팅 되었으며 아래 링크의 원문을 참고하였습니다. https://mygumi.tistory.com/161 Getter와 Setter는 대부분 캡슐화, 정보은닉 관점에서 private 개념이 따라오게 된다. 예시로는 private 변수를 지정한 후, 이 변수에 접근하기 위해 getter, setter를 이용한다. 다음 예제를 통해 확인해보자. 1. name을 저장할 때는 정확한 값일 때 저장한다. 2. name을 가져올 때는 대문자로 된 이름을 얻을 수 있다. 위 특징을 가지는 Person 클래스를 만들어보자. class Person { constructor(name, age) { this._name = name; this.age = age; } get name() { r.. 공감수 0 댓글수 0 2021. 12. 31.
객체 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해준다. 객체를 선언할 때에는 { } 안에 원하는 값들을 넣어주면 된다. 값을 집어 넣을 때에는 키: 원하는 값 형태로 넣으며, 키에 해당하는 부분은 공백이 없어야 한다. 만약에 공백이 있어야 하는 상황이라면 이를 따옴표로 감싸서 문자열로 넣어주면 된다. const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨' }; const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카' }; console.log(ironMan.name); // 토니 스타크 console.log(.. 공감수 0 댓글수 0 2021. 12. 31.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.