clean-code-javascript

1. var의 시대는 끝났다?⚠️ ES2015 이전에는 var만 사용할 수 있었다. 하지만 var은 다음과 같은 문제점들을 가지고 있어 현대 Javascript에서는 지양해야 한다. > 1. 예측 불가능한 스코프 : 함수 스코프만을 가져 블록 레벨의 스코프 제어가 불가

주요 문제점var는 함수 스코프만 인식하므로 if블록을 무시전역 변수가 의도치 않게 오염됨if문은 함수가 아닌 블록이기 때문에 새로운 스코프를 생성하지 않음블록 스코프의 장점중괄호 안의 변수는 그 안에서만 유효외부 스코프의 변수를 안전하게 보호코드 예측 가능성이 높아짐

오늘은 전역공간 사용이 왜 위험한지, 그리고 어떻게 더 안전한 코드를 작성할 수 있는지 알아보자 🤔 전역공간이란? 자바스크립트의 전역공간은 실행 환경에 따라 다음과 같이 나뉜다 >브라우저: window 객체 Node.js: global 객체 ⚠️ 전역공간 오염의

오늘은 임시변수가 왜 위험한지, 그리고 어떻게 더 나은 코드를 작성할 수 있는지 알아보자🤔 임시변수란?함수 내에서 중간 데이터를 저장하기 위해 사용하는 변수해당 스코프 안에서는 마치 전역변수처럼 어디서든 접근, 수정이 가능v1 : 임시변수를 사용한 초기 버전❗ 첫 번

📌 호이스팅이란? "선언과 할당이 분리되어 선언부가 코드의 최상단으로 끌어올려지는 현상"이다. 코드 실행 시점(런타임)에 발생하며, 예상치 못한 동작의 주요 원인이 된다. 🎯 예제로 보는 호이스팅 🤔 왜 첫 번째 console.log가 undefined일까? 자

자바스크립트에서 타입을 검사하는 것은 생각보다 복잡한 작업니다. 각각의 타입 검사 방법과 특징에 대해 알아보자.typeof는 가장 기본적인 타입 검사 연산자로 피연산자를 평가해서 문자열로 반환해준다. 주로 원시(primitive)타입을 검사할 때 유용하다.하지만 typ

자바스크립트에서 ‘값이 없음’을 나타내는 두 가지 방식인 undefined와 null의 차이점을 자세히 알아보자.변수는 선언되었지만 아직 값이 할당되지 않은 상태시스템이 자동으로 부여하는 값개발자가 의도적으로 ‘비어있음’을 명시한 상태명시적으로 할당해야 하는 값타입 관

eqeq는 자바스크립트에서 동등 연산자 ==다.자바스크립트에서 동등 비교는 중요한 개념이다. 특히 ==(동등 연산자 eqeq)와 ===(일치 연산자eqeqeq)의 차이를 이해하는 것이 중요하다.동등 연산자는 비교 전에 자동으로 타입을 변환한다. 이런 암묵적 형변환은 예

자바스크립트의 == 연산자는 복잡한 형변환 규칙을 가지고 있다. 이는 JavaScript Type Table을 보면 명확하게 확인할 수 있다. 이 테이블은 ==와 ===연산자의 차이를 극명하게 보여준다. 이러한 복잡한 형변환 규칙 때문에 느슨한 검사를 피해야 한다.이러

isNaN은 “is Not a Number”의 약자로, “숫자가 아님”을 검사하는 메서드다. 하지만 이 작명은 직관적이지 않은 문제가 있다.ES2015부터는 Number.isNaN이 도입되었다.두 메서드의 핵심 차이isNaN값이 숫자로 변환했을 때 NaN이 되는지 검사

클린 코드를 작성할 때 경계값을 다루는 것은 매우 중요하다. 경계값을 명확하게 처리하면 코드의 가독성과 유지보수성이 크게 향상된다. 주요 패턴들을 살펴보자 1. MIN-MAX패턴 📊 가장 기본적인 경계 다루기 패턴으로, 최솟값과 최댓값을 다룰 때 사용 장점 매

프로그래밍에서 '값식문'은 세 가지 핵심 개념을 말한다.값(Value) 은 프로그램에서 다룰 수 있는 데이터를 의미한다다. 숫자, 문자열, 객체, 배열 등이 모두 값입니다.식(Expression) 은 값으로 평가될 수 있는 코드입니다. 예를 들어 5 + 3은 8이라는

자바스크립트는 동적 타입 언어로, 상황에 따라 자동으로 형변환이 일어난다. 이를 이해하고 활용하면 더 간결한 코드를 작성할 수 있다.위 코드들은 명시적인 비교를 하고 있지만, 사실 불필요한 과정을 거치고 있다조건문에서 자동으로 boolean으로 형변환 하기 때문조건문은

else-if를 Promise의 then 체이닝처럼 생각하는 경우가 있음하지만 else-if는 완전히 다른 방식으로 동작함else-if는 단순히 else 안에 if문이 있는 구조위의 두 코드는 논리적으로 완전히 동일즉, else-if는 첫 조건이 false일 때만 실행

else 구문의 논리적 / 스타일적 문제if-else 구문은 함수의 '반전된 기능'을 암시함참인 경우와 거짓인 경우가 명시적으로 대비되어 있음이는 코드를 읽는 사람에게 "두 가지 상반된 경우를 처리하는 함수"라는 잘못된 인상을 줄 수 있음불필요한 코드 블록 증가조건문의

부정 조건문은 ! 연산자를 사용하여 조건을 부정하는 형태의 조건문이다.개발자의 사고 과정에 추가적인 단계가 필요하다✅ 부정 조건문이 불가피한 경우Early Retrun 패턴폼 유효성 검사보안 검사 로직예외 처리❌ 피해야 할 경우일반적인 비즈니스 로직긍정 조건으로 표현

자바스크립트에서 안전하고 견고한 코드를 작성하는 방법 중 엣지 케이스 처리에 대해 알아보자🤔 왜 엣지 케이스 처리가 중요할까?자바스크립트는 사용자와 상호작용하는 동적인 언어다. 사용자의 입력을 받고, 그에 따라 프로그램이 동작한다. 이런 특성 때문에 예상치 못한 상황

프로그래밍을 할 때 연산자 우선순위를 다 외워야 할까? 사실 이건 외우는 것보다 더 안전하게 쓸 수 있는 방법을 찾는게 좋다고 생각한다.BMI 계산식을 보자괄호가 없으면 코드를 볼 때 한번 고민을 해야 한다. 그래서 우리는 항상 연산자 우선순위를 명확하게 보여줄 수 있

널 병합 연산자(??)는 편리하지만 주의해서 써야 할 부분이 많다. 어떤 함정들이 있는지 살펴보자height와 width에 0을 넣으면 의도와 다르게 10px이 나온다. OR연산자(||)가 모든 Falsy값에 대해 우측 피연산자를 반환하기 때문이다.널 병합 연산자를 사

개발을 하다 보면 조건문을 자주 마주치게 된다. 특히 부정 조건문을 다룰 때, 코드가 복잡해지고 가독성이 떨어지는 경우가 많다. 이 때 드모르간의 법칙을 활용하면 더 깔끔한 코드를 작성할 수 있다.드로므간의 법칙은 논리 연산에서의 부정에 관한 법칙이다. 복잡한 부정 연

자바스크립트에서 배열은 특별한 존재다. 겉으로 보기에는 단순한 배열이지만, 내부적으로는 객체의 특성을 가지고 있다. 오늘은 이 특별한 관계를 알아보고, 클린코드 관점에서 어떻게 다뤄야 할지 살펴보자위 코드에서 볼 수 있뜻이, 배열과 객체는 매우 유사한 구조를 가지고 있

자바스크립트에서 무심코 사용하지만 실제로는 꽤나 까다로운 Array.length 속성에 대해 알아보자Array.length는 실무에서 정말 자주 사용되는 속성이다. React 컴포넌트에서 배열을 렌더링 할 때나, 조건문에서 배열의 상태를 체크할 때 등 자주 사용된다.

배열의 인덱스 \[0], \[1], \[2]를 직접 사용하면 코드의 가독성이 떨어진다. 코드를 봤을 때 \[0], \[1], \[2]에 뭐가 들어있는지 예상이 되지 않기 때문이다.가장 간단한 방법은 배열을 의미 있는 변수명으로 구조 분해하는 것이다.한 단계 더 나아가서

유사 배열 객체는 배열처럼 보이지만 실제로는 객체고 다음과 같은 특징을 가진다숫자 인덱스를 가짐length 프로퍼티를 가짐하지만 배열메서드(map, filter 등)은 사용할 수 없음DOM 조작 : NodeList를 다룰 대 배열 메서드를 사용하려면 변환이 필요가변 인

자바스크립트에서 배열은 참조 타입이기 때문에, 단순 할당으로는 새로운 복사본이 만들어지지 않는다.예측 가능성 : 원본 데이터가 어디서 변경될지 모르는 상황 방지디버깅 용이성 : 데이터 변경 추적이 쉬워짐React 최적화 : React 등의 프레임워크에서 변경 감지가 정

오늘은 자바스크립트에서 흔히 볼 수 있는 for 반복문을 더 깔끔하고 선언적인 코드로 리팩토링하는 방법을 알아보자. 특히 배열 고차 함수와 메서드 체이닝을 활용하여 코드의 가독성과 유지보수성을 높이는 방법을 살펴보자.먼저 일반적으로 많이 사용하는 for문을 봐보자문제점

배열 메서드를 사용하다 보면 가장 흔히 발생하는 실수 중 하나가 map과 forEach를 구분하지 못하거나, 한 가지만 고집하여 사용하는 경우다. 이 두 메서드의 차이점과 올바른 사용법을 알아보자주요 차이점반환값 map: 새로운 배열 반환 forEach: undef

배열 메서드를 사용하다 보면 for문에서 사용하던 continue와 break를 사용하려다 막히는 경우가 있다. 이러한 흐름 제어를 배열 메서드에서는 어떻게 다뤄야 할지 알아보자배열 메서드(forEach, map 등)는 콜백 함수를 인자로 받아 동작한다. 이 콜백 함수

자바스크립트를 사용하다 보면 객체의 속성과 메서드를 정의하는 다양한 방법을 접하게 된다. ES6+에서는 이를 더 간단하게 표현할 수 있는 문법들이 추가되었다. 이 문법들을 제대로 이해하지 못하면 코드를 읽거나 쓸 때 어려움을 겪을 수 있다.이 코드가 어떻게 동작하는지

자바스크립트를 사용하다 보면 프레임워크나 라이브러리의 문법인지, 순수 자바스크립트 문법인지 헷갈리는 경우가 많다. 그 중에서도 computed property name은 ES6+의 문법임에도 나는 React 문법으로 생각하고 있었다.객체의 속성 이름을 동적으로 생성할

키-값 쌍으로 이루어진 객체를 사용하여 조건문을 대체하는 패턴이다. 많은 분기문이 필요한 상황에서 코드를 더 깔끔하고 관리하기 쉽게 만들어 준다.if문이나 switch문을 사용하면 새로운 요구사항이 추가될 때마다 코드가 계속 길어진다여기서 USER_TYPE은 상수로 선

프로젝트가 커질수록 함수가 받는 매개변수도 늘어난다. 이때 매개변수를 어떻게 관리하느냐에 따라 코드의 품질이 크게 달라질 수 있다. 오늘은 구조분해할당을 활용해 더 깔끔한 코드를 작성하는 방법을 알아보자.이 코드의 가장 큰 문제는 매개변수의 순서에 강제성이 있다는 것이

객체의 불변성은 안전한 프로그래밍을 위해 매우 중요하다. 자바스크립트는 이를 위해 Object.freeze라는 내장 메서드를 제공하는데, 이름 그대로 객체를 '얼려서' 변경할 수 없게 만든다.객체를 동결시켜 속성 추가, 수정, 삭제를 방지여기까지는 잘 작동한다. 하지만

자바스크립트는 프로토타입 기반 언어다. 하지만 최근에는 프로토타입을 직접 조작하는 것을 권장하지 않는다. 그 이유를 알아보자.과거에는 클래스 문법이 없어서 생성자 함수와 프로토타입을 직접 다뤄야 했다.하지만 모던 자바스크립트에서는 클래스 문법을 제공한다.자바스크립트는

프로퍼티가 객체에 직접 속해있는지 확인하는 hasOwnProperty 메서드는 매우 유용하지만, 안전하게 사용하기 위해서는 몇 가지 주의사항이 있다.단순해 보이지만, 여기에는 큰 문제가 있다자바스크립트는 hasOwnProperty라는 이름을 특별히 보호하지 않는다. 따

웹 애플리케이션에서 상태 관리는 매우 중요한 부분이다. 하지만 상태를 관리할 때 직접적인 객체 접근은 여러 문제를 일으킬 수 있다. 오늘은 더 안전하고 예측 가능한 코드를 작성하는 방법에 대해 알아보자먼저 흔히 볼 수 있는 안티 패턴을 살펴보자이 코드의 문제점을 무엇일

웹 개발에서 중첩된 객체 구조를 다루는 일은 매우 흔하다. 특히 API 응답을 처리할 때, 데이터의 안전한 접근은 매우 중요한 과제다.먼저 일반적인 객체 접근 방식을 살펴보자이 코드의 문제점은?데이터 구조가 완벽할 때만 작동하나라도 없으면 런타임 에러 발생서버 응답이

자바스크립트에 함수는 일급 객체로서 매우 유연하고 강력한 기능을 제공한다. 이러한 특성 덕분에 고차 함수로 활용할 수 있고, 함수형 프로그래밍도 가능하다. 하지만 이런 유연성이 때로는 혼란은 가져올 수 있다. 오늘은 자바스크립트 함수의 세 가지 핵심 형태를 살펴보자독립