충격적인 코드를 하나 보면서 시작해 봅시다..const circle = { radius: 5, getDiameter() { return 2 * circle.radius; // 이 객체가 할당될 식별자 이름 circle을 미리 참조하고 있다! }};circle.getDiameter();이런 짓이 가능하다는 것에 적잖은 충격을 받았지만…아무튼 위와 같이 객체 리터럴로 인스턴스를 생성하면 같은 형태의 인스턴스들을 많이 뽑아내는 것이 어렵습니다.radius 프로퍼티와 getDiameter() 메서드를 가진 인스턴스를 여러 개 만드려면 매번 똑같은 객체를 다시 적어줘야 하기 때문에 코드 중복이 너무 많겠죠.그래서 본래 목적대로 효율적인 재사용을 하기 위해서는 생성자 함수 또는 (추후 배울) class를..
최근 글
-
JS Deep Dive 22장. this자바스크립트로의 깊은 잠수 2026.07.14 20:43
충격적인 코드를 하나 보면서 시작해 봅시다..const circle = { radius: 5, getDiameter() { return 2 * circle.radius; // 이 객체가 할당될 식별자 이름 circle을 미리 참조하고 있다! }};circle.getDiameter();이런 짓이 가능하다는 것에 적잖은 충격을 받았지만…아무튼 위와 같이 객체 리터럴로 인스턴스를 생성하면 같은 형태의 인스턴스들을 많이 뽑아내는 것이 어렵습니다.radius 프로퍼티와 getDiameter() 메서드를 가진 인스턴스를 여러 개 만드려면 매번 똑같은 객체를 다시 적어줘야 하기 때문에 코드 중복이 너무 많겠죠.그래서 본래 목적대로 효율적인 재사용을 하기 위해서는 생성자 함수 또는 (추후 배울) class를..
-
JS Deep Dive 20장. strict mode자바스크립트로의 깊은 잠수 2026.07.07 19:47
자바스크립트에는 strict mode라는 기능이 있습니다.앞선 장에서 살펴봤듯이, 자바스크립트는 높은 자유도를 가진 언어입니다. 최대한 에러를 발생시키지 않는 쪽으로 설계되어 있죠.하지만 에러가 발생하지 않으면 문제가 생겼을 때 원인을 찾기가 정말 어려워집니다. 어디가 잘못되었는지 콘솔에 안 찍히기 때문이에요.그래서 에러를 일부러 발생시키는, 좀 더 엄격한 모드인 strict mode가 ES5부터 추가되었어요. strict mode 사용법전역의 맨 첫줄 또는 함수 몸체의 맨 첫줄에 'use strict'; 를 추가하면 됩니다. strict mode가 발생시켜주는 에러암묵적 전역 방지선언하지 않은 변수를 참조했을 때 ReferenceError를 발생시킵니다.원래는 선언 없이 x = 1; 같은 짓을 했을때 ..
-
JS Deep Dive 18장. 함수와 일급 객체자바스크립트로의 깊은 잠수 2026.06.16 20:19
개념 알아보기아래 조건을 만족하는 객체를 일급 객체라고 합니다. - 무명의 리터럴로 생성할 수 있다. 즉 런타임 생성이 가능하다.- 변수 또는 자료구조(객체, 배열)에 저장할 수 있다.- 함수의 매개변수에 전달할 수 있다.- 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 위 조건들을 모두 만족하므로 일급 객체입니다. 함수는 일급 객체이므로, 함수는 객체처럼 쓸 수 있습니다.또 객체는 값이므로 함수는 값처럼 쓸 수 있습니다.따라서 함수는 값이 들어갈 수 있는 자리에 다 들어갈 수 있어요.(변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문 등) 함수가 일급 객체면 뭐가 좋냐, 바로 함수형 프로그래밍이 가능하다는 것입니다.아래와 같은 짓을 할 수 있어요. functi..
-
자바스크립트의 함수를 잘못 사용하는 방법자바스크립트로의 깊은 잠수 2026.06.09 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.06.02 20:35
자바스크립트에는 프로퍼티 어트리뷰트(Property Attribute)라는 것이 있습니다.이걸 그냥 보면 이해하기 어렵습니다.객체지향 프로그래밍을 먼저 이해해야 프로퍼티 어트리뷰트가 왜 존재하는 것인지, 어떤 역할을 하는건지 감을 잡을 수 있어요. 객체지향 프로그래밍OOP(Object Oriented Programming)라고도 불리는 객체지향 프로그래밍은 소프트웨어 개발 방식의 하나입니다.모든 것을 객체로 보고, 그 객체들이 서로 협력하며 프로그램을 이루어냅니다. 객체지향이 뭐가 좋냐, 하면현실 세계의 개념을 그대로 코드로 가져오기가 쉽습니다. 쇼핑몰 웹사이트를 만들어야 한다고 생각해볼까요?현실 세계의 경우를 먼저 생각해봅시다.소비자가 쇼핑몰에 가서 마음에 드는 상품을 카트에 담고 카운터로 가서 계산하..
-
const를 써라. let을 써야 할 것 같다고? 그럼 다시 한 번 생각해보고 const를 써라.자바스크립트로의 깊은 잠수 2026.05.26 20:32
자바스크립트에서 변수를 선언하기 위해 사용하는 키워드는 세 가지가 있습니다.var, const, let 요렇게 세 가지죠.모던 자바스크립트 Deep Dive 의 책 내용에도 그렇고, 우리 주변 개발자들의 얘기를 들어봐도 var는 이제 쓰지 말라고 합니다.그리고 let 보다는 가능하면 const를 쓰라고 합니다.왜 그런걸까요? var는 쓰지 마라var는 구식 문법입니다. ES6 이전의 버전에서는 변수를 선언하는 방법이 var 밖에 없었기 때문에 var를 썼지만, 이제는 완벽한 상위 호환인 const, let이 있기 때문에 var 를 사용할 이유가 없습니다.var가 발생시킬 수 있는 문제점들엔 어떤 것들이 있을까요? 우선 var는 변수를 중복으로 선언해도 에러가 발생하지 않습니다.아래와 같은 상황이 발생할 ..
-
재귀 함수 왜 써요? 함수의 return과 매개변수, 스코프 200% 활용하기자바스크립트로의 깊은 잠수 2026.05.12 21:36
자바스크립트 Deep Dive의 12장 함수 파트를 읽어보면, 자바스크립트에 관한 내용도 물론 있지만함수라는 프로그래밍 언어 본질적인 녀석에 대한 설명을 많이 마주하게 됩니다. 여기에 나오는 재귀 함수라는 개념을 살펴보고, 이것이 왜 좋은지! 그리고 어떨때 써야 하는지를 간단하게 정리해 보겠습니다. 자기 자신을 반복하는 함수지금은 종료되어버린 알고리즘 사이트 백준에는 재귀함수가 뭔가요? 라는 문제가 있었습니다. 위의 출력 예제처럼, 뭔가 반복되는 구조로 답을 출력해야 하는 문제였습니다. 우리가 프로그래밍을 배울때, 반복되는 것들을 다루기 위한 방법으로 가장 처음 배우는 것은 반복문입니다.반복문은 쉽고 단순하고 강력하죠.그래서 사실 위의 문제는 반복문으로도 풀 수 있어요. function solution..
-
자바스크립트의 함수 알아보기 - 1자바스크립트로의 깊은 잠수 2026.04.29 21:30
자바스크립트도, 여타 프로그래밍 언어들과 마찬가지로 함수를 가지고 있습니다.자바스크립트 함수의 주요한 특징들을 나열하면서, 궁금한 점들을 하나씩 알아보려 합니다. 함수의 본질적 특성수학에서 함수라는 것은 입력을 받으면 출력을 하는 일련의 과정을 정의한 것입니다.자바스크립트에서도 이와 비슷하게 동작합니다. 인수를 받아서 결과값을 반환합니다.그리고 함수의 시작에서부터 결과값이 반환되기까지 그 사이에 있는 코드들을 실행합니다.그리고 함수는 한번 정의해 놓으면 여러 번 호출해서 사용할 수 있습니다. 순수함수가 좋은 이유순수함수라고 하면, 부수효과(side effect)가 없는, 같은 값을 넣으면 항상 같은 결과가 출력되며 외부의 상태가 변경되지 않는 함수를 가리킵니다.개발자로 일하다 보면 "순수함수를 써야 한다..