JavaScript에서 forEach나 map을 사용할 때 메서드의 콜백 함수는 인자로 배열의 각 요소에 대한 참조를 받게 되는데, 이는 배열 안의 객체 자체를 가리키는 참조를 의미합니다.그럼 그 인자를 재할당 하면 원본 배열의 요소가 바뀔까요?let array = [{ a: 1 }, { b: 2 }];array.forEach(item => { item = { c: 3 }; // 새 객체로 재할당});결론부터 말하자면 바뀌지 않습니다. 이유console.log(array); // [{ a: 1 }, { b: 2 }]item 이라는 지역 변수가 참조(주소)값을 가지고 있어서 원본을 변경 할 수 있다고 착각할 수 있지만 이 재할당은 지역 변수의 값을 변경할 뿐, 원본 배열에 영향을 주지 않습니다.const..

우리가 작성한 JavaScript코드는 웹브라우저의 엔진을 통해 해석하고 실행합니다. 하지만 자바스크립트 엔진만으로 충분하지 않아서 브라우저가 제공하는 JS런타임 환경이 Web API, Queue, Event Loop 등을 동원합니다. Runtime 자바스크립트 엔진(Single Thread) 자바스크립트 엔진 중 가장 유명한 것이 크롬의 V8엔진입니다. V8엔진은 크롬과 node.js 등 에서 사용됩니다. V8엔진을 간단히 표시한 모습은 이렇습니다. V8엔진은 크게 두 부분으로 구성됩니다. 메모리 힙(Memory Heap): 메모리 힙은 변수 및 객체들을 메모리 할당하는 공간입니다. 콜 스택(Call Stack): 코드가 실행되면서 스택 프레임이 쌓이는 곳입니다. JS Engine은 단 하나의 Call..

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다. — 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 한 객체에 정의된 메소드와 속성을 다른 객체에서 사용할 수 있도록합니다. 프로토타입 체인이란? 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있습니다. JavaScript에서는 객체 인스턴스와 프로토타입 간에 연결(많은..

💡 프로토타입 JavaScript에서 상속을 위해 사용하는 매커니즘 클래스 JavaScript에는 class가 없기 때문에 생성자 함수를 사용해서 그 역할을 대신합니다. class Human { constructor(name, age) { this.name = name; this.age = age; this.sayHello = function() { console.log(this.name + " said hello"); } } } new 키워드를 이용해 Human생성자 함수를 실행하고 전달 인자로 name과 age를 줍니다. let steve = new Human('steve', 30); steve.sayHello(); // "steve said hello" let kim = new Human("kim"..

💡 객체 지향 프로그래밍(object-oriented programming) 프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아니라, 프로그램을 수많은 '객체(object)'라는 기본 단위로 나누고 이들의 상호작용으로 서술하는 방식 객체란? 하나의 역할을 수행하는 '데이터(속성)와 기능(메서드)'의 묶음 객체 지향 프로그래밍의 탄생 초기 프로그래밍 방식은 절차적 프로그래밍 방식이었다. 입력을 받아 명시된 순서대로 처리한 다음, 그 결과를 출력하는 것으로 명령어의 모음일 뿐이었다. 이 방식은 프로그램이 조금만 복잡해지면 순서도로 나타내는것이 불가능할 정도로 꼬인 “스파게티 코드”를 만들게 된다. 객체 지향 프로그래밍은 이것을 상향식(Bottom-up) 해결법을 통해 해결한다. 작은 문제들을 해결할 수..

💡 객체 지향 프로그래밍 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴. 청사진은 클래스(class)라고 부르고, 청사진을 바탕으로 만든 객체를 인스턴스 객체(instance object) 줄여서 인스턴스 라고 부른다. 클래스를 만드는 방법 ES5이전 문법 function Car(brand, name, color) { this.brand = brand; this.name = name; this.color = color; } // 속성 Car.prototype.refuel = function(){ return "연료 공급"; } // 메서드 Car.prototype.drive = function(){ return "운전 시작"; } // 메..

Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미 코드스테이츠 JavaScript Koans 파트에서 새로 배운 개념들을 정리해 보았다. Types tricky parts of JavaScript console.log(1 + "1") // "11" console.log(123 - "1") // 122 console.log(1 + true) // 2 console.log("1" + true) // "1true" 자바스크립트에는 다소 이해하기 힘든 부분들이 존재한다. 자바스크립트의 별난 부분들을 따로 모아둔 저장소도 있다. https://github.com/denysdovhan/wtfjs 함수의 전달인자 let num = 10; function addTen(num..

원시 자료형(primitive data types) 스택(stack)이라고 불리는 사물함이 있다 원시 자료형은 사물함에 변수라는 이름표를 달고 할당된 값을 사물함에 넣는다. string, number, bigint, boolean, undefined, symbol, (null) 과 같은 타입들이 원시자료형에 해당한다. 원시 자료형은 모두 "하나"의 의미를 가진 데이터만을 담고 있다. 변수에는 크기와 관계없이 하나의 데이터만 담을 수 있다. 그렇기 때문에 원시 자료형이 담기는 보관함의 크기는 고정된다. 원시 자료형은 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 데이터를 할당할 수는 있다. 참조 자료형(reference data type) JavaScript에서 원시 자료형이 아닌 ..

JavaScript의 변수 선언 방식 변수는 선언 → 초기화 → 할당 단계에 걸쳐 생성된다. 선언: 변수명을 메모리에 연결시키는 것 초기화: 값을 저장하기 위한 메모리 공간을 확보하는 것 할당: 변수에 값을 저장하는 것 재선언 재할당 스코프 var O O 함수 레벨 let X O 블록 레벨 const X X 블록 레벨 var var의 가장 큰 특징은 재선언이 가능하다는 것이다. var a = 1; console.log(a) // output: 1 var a = 2; console.log(a) // output: 2 var a = 3; console.log(a) // output: 3 같은 변수명으로 여러번 선언이 가능하기 때문에 이미 사용하고 있던 변수를 실수로 재선언 해버린다고 해도 알 수 있는 방법이..

JavaScript의 타입 JavaScript 언어의 타입은 원시 값과 객체로 나뉩니다. ·원시 값 (언어의 최고 로우레벨에서 직접 표현되는 불변 데이터) 1. Boolean 타입 2. Null 타입 3. Undefined 타입 4. Number 타입 5. BigInt 타입 6. String 타입 7. Symbol 타입 ·객체 (속성의 컬렉션) 참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures typeof 연산자란? typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다. typeof 연산자 사용법 typeof 값; typeof 연산자 다음에 타입을 확인하고자 하는 값을 넣어줍니다. 개발자 도구를 이용..