개발/자바스크립트로의 깊은 잠수
-
자바스크립트의 함수를 잘못 사용하는 방법개발/자바스크립트로의 깊은 잠수 2026. 6. 9. 20:34
자바스크립트의 모든 함수는 호출할 수 있습니다.당연한 얘기죠.함수는 호출하라고 있는 것 아닌가요? 그런데 호출하면 안되는 함수도 존재합니다.이게 무슨 소릴까요? 생성자 함수자바스크립트에는 생성자 함수라는 개념이 있습니다. function Dog(name) { this.name = name; this.bark = function() { console.log(name + "(이)가 짖었습니다! 월월"); }} 위의 함수는 생성자 함수로 사용할 수 있습니다.이런 함수를 쓰는 표준적인 방법은 new 키워드를 사용해서 인스턴스를 생성하는 것입니다.아래 코드처럼 말입니다. function Dog(name) { this.name = name; this.bark = function() { con..
-
프로퍼티 어트리뷰트가 뭔가요?개발/자바스크립트로의 깊은 잠수 2026. 6. 2. 20:35
자바스크립트에는 프로퍼티 어트리뷰트(Property Attribute)라는 것이 있습니다.이걸 그냥 보면 이해하기 어렵습니다.객체지향 프로그래밍을 먼저 이해해야 프로퍼티 어트리뷰트가 왜 존재하는 것인지, 어떤 역할을 하는건지 감을 잡을 수 있어요. 객체지향 프로그래밍OOP(Object Oriented Programming)라고도 불리는 객체지향 프로그래밍은 소프트웨어 개발 방식의 하나입니다.모든 것을 객체로 보고, 그 객체들이 서로 협력하며 프로그램을 이루어냅니다. 객체지향이 뭐가 좋냐, 하면현실 세계의 개념을 그대로 코드로 가져오기가 쉽습니다. 쇼핑몰 웹사이트를 만들어야 한다고 생각해볼까요?현실 세계의 경우를 먼저 생각해봅시다.소비자가 쇼핑몰에 가서 마음에 드는 상품을 카트에 담고 카운터로 가서 계산하..
-
const를 써라. let을 써야 할 것 같다고? 그럼 다시 한 번 생각해보고 const를 써라.개발/자바스크립트로의 깊은 잠수 2026. 5. 26. 20:32
자바스크립트에서 변수를 선언하기 위해 사용하는 키워드는 세 가지가 있습니다.var, const, let 요렇게 세 가지죠.모던 자바스크립트 Deep Dive 의 책 내용에도 그렇고, 우리 주변 개발자들의 얘기를 들어봐도 var는 이제 쓰지 말라고 합니다.그리고 let 보다는 가능하면 const를 쓰라고 합니다.왜 그런걸까요? var는 쓰지 마라var는 구식 문법입니다. ES6 이전의 버전에서는 변수를 선언하는 방법이 var 밖에 없었기 때문에 var를 썼지만, 이제는 완벽한 상위 호환인 const, let이 있기 때문에 var 를 사용할 이유가 없습니다.var가 발생시킬 수 있는 문제점들엔 어떤 것들이 있을까요? 우선 var는 변수를 중복으로 선언해도 에러가 발생하지 않습니다.아래와 같은 상황이 발생할 ..
-
재귀 함수 왜 써요? 함수의 return과 매개변수, 스코프 200% 활용하기개발/자바스크립트로의 깊은 잠수 2026. 5. 12. 21:36
자바스크립트 Deep Dive의 12장 함수 파트를 읽어보면, 자바스크립트에 관한 내용도 물론 있지만함수라는 프로그래밍 언어 본질적인 녀석에 대한 설명을 많이 마주하게 됩니다. 여기에 나오는 재귀 함수라는 개념을 살펴보고, 이것이 왜 좋은지! 그리고 어떨때 써야 하는지를 간단하게 정리해 보겠습니다. 자기 자신을 반복하는 함수지금은 종료되어버린 알고리즘 사이트 백준에는 재귀함수가 뭔가요? 라는 문제가 있었습니다. 위의 출력 예제처럼, 뭔가 반복되는 구조로 답을 출력해야 하는 문제였습니다. 우리가 프로그래밍을 배울때, 반복되는 것들을 다루기 위한 방법으로 가장 처음 배우는 것은 반복문입니다.반복문은 쉽고 단순하고 강력하죠.그래서 사실 위의 문제는 반복문으로도 풀 수 있어요. function solution..
-
자바스크립트의 함수 알아보기 - 1개발/자바스크립트로의 깊은 잠수 2026. 4. 29. 21:30
자바스크립트도, 여타 프로그래밍 언어들과 마찬가지로 함수를 가지고 있습니다.자바스크립트 함수의 주요한 특징들을 나열하면서, 궁금한 점들을 하나씩 알아보려 합니다. 함수의 본질적 특성수학에서 함수라는 것은 입력을 받으면 출력을 하는 일련의 과정을 정의한 것입니다.자바스크립트에서도 이와 비슷하게 동작합니다. 인수를 받아서 결과값을 반환합니다.그리고 함수의 시작에서부터 결과값이 반환되기까지 그 사이에 있는 코드들을 실행합니다.그리고 함수는 한번 정의해 놓으면 여러 번 호출해서 사용할 수 있습니다. 순수함수가 좋은 이유순수함수라고 하면, 부수효과(side effect)가 없는, 같은 값을 넣으면 항상 같은 결과가 출력되며 외부의 상태가 변경되지 않는 함수를 가리킵니다.개발자로 일하다 보면 "순수함수를 써야 한다..
-
자바스크립트 객체 때문에 에러를 겪는 개발자들을 위한 실무 안내서개발/자바스크립트로의 깊은 잠수 2026. 4. 15. 21:22
거창하게 안내서라고 적어뒀지만 사실은 실무 팁같은 느낌의 글이에요. 자바스크립트의 객체는 잘못 다루기 쉽습니다.다루는 난이도가 높은 것에 비해 쓰기는 쉽죠.우리 개발자들은 실무에서 React, Vue 같은 라이브러리, NestJS 같은 프레임워크가 제공하는 높은 수준으로 추상화된 객체를 빈번하게 다뤄야 합니다.이 과정에서 흔히 발생하는 에러와 원인을 살펴보고, 에러를 방지하기 위해서는 어떤 마음가짐으로 객체를 다뤄야 하는지 정리해 보겠습니다. JavaScript 객체의 특징본격적으로 에러 케이스를 알아보기 전에 JavaScript 객체의 본질적인 특징부터 알아볼까요? - mutable (변경 가능)객체는 한 번 생성된 후에도 내부의 값을 자유롭게 바꿀 수 있어요.const로 선언해도 변수에 담긴 참조..
-
자바스크립트같은 약타입 언어에 강한 컨벤션을 강제하는 건 쓸데없는 짓일까? 그럴거면 다른거 쓰지개발/자바스크립트로의 깊은 잠수 2026. 4. 8. 21:36
객체 리터럴, 그 참을 수 없는 가벼움객체 리터럴이라는 것이 있습니다.자바스크립트에서 객체를 만드는 가장 쉽고 간편한 방법입니다. // 그냥 이렇게 하면 객체 인스턴스가 만들어집니다. 클래스 정의가 필요없습니다.const kimMinji = { name: "김민지",};// 심지어 기존에 없는 프로퍼티도 만들어 넣을 수 있습니다.kimMinji.birthYear = 2004; 이렇게 객체를 생성하는 행위는 강타입 언어에서는 말도 안되는 짓입니다.강타입 언어인 C#의 예시를 보면... // 먼저 클래스를 정의하고...public class Person{ public string Name { get; set; } public int BirthYear { get; set; } publ..
-
자바스크립트의 빈 배열([])은 빈 문자열(""), 0이지만 boolean일 땐 true로 변환되는 이유개발/자바스크립트로의 깊은 잠수 2026. 4. 1. 21:33
JavaScript의 타입 변환 시스템은 봐도봐도 새롭습니다.암묵적 타입 변환이 일어날 수 있어서, 결과를 예측하기 어려운 경우가 많아요.그 중에서도 특히 헷갈리는, 빈 배열 (`[]`)의 타입 변환을 정리해 보았습니다. 빈 배열을 문자열과 숫자로 변환하기먼저 빈 배열을 문자열(string)과 숫자(number)로 각각 변환해 보겠습니다. 객체가 string, number같은 원시값(primitive)으로 변환될 때, 자바스크립트 엔진은 ToPrimitive 추상 연산을 수행합니다.해당 객체에 대해서 `.toString()`과 `.valueOf()`를 순서대로 시도해요. 객체 중에서도, 배열의 `.toString()`은 내부적으로 `Array.prototype.join()`을 먼저 호출합니다.빈 배열을..