JavaScript에서 undefined가 발생하는 경우는 대표적으로 3가지가 있습니다.이 3가지에 대해 다뤄보도록 하겠습니다. undefined가 나타나는 세 가지 경우 1. 빈 객체일때객체를 선언만 하고 속성 값을 정의하지 않은 상태에서, 해당 객체의 속성을 호출하면 undefined가 반환됩니다.const obj = {};console.log(obj.name); // undefined여기서 객체 obj에는 { }로 속성이 정의되어 있지 않기 때문에, name이라는 key의 value를 호출해도 undefined가 반환됩니다. 2. 함수에 return이 없을 때함수에서 값을 반환하지 않으면, return이 없으면, 함수 호출의 결과가 자동으로 undefined가 됩니다.const text = () ..

Function Hositing. 함수 호이스팅입니다.함수 호이스팅이란, JavaScript에서 JS엔진이 코드를 실행시키면, 돌아가기 전에 코드의 함수 선언에 대한 부분을 끌어 올립니다. 즉, JS엔진이 실행전에 코드 전체를 한 번 훑어보고 선언된 부분부터 먼저 읽는다~ 라고 생각하시면 편할 것 같습니다.함수 호이스팅에 대해 알기 전에, JS에서는 함수를 정의하는 방법이 2가지가 있죠?1. 함수 선언식2. 함수 표현식차례대로 설명드리겠습니다. 1. 함수 선언식함수 선언식은 호이스팅이 적용됩니다. 그러면 함수 표현식은요?? 뒤에 말씀드릴게요.JavaScript 코드를 실행시에 선언에 대한 코드는 맨 위로 끌어 올려 처리가 됩니다. 즉 선언식에서는 함수가 선언되기 전에 호출이 가능합니다.console.lo..

혹시 NaN(Not a Number)이라는 결과를 본적이 있지 않으신가요?없으시다면,, 고수시거나 뉴비시거나 둘중 하나일 테지요.. 하하하 NaN이란 "Not a Number"라는 뜻으로 자바스크립트에서 "숫자가 아니다."를 나타내는 특수한 값이에요. 숫자 연산 중에서 정상적인 숫자 값을 얻을 수 없는 경우에 NaN이 반환이 됩니다. 가장 쉬운예시로 24+"2" 이런식이죠,더 많은 예시를 보여드릴게요.console.log(Number("hello")); // NaNconsole.log(10 / "two"); // NaNconsole.log(Math.sqrt(-1)); // NaN이 코드에서 알 수 있듯이, 문자열을 숫자로 변환할 수 없거나, 0으로 나누거나 등등 잘못된 연산에서 NaN이 발생..

공부하다가 갑자기 리터럴이라는 단어가 되게 낯설게 느껴지는거 있죠?저 스스로에게 설명해보라 하는데 저도 명확이 얘기를 못하더라고요..그래서 정리해봤습니다.리터럴이란...코드에 직접 작성하는 값을 의미합니다. 쉽게 말해서 변수나 함수에 저장되는 것이 아닌, 코드 자체에 포함되어 있는 값을 말하는데요, 잘 이해가 안되시죠?코드로 설명드릴게요.// 변수에 저장된 값let name = "Jun";// 코드에 직접 작성된 값 (리터럴)console.log("문자열1");console.log(24); // 숫자 리터럴여기서 "Jun", "문자열1", 24가 모두 리터럴에 해당합니다.1. 문자열 리터럴 (String Literal)문자열 데이터를 표현할 때 사용합니다. ' ', " ", 또는 벡틱 ` `을 사용할 수..

프로그래밍에서 네이밍 컨벤션은 코드의 가독성과 유지보수성을 크게 향상시킵니다.이때 사용할 수 있는 4가지의 네이밍 컨벤션을 설명하겠습니다.1. 카멜 케이스 (Camel Case)첫 단어는 소문자로 시작하고, 이후 각 단어의 첫 글자를 대문자로 표기하는 방식입니다.// 변수명let firstName = "Kimjunsu";const maxCount = 100; let isActive = true;// 함수명function getUserData() { ... }function calculateTotal() { ... }// 객체의 프로퍼티const user = { firstName: "Kim", lastName: "Junsu", phoneNumber: "123-456-7890"};낙타의 등 ..

여러분, 코딩하면서 이런 상황 겪어본 적 있나요?"어? 분명 코드는 잘 썼는데 왜 갑자기 오류가 뜨지?""이거 분명 동작은 하는데... 뭔가 이상해..."혹시 내가 놓친 버그나 잘못된 문법이 있을까 걱정되죠? 바로 이때 ESLint가 도와줄 수 있습니다😊ESLint란 뭐지?쉽게 말해서, ESLint는 "코드 경찰"이에요. 여러분이 자기도 모르게 저지르는 작은 실수들을 찾아내고 알려주는 똑똑한 툴이죠. 자, 예를 들어볼게요. 우리가 JavaScript 코드를 작성할 때, 어디서 변수 하나 빼먹었거나, 함수 괄호를 잘못 닫았을 때 "삑삑!" 하면서 알려줘요. 마치 교통 신호를 지키는 경찰처럼요.코드를 막 쓰고 나서 "괜찮겠지?"라고 생각했는데, 갑자기 ESLint가 와서 "잠깐! 여기서 변수 하나 안 썼잖..

안녕하세요!프론트엔드 분야에서 나의 개발 실력을 테스트하고 스스로 평가하기 위한 몇가지 항목들을 가져와봤습니다. 프론트엔드 기술은 빠르게 변화하고 있으며, 최신 트렌드와 기술들을 따라잡는 것이 중요합니다.이 글에서 여러분들이 본인은 몇 점짜리 개발자인지 스스로 평가해볼 수 있는 항목들을 소개해보고,다음 글부터 저 역시 같이 평가해보는 시간을 가지도록 하겠습니다.1. 웹 뼈대 및 UI 구현 관리JavaScript로 DOM 요소 동적 조작: JavaScript를 사용해 DOM 요소를 동적으로 조작하고, 사용자 입력에 따라 인터페이스를 업데이트할 수 있나요?이벤트 리스너 구현 및 핸들링: 사용자와의 상호작용을 위해 이벤트 리스너를 구현하고 이를 효율적으로 핸들링할 수 있나요?TypeScript로 타입 정의 및..

TypeScripte(타입스크립트)는 자바스크립트의 상위 집합으로, 정적 타입을 지원하여 더 안정적이고 유지보수가 쉬운 코드를 작성할 수 있도록 도와주는 문법입니다.타입스크립트 작성을 위한 초기세팅을 알려드리도록 하겠습니다. 1. Node.js와 npm 설치타입스크립트 사용을 위해서는 최신 버전의 Node.js와 npm이 설치되어야 합니다.설치는 및에 공식 사이트에 접속하여 다운받으실 수 있습니다.Node.js — Run JavaScript Everywhere (nodejs.org) Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. 프로젝트..