webmini life skin Ver 1.3.2 update view 사이트 제작 문의 오랜 경험을 바탕으로 웹퍼블리싱을 해드립니다 제작 문의하기 블로그 리뷰 문의 검색엔진최적화로 제품 리뷰를 해드립니다 리뷰 문의하기 Front-end/Javascript36 728x90 [Javascript]반복문의 종류와 사용 용도 JavaScript에서 for...of, for...in, forEach, map, filter, reduce는 모두 반복문이지만, 각기 다른 용도와 특성을 가지고 있습니다. 특정 상황에 맞는 반복문을 선택하는 것이 중요합니다. 아래에 각 반복문의 사용 용도와 차이점을 설명하겠습니다.1. for...of용도: 배열, 문자열, Map, Set 등의 iterable 객체의 값을 순회할 때 사용.언제 사용해야 할까?배열이나 iterable 객체의 요소 값을 순회할 때 가장 유연하게 사용 가능.요소의 순서대로 값을 읽어오는 작업에 적합.중간에 break 또는 continue로 반복을 중단하거나 건너뛰고 싶을 때 사용.const arr = [1, 2, 3];for (const value of arr) { con.. [Javascript]비동기 처리 Promise, async/await 살펴보기 javascript에서 비동기 처리를 다루는 방법으로는 Promise와 async/await이 있습니다. 이 두 가지 방법은 비동기 작업(예: API 호출, 파일 읽기 등)을 처리하는 데 매우 유용합니다.1. Promise 예제Promise는 비동기 작업이 성공했는지 실패했는지에 따라 결과를 처리할 수 있는 객체입니다.// 비동기 작업을 시뮬레이션하는 Promise 생성const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { const success = true; // 작업이 성공했다고 가정 if (success) { re.. [Javascript]고차함수, 익명함수, 콜백함수 설명 및 예제 1. 고차 함수 (Higher-Order Function)고차 함수는 하나 이상의 함수를 인수로 받거나, 함수를 반환하는 함수입니다.// 고차 함수: 함수를 인수로 받음function higherOrderFunction(callback) { console.log("고차 함수가 호출되었습니다."); callback(); // 전달받은 함수를 호출}// 인수로 전달될 함수 (익명 함수 형태로 작성)higherOrderFunction(function() { console.log("이 함수는 콜백 함수로 전달되었습니다.");}); 고차 함수는 함수를 인수로 받아 호출합니다.2. 익명 함수 (Anonymous Function)익명 함수는 이름이 없는 함수로, 변수에 할당하거나 다른 함수에 전달될.. [Javascript]현재 페이지의 url값을 가져올 때 한글이 들어가있는 경우 현재 페이지의 url값이 한글일경우 한글을 가져오지 못하고 " %EC%BB%A4%EC%8A%" 이런식으로 깨지게 될경우 decodeURL()로 처리하면 됩니다.// 현재 페이지의 URL을 가져오기let url = window.location.href;// URL 디코딩url = decodeURI(url);// 결과 출력 (선택 사항)console.log(url); 코드 설명let url = window.location.href;window.location.href: 브라우저의 현재 페이지 URL을 나타냅니다. window.location 객체는 현재 문서의 위치(URL)에 대한 정보를 제공하며, href 속성은 전체 URL을 문자열로 반환합니다.이 줄은 현재 페이지의 URL을 url 변수에 저장합니다.예.. [Javascript]코딩테스트 프로그래머스 "양꼬치" 풀이 코딩테스트 연습 > 코딩테스트 > 입문 양꼬치문제 설명머쓱이네 양꼬치 가게는 10인분을 먹으면 음료수 하나를 서비스로 줍니다. 양꼬치는 1인분에 12,000원, 음료수는 2,000원입니다. 정수 n과 k가 매개변수로 주어졌을 때, 양꼬치 n인분과 음료수 k개를 먹었다면 총얼마를 지불해야 하는지 return 하도록 solution 함수를 완성해보세요. 제한사항0 n / 10 ≤ k 서비스로 받은 음료수는 모두 마십니다. 입출력 예 입출력 예 설명입출력 예 #1- 10인분을 시켜 서비스로 음료수를 하나 받아 총 10 * 12000 + 3 * 2000 - 1 * 2000 = 124,000원입니다. 입출력 예 #2- 64인분을 시켜 서비스로 음료수를 6개 받아 총 64 * 12000 + 6 * 2000 - 6 .. [Javascript]텍스트필드 input 박스 포커스 했을때 class 추가/제거하기 javascript class를 이용해 객체를 생성 후 input 박스 포커스했을때와 아웃했을때 css를 추가/삭제하는 방법입니다. HTML 예시) 3개의 input 박스 CSS.focus{border:1px solid red} 포커스했을때 빨간색 라인추가하기 Javascriptclass TextField { constructor(textField){ this.elements = document.querySelectorAll('.' + textField); this.addFocusClass = this.addFocusClass.bind(this); this.removeFocusClass = this.removeFocusClass.bind(this); this.init(); } .. [Javascript]코딩테스트 프로그래머스 "중복된 숫자 개수" 풀이 코딩테스트 연습 > 코딩테스트 입문 > 중복된 숫자 개수문제 설명정수가 담긴 배열 array와 정수 n이 매개변수로 주어질 때, array에 n이 몇 개 있는 지를 return 하도록 solution 함수를 완성해보세요. 제한사항1 ≤ array의 길이 ≤ 1000 ≤ array의 원소 ≤ 1,0000 ≤ n ≤ 1,000 입출력 예 입출력 예 설명입출력 예 #1- [1, 1, 2, 3, 4, 5] 에는 1이 2개 있습니다. 입출력 예 #2- [0, 2, 3, 4] 에는 1이 0개 있습니다. 문제 풀이방법1. filter()function solution(array, n){ const filtereArray = array.filter(num => num === n); return filtereAr.. [Javascript]단축 평가 논리 연산자를 사용하여 조건문 처리하기(if를&&로) 조건문 처리할때 if문대신 &&단축 평가를 사용하는 방법입니다. 문제 설명n에 변수가 존재하고, true이면 실행하기 문제 풀이1. 값이 없을때 if문 예시// 값이 없을때 if문 예시let n;if(n){ console.log('true');} 2. 값이 없을때 && 논리 연산자 예시// 값이 없을때 && 예시let n;n && console.log('true'); 1번과 2번 결과물은 동일하게 값이 없으므로 출력되지 않습니다. 3. 값이 있을경우 'true' 출력// 값이 있을때 if문 예시let n = 1;if(n){ console.log('true');}// 값이 있을때 && 예시let n = 1;n && console.log('true'); 풀이 설명- 'n' 변수가 존재하고 'true'이면,.. [Javascript]코딩테스트 프로그래머스 "각도기" 풀이 코딩테스트 연습 > 코딩테스트 입문 > 각도기문제 설명각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요. 제한사항 입출력 예 입출력 예 설명입출력 예 #1- angle이 70이므로 예각입니다. 따라서 1을 return합니다. 입출력 예 #2- angle이 91이므로 둔각입니다. 따라서 3을 return합니다. 입출력 예 #2- angle이 180이므로 평각입니다. 따라서 4를 return합니다. 문제 풀이function solution(angle) { if(angle > .. [Javascript]코딩테스트 프로그래머스 "배열의 평균값" 풀이 코딩테스트 연습 >코딩테스트 입문 >배열의 평균값문제 설명정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소의 평균값을 return하도록 solution 함수를 완성해주세요. 제한사항 입출력 예 입출력 예 설명입출력 예 #1- numbers의 원소들의 평균 값은 5.5입니다. 입출력 예 #2- numbers의 원소들의 평균 값은 94.0입니다. 문제 풀이function solution(numbers) { const sum = numbers.reduce((acc, curr) => acc + curr, 0); return sum / numbers.length;}console.log(solution([1,2,3,4,5,6,7,8,9,10])); // 결과값 5.5 풀이 설명해당.. [Javascript]코딩테스트 프로그래머스 "두 수의 나눗셈" 풀이 코딩테스트 연습 > 코딩테스트 입문 > 두 수의 나눗셈문제 설명정수 num1과 num2가 매개변수로 주어질 때, num1을 num2로 나눈 값에 1,000을 곱한 후 정수 부분을 return 하도록 soltuion 함수를 완성해주세요. 제한사항 입출력 예 입출력 예 설명입출력 예 #1- num1이 3, num2가 2이므로 3 / 2 = 1.5에 1,000을 곱하면 1500이 됩니다. 입출력 예 #2- num1이 7, num2가 3이므로 7 / 3 = 2.33333...에 1,000을 곱하면 2333.3333.... 이 되며, 정수 부분은 2333입니다. 문제 풀이function solution(num1, num2){ return Math.floor((num1 / num2) * 1000);} 화살표.. [Javascript]코딩테스트 프로그래머스 "나이 출력" 풀이 코딩테스트 연습 > 코딩테스트 입문 > 나이 출력문제 설명머쓱이는 선생님이 몇 년도에 태어났는지 궁금해졌습니다. 2022년 기준 선생님의 나이 age가 주어질 때, 선생님의 출생 연도를 return 하는 solution 함수를 완성해주세요 제한사항-0 -나이는 태어난 연도에 1살이며 매년 1월 1일마다 1살씩 증가합니다. 입출력 예 입출력 예 설명입출력 예 #1- 2022년 기준 40살이므로 1983년생입니다. 입출력 예 #2- 2022년 기준 23살이므로 2000년생입니다. 문제 풀이function solution(age) { const currentYear = 2022; // 2022년 기준 return currentYear - age + 1;} 풀이 설명현재시간 가져오는 함수 getFu.. [Javascript]코딩테스트 프로그래머스 "숫자 비교하기" 풀이 문제 설명정수 num1과 num2가 매개변수로 주어집니다. 두 수가 같으면 1 다르면 -1을 retrun하도록 solution 함수를 완성해주세요. 제한사항 입출력 예 입출력 예 설명입출력 예 #1- num1이 2이고 num2가 3이므로 다릅니다. 따라서 -1을 return합니다. 입출력 예 #2- num1이 11이고 num2가 11이므로 같습니다. 따라서 1을 return합니다. 입출력 예 #3- num1이 7이고 num2가 99이므로 다릅니다. 따라서 -1을 return합니다. 문제 풀이let solution = (num1, num2) => num1 === num2 ? 1 : -1; 풀이 설명'num1'을 'num2'로 나눈 나머지가 0인지 확인하고, 그 결과를 반환합니다. 만약 0이면 '1' (t.. [Javascript]코딩테스트 프로그래머스 "몫 구하기" 풀이 코딩테스트 연습 > 코딩테스트 입문 > 몫 구하기문제 설명정수 num1, num2가 매개변수로 주어질 때, num1을 num2로 나눈 몫을 return 하도록 solution 함수를 완성해주세요. 제한사항- 0 - 0 입출력 예내용 num1105num272result23 입출력 예 설명입출력 예 #1- num1이 10, num2가 5이므로 10을 5로 나눈 몫 2를 return 합니다. 입출력 예 #2- num1이 7, num2가 2이므로 7을 2로 나눈 몫 3을 return 합니다. 문제 풀이let solution = (num1, num2) => Math.floor(num1 / num2); 풀이 설명이 코드는 두 숫자를 나눈 후 'Math.floor()' 함수를 사용하여 몫을 반환합니다. 함수를 호.. [Javascript]코딩테스트 프로그래머스 "배열의 길이에 따라 다른 연산하기" 풀이 코딩테스트 연습 > 코딩 기초 트레이닝 > 배열의 길이에 따라 다른 연산하기문제 설명정수 배열 arr과 정수 n이 매개변수로 주어집니다. arr의 길이가 홀수라면 arr의 모든 짝수 인덱스 위치에 n을 더한 배열을, arr의 길이가 짝수라면 arr의 모든 홀수 인덱스 위치에 n을 더한 배열을 return 하는 solution 함수를 작성해 주세요. 제한사항1 ≤ arr의 길이 ≤ 1,0001 ≤ arr의 원소 ≤ 1,0001 ≤ n ≤ 1,000 입출력 예arr[444, 555, 666, 777][444, 655, 666, 877]n27100result[76, 12, 127, 276, 60][444, 655, 666, 877] 입출력 예 설명입출력 예 #1- 예제 1번의 arr의 길이는 5로 홀수입니다... [Javascript]코딩테스트 프로그래머스 "뒤에서 5등까지" 풀이 코딩테스트 연습 > 코딩 기초 트레이닝 > 뒤에서 5등까지문제 설명정수로 이루어진 리스트 num_list가 주어집니다. num_list에서 가장 작은 5개의 수를 오름차순으로 담은 리스트를 return하도록 solution 함수를 완성해주세요. 제한사항- 6 ≤ num_list의 길이 ≤ 30 - 1 ≤ num_list의 원소 ≤ 100 입출력 예num_list[12, 4, 15, 46, 38, 1, 14] result[1, 4, 12, 14, 15] 입출력 예 설명입출력 예 #1- [12, 4, 15, 46, 38, 1, 14]를 정렬하면 [1, 4, 12, 14, 15, 38, 46]이 되고, 앞에서 부터 5개를 고르면 [1, 4, 12, 14, 15]가 됩니다. 문제 풀이function solut.. [Javascript]코딩테스트 프로그래머스 "정수" 부분 풀이 코딩테스트 연습 > 코딩 기초 트레이닝 > 정수 부분문제 설명실수 flo가 매개 변수로 주어질 때, flo의 정수 부분을 return하도록 solution 함수를 완성해주세요. 제한사항0 ≤ flo ≤ 100 입출력 예flo result1.42 169.32 69 입출력 예 설명입출력 예 #1- 1.42의 정수 부분은 1입니다. 입출력 예 #2- 69.32의 정수 부분은 69입니다. 문제 풀이let solution = (flo) => Math.floor(flo);console.log(solution(3.534423)); //확인 풀이 설명Math.floor정적 Math.floor()메서드는 항상 반올림하여 주어진 숫자보다 작거나 같은 가장 큰 정수를 반환합니다. 참고Math.floor()https://de.. [Javascript]자바스크립트 console.log 사용방법 JavaScript의 console.log() 함수는 콘솔에 메시지를 출력하는 데 사용됩니다. 이 함수를 사용하여 코드 실행 중에 값을 확인하거나 디버깅에 도움을 얻을 수 있습니다. 아래는 console.log()의 간단한 사용 방법입니다 1.텍스트 출력 console.log("안녕하세요, 콘솔!"); 2.변수 출력 let 변수 = "값"; console.log(변수); 3.여러 값 출력 let 변수1 = "값1"; let 변수2 = "값2"; console.log(변수1, 변수2); 4.변수와 문자열 결합 let 숫자 = 42; console.log("숫자는 " + 숫자 + "입니다."); 5.포맷된 출력 let 이름 = "John"; let 나이 = 25; console.log(`이름: ${이름}, .. [Javascript]자바스크립트 객체(Objec의 기본 구조 및 예제 JavaScript에서 객체는 데이터와 해당 데이터를 조작하기 위한 동작을 포함하는 복합 데이터 유형입니다. 객체(Object)란? 객체는 키-값 쌍의 모음이며, 키는 문자열 또는 기호이고, 값은 어떠한 데이터 유형이나 함수가 될 수 있습니다. 객체는 중괄호 {}로 표현되며, 키-값 쌍은 쉼표로 구분됩니다. object = 물건, 물체 자바스크립트 객체는 속성(Property)과 행동(또는 메서드(Method))으로 구성됩니다. 객체는 데이터를 저장하는 속성과 그 데이터를 조작하거나 동작하는 메서드를 포함합니다. 이러한 속성과 메서드는 객체의 상태와 행동을 정의하며, 객체의 핵심적인 특징 중 하나입니다. 객체의 기본 구조 및 예제 다음은 JavaScript 객체의 기본 구조 및 예제입니다. // 객체 생.. [Javascript]자바스크립트 알고리즘 종류와 예시 몇개 요새 개발자를 채용할 때 알고리즘 테스트를 하는 기업이 늘고 있습니다. 알고리즘 테스트를 하는 이유는 '문제해결' 능력을 보려고 하는 것입니다. 그렇다면 알고리즘이란? 무엇인가? 알고리즘이란? 컴퓨터가 따라 할 수 있도록 문제를 해결하는 절차나 방법을 자세히 설명하는 과정이다 사전적으로는 컴퓨터가 문제를 해결할 수 있도록 하는 절차나 방법이라고 설명하고 있습니다. 산에 정상을 찍는 게 목표라고 생각했을 때 정상을 가기 위해서는 빨리 가는 길, 돌아가는 길, 그 밖에 여러 갈래의 길이 있을 수 있습니다. 여기에서 산을 쉽게 빨리 가는 방법을 찾는다면 그게 빠른 길로 가는 알고리즘이라고 이해하시면 될 거 같습니다. 여러 알고리즘이 있지만, 만약에 본인이 더 좋은 알고리즘을 찾는다면 그 찾은 사람의 알고리즘이.. 반응형 이전 1 2 다음