JavaScript

자바스크립트 const와 let의 차이점

자바스크립트 const와 let의 차이점

const와 let은 자바스크립트에서 변수를 선언하는 데 사용되는 키워드로 const와 let의 몇 가지 중요한 차이점을 알아보겠습니다. 자바스크립트 const let 차이 1. 변수 재할당 가능 여부 let으로 선언된 변수는 재할당이 가능하지만 const로 선언된 변수는 재할당이 불가능합니다. let a = 1; a = 2; // b is now equal to 2 const b = 1; b = 2; // TypeError: Assignment to constant variable. 2. 전역 객체 const로 선언된 변수는 전역 객체(window, global)의 프로퍼티가 될 수 있지만 let으로 선언된 변수는 전역 객체의 프로퍼티가 될 수 없습니다. let a = 1; console.log(window.a); // undefined const b = 2; console.log(window.b); // 2 const와 let 변수는 각각의 상황에 맞게 사용해야 하는데요. 상수 값을 선언하거나 변수의 재할당을 막고 싶다면 const를 사용하고, 재할당이 필요한 변수를 선언 할때는 let을 사용해야 합니다.

2023-03-21
자바스크립트-스크롤-맨-위로-가기-버튼

자바스크립트 스크롤 맨 위로 가기 버튼(부드럽게)

자바스크립트 스크롤 맨 위로 가기 버튼, 페이지 중간 또는 하단에서 버튼을 클릭하면 스크롤을 맨 위로 이동시키는 간단한 코드로 window.scrollTo() 메서드를 사용했으며 부드러운 이동을 위해 window.requestAnimationFrame() 메서드를 이용했습니다. 스크롤 맨 위로 가기 버튼 1. html페이지에 아래와 같이 버튼 요소를 추가합니다. <button onclick="backToTop()" id="btn-back-to-top" title="위로 가기">Top</button> 2. CSS파일에 아래 스타일 코드를 입력합니다. #btn-back-to-top { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 9999; border: none; outline: none; background-color: #555; color: white; cursor: pointer; padding: 15px; border-radius: 10px; } #btn-back-to-top:hover { background-color: #333; } 3. 마지막으로 아래 코드를 자바스크립트 파일에 추가해 줍니다. // 스크롤 이벤트 리스너 window.addEventListener('scroll', () => { // 스크롤 위치가 100px 이상일 때 위로 가기 버튼을 보이게 함 if ( document.body.scrollTop > 100 || document.documentElement.scrollTop > 20 ) { document.getElementById('btn-back-to-top').style.display = 'block'; } else { document.getElementById('btn-back-to-top').style.display = 'none'; } }); // 클릭 시 페이지 맨 위로 스크롤 (애니메이션 효과 추가) function backToTop() { const position = document.documentElement.scrollTop || document.body.scrollTop;…

2024-02-03
자바스크립트-나이-계산

자바스크립트 나이 계산(만 나이)

자바스크립트 나이 계산 소스로 만 나이를 계산합니다. 만 나이를 계산하는 다양한 방법이 있지만 일반적인 가장 만이 사용되는 코드를 작성해 보았습니다. TIP 참고로 2023년 6월부터 한국도 세는 나이 대신 만 나이를 사용한다고 합니다. 자바스크립트 나이 계산 생년월일을 입력받아 현재 날짜를 기준으로 생일이 지났는지 여부를 판단해 만 나이를 계산하는 자바스크립트 코드 소스입니다. // 생년월일 입력 const birthdate = new Date('2000-01-01'); // 현재 날짜 생성 const now = new Date(); // 생일이 지났는지 체크 let age = now.getFullYear() - birthdate.getFullYear(); if (now.getMonth() < birthdate.getMonth() || (now.getMonth() === birthdate.getMonth() && now.getDate() < birthdate.getDate())) { age--; } console.log(age); 또 다른 방식으로 입력한 생년월일과 현재 날짜 간의 차이를 계산하고 new Date(diffInMs).getTime()을 사용하여 밀리초를 나이로 변환하는 방법입니다. // 생년월일 입력 const birthdate = new Date('2000-01-01'); // 현재 날짜 생성 const now = new Date(); // 차이 계산 (밀리초 단위) const diffInMs = now - birthdate; // 밀리초를 나이로 변환 const ageInMs = new Date(diffInMs).getTime(); // 나이 계산…

2023-02-18
자바스크립트 글자 수 세기

자바스크립트 글자 수 세기(feat. chatGPT)

chatGPT이 작성한 자바스크립트 글자 수 세기 코드입니다. 맛보기로 chatGPT에게 간단한 코드 작성을 요청해 보았는데요 직접 타이핑하는 것보다 빠르게 작성해 주네요. 주석도 달아 주고 하단에는 설명까지 친절하게 알려줍니다. 앞으로 chatGPT에게 코드 작성을 요청하고 수정해서 사용하면 생산성이 높아질 것 같네요. const str = '동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세'; const letterCount = str.length; // 글자 수 (공백 포함) const letterhWithoutSpaces = str.replace(/\s+/g, '').length; // 글자 수(공백 제외) const spaceCount = (str.match(/ /g) || []).length; // 공백 수 const wordCount = str.trim().split(/\s+/).length; //단어 수 console.log( `공백포함 글자수: ${letterCount}, 공백제외 글자수: ${letterhWithoutSpaces}, 공백 수 ${spaceCount}, 단어 수: ${wordCount}` ); // 결과 : 공백포함 글자수: 35, 공백제외 글자수: 28, 공백 수 7, 단어 수: 8

2023-02-15
logo
아이티 이알