JavaScript 콘솔에서 Uncaught SyntaxError: Illegal return statement 오류가 발생한다면, 대부분 return 문(return)을 함수 외부에 작성했기 때문입니다. 오류가 발생하는 이유 JavaScript에서 return 문은 반드시 함수 내부에서만 사용할 수 있습니다. 함수 바깥에 return 문을 작성하면 문법 오류(SyntaxError)가 발생하고, 해당 스크립트의 실행이 중단됩니다. 이는 return 문이 함수의 실행을 종료하고 값을 반환하는 역할을 하기 때문인데, 함수가 아닌 위치에

JavaScript에서 스코프(Scope)가 어떻게 작동하는지 알아보고, 전역 스코프(Global Scope), 지역 스코프(Local Scope), 렉시컬 스코프(Lexical Scope)의 차이점까지 한 번에 정리해 드립니다. 스코프(Scope)란 함수나 변수에 접근할 수 있는 문맥, 즉 유효 범위를 의미합니다. JavaScript에는 세 가지 스코프 유형이 있습니다. 전역 변수(Global Variable): 코드 블록 밖에서 선언된 변수 지역 변수(Local Variable): 코드 블록 안에서 선언된 변수 알아두면 좋은

JavaScript의 repeat() 메서드는 문자열을 괄호 안에 지정한 횟수만큼 반복하여 새로운 문자열을 반환합니다. 코드가 간결해지고 가독성이 높아져, 구분선 생성이나 특정 패턴 출력 등에 유용하게 활용됩니다. repeat() 메서드 기본 사용법 다음 예제는 hiphop 문자열을 5번 반복한 결과를 보여줍니다. let hipHop = hiphop .repeat(5) console.log(hipHop) // hiphop hiphop hiphop hiphop hiphop 주요 특징과 주의사항 원본 문자열은 변경되지 않습니다.

JavaScript에서 concat() 메서드는 두 개 이상의 문자열을 하나로 합칠 때 사용하는 대표적인 문자열 메서드입니다. concat() 메서드 기본 사용법 예를 들어 이름과 성을 각각 저장하는 두 개의 변수가 있고, 이를 하나의 문자열로 합치고 싶다고 가정해 보겠습니다. concat() 메서드를 활용하면 다음과 같이 간단하게 처리할 수 있습니다. const firstName = David const lastName = Tromholt var fullName = firstName.concat(lastName) console

JavaScript를 사용하면 어떤 텍스트든 간단하게 대문자로 변환할 수 있습니다. 이 글에서는 toUpperCase() 메서드의 기본 사용법과 주의할 점까지 알아봅니다. toUpperCase() 메서드 기본 사용법 문자열을 모두 대문자로 변환하려면 JavaScript 내장 메서드인 toUpperCase()를 사용하면 됩니다: let someText = Here is some text. Let us convert it all to uppercase someText.toUpperCase() console.log(someText.t

JavaScript의 toLowerCase() 메서드를 사용하면 어떤 텍스트든 간단하게 소문자로 변환할 수 있습니다. 이 글에서는 기본 사용법부터 주의해야 할 핵심 포인트까지 자세히 알아봅니다. toLowerCase() 메서드 기본 사용법 JavaScript에서 문자열을 모두 소문자로 변환하려면 toLowerCase() 메서드를 사용하면 됩니다. 이 메서드는 문자열 객체에 내장되어 있어 별도의 라이브러리 없이 바로 호출할 수 있습니다. let someText = Here is some text. Let us convert it al

자바스크립트에서 두 값이 같은지 비교할 때 사용할 수 있는 방법은 두 가지가 있습니다. 일반 동등 연산자(Regular Equals): == (이중 등호) 엄격 동등 연산자(Strict Equals): === (삼중 등호) ==와 ===의 핵심 차이 ==(이중 등호)는 값만 비교하고 자료형(타입)은 무시합니다. 비교 전에 필요하면 암묵적 형 변환(type coercion)을 수행합니다. ===(삼중 등호)는 값과 자료형을 모두 비교하며, 형 변환 없이 엄격하게 판단합니다. 예제로 살펴보기 // true를 반환 5 == 5 /

return 문이란 무엇인가?자바스크립트에서 return 문은 두 가지 핵심 역할을 수행합니다. 첫째, 함수의 실행을 즉시 중단하고, 둘째, 함수 내부의 값을 함수 외부로 반환(return)합니다.간단한 예시를 통해 살펴보겠습니다. 이름을 입력받는 addName이라는 함수가 있다고 가정해 보겠습니다.let addName = function(name) {}함수 안에 갇힌 값의 문제점이제 위 함수에 실제 이름을 인수로 전달해 보겠습니다.let myNameIs = addName(David)이 코드가 실행되면 addName 함수 내부에는

웹사이트에서 사용자가 폼을 제출할 때 페이지가 새로고침되지 않거나 성공 페이지로 이동하지 않는 경우가 많습니다. 이럴 때는 폼의 입력 필드를 깔끔하게 비워주는 것이 좋은 사용자 경험(UX)을 제공하는 핵심 요소입니다. 이 글에서는 별도의 라이브러리 없이 순수 JavaScript(바닐라 JS)만으로 폼 필드를 초기화하는 방법을 알아보겠습니다. 1. HTML: 로그인 폼 만들기 먼저 가장 흔히 볼 수 있는 로그인 폼 예시입니다. 사용자가 아이디와 비밀번호를 입력한 뒤 로그인(submit) 버튼을 누르는 구조입니다. <form>

JavaScript에서 객체(object)에 새로운 항목(속성)을 추가하는 방법은 크게 두 가지입니다. 점 표기법(Dot notation): object.thingToAdd 대괄호 표기법(Bracket notation): object[thingToAdd] 두 방식의 차이점과 각각 언제 사용해야 하는지 예제와 함께 자세히 알아보겠습니다. 점 표기법(Dot notation) 먼저 점 표기법부터 살펴보겠습니다. let dog = { name: Naya, age: 2, color: black, } // dog 객체에 항목

JavaScript에서는 내장 메서드인 setTimeout()을 사용하면 어떤 함수든 원하는 시간만큼 실행을 지연시킬 수 있습니다. 예를 들어 3초 후에 알림(alert) 창을 띄우고 싶다고 가정해 보겠습니다. 먼저 3초를 밀리초(ms) 단위로 변환해야 합니다. 3초는 3000ms이며, 이 값을 사용해 다음과 같이 코드를 작성합니다. setTimeout(function() { alert(3초가 지났습니다!) }, 3000) 위 예제는 익명(이름 없는) 함수입니다. 하지만 실무에서는 한 번만 사용할 수 있고 코드의 의미도 파악하기

JavaScript에서 문자열의 모든 공백을 제거하는 가장 간단한 방법은 정규식(RegEx)과 replace() 메서드를 함께 사용하는 것입니다.RegEx로 문자열의 공백 제거하기정규식 패턴 \s는 일반 공백뿐만 아니라 탭, 줄바꿈 등 모든 종류의 공백 문자를 의미합니다. 여기에 전역(g) 플래그를 붙이면 문자열 전체에서 모든 공백을 한 번에 찾아 제거할 수 있습니다.const sentence = This sentence has 6 white space characters. console.log(sentence.replace(/\

ES6 자바스크립트를 사용하면 DOM에서 요소를 아주 쉽게 제거할 수 있습니다. 제거하고 싶은 요소에 remove() 메서드만 붙여주면 됩니다. let element = document.querySelector(element-to-remove) element.remove() 예를 들어 웹 페이지에서 h1 요소를 제거하고 싶다면 다음과 같이 작성합니다. let headingOne = document.querySelector(h1) headingOne.remove() 브라우저 호환성 remove() 메서드는 Edge를 포함한 모든 최신

JavaScript의 new URL() 생성자 메서드를 활용하면 URL 문자열에 담긴 모든 데이터 값을 객체 형태로 손쉽게 추출할 수 있습니다. 이번 글에서는 그 구체적인 사용 방법을 알아봅니다. URL 데이터 값이 필요한 이유 예를 들어 웹사이트에 내부 검색 기능을 구축한다고 가정해 보겠습니다. 이런 기능을 제대로 구현하려면 URL 문자열에 포함된 모든 데이터 값(프로토콜, 호스트, 경로, 쿼리 파라미터 등)에 접근할 수 있어야 합니다. 다행히 JavaScript에는 new URL()이라는 생성자 메서드가 내장되어 있어, URL

웹사이트 내비게이션 바(메뉴)에서 현재 활성화된 페이지를 강조 표시하는 방법을 알아보세요. 사용자가 페이지 사이를 이동할 때 현재 보고 있는 페이지에 해당하는 메뉴 항목을 강조 표시하는 것은 웹사이트에서 매우 흔하게 볼 수 있는 기능입니다. 이 글에서는 외부 라이브러리 없이 순수한 바닐라 JavaScript만으로 이 기능을 구현하는 방법을 단계별로 살펴보겠습니다. 1단계: 간단한 메뉴 만들기 먼저 Home, About, Contact 세 개의 링크로 구성된 기본적인 내비게이션 메뉴를 준비합니다. 2단계: CSS 스타일링 메뉴에 적

JavaScript 비교 연산자의 기본 개념을 알아봅니다. JavaScript에서 비교 연산자(comparison operator)는 값(숫자, 문자열)이나 변수 사이의 동등 여부 또는 차이를 확인할 때 사용합니다. 비교 연산자는 피연산자(operand)를 서로 비교한 뒤, 그 결과가 참인지 거짓인지에 따라 불리언(boolean) 값을 반환합니다. 피연산자(Operand): 생소하게 들릴 수 있지만 전혀 어렵지 않습니다. 피연산자란 비교 연산자 양쪽에 위치한 값을 의미합니다. 예를 들어 2 < 4에서 2와 4가 피연산자이고,

바닐라 JavaScript만으로 사용자가 모달 창(또는 다른 UI 요소)의 바깥을 클릭했을 때 이를 닫는 방법을 알아보겠습니다. 모달 팝업은 대체로 짜증나는 존재입니다. 특히 화면 전체를 덮어버리면 더욱 그렇죠. 웹사이트에 들어온 지 몇 초 만에 팝업이 뜬다면 더더욱 불쾌합니다. 이건 어리석은 방식이며, 분명히 나쁜 UX 디자인입니다. 일부 사이트는 한 단계 더 나아가 닫기(X) 버튼을 너무 작게 만들거나 엉뚱한 위치에 배치해 버립니다. 마치 퍼즐을 풀듯 버튼을 찾아 헤매다 보면, 처음 그 사이트를 방문한 이유마저 잊어버릴 지경이

JavaScript에서 문자열의 마지막 문자를 제거하는 가장 간단한 방법은 slice() 메서드를 사용하는 것입니다. slice() 메서드의 기본 구조 slice() 메서드는 두 개의 매개변수를 받아 문자열의 특정 부분을 추출합니다. 시작 인덱스(0): 문자열의 첫 번째 문자부터 추출을 시작합니다. 종료 인덱스(-1): 음수 값을 사용하면 문자열의 뒤에서부터 계산되며, -1은 마지막 문자를 의미합니다. 즉, 마지막 문자를 제외한 나머지 부분만 반환됩니다. 다음은 철자가 틀리게 입력된 회사 이름을 수정하는 예시입니다. const

자바스크립트를 배우다 보면 용어 때문에 혼란스러울 때가 많습니다. 특히 정의가 서로 비슷하게 들리는 개념들이 그렇죠. 함수(function)와 메서드(method)도 예외는 아닙니다. 먼저 두 가지 기본 사실부터 짚고 넘어가겠습니다. 메서드는 곧 함수입니다. 함수는 호출(call)을 통해 코드를 실행할 수 있는 존재입니다. 그렇다면 함수와 메서드의 차이는 어디에 있을까요? 핵심은 바로 사용되는 방식에 있습니다. 일반 함수(Normal Function)란? 일반 함수는 독립적으로 존재하며, 함수 호출을 통해 실행됩니다. 일반 함수

자바스크립트에서 null과 undefined는 모두 원시(primitive) 값입니다. 두 값은 비슷해 보이지만 의미와 용도가 분명히 다르기 때문에, 그 차이를 정확히 이해하는 것이 중요합니다. 원시 값과 비원시(참조) 값의 차이에 대해서는 별도의 글에서 더 자세히 다룰 예정이니 참고해 보세요. undefined란 무엇인가? undefined는 변수가 선언되었지만 아직 값이 할당되지 않은 상태를 나타냅니다. 즉, 자바스크립트 엔진이 이 변수에는 아무런 값도 없다고 알려주는 기본값이라고 할 수 있습니다. 예를 들어 다음 변수를 콘솔에