[JavaScript(12)] 생성자 함수? 객체 리터럴과의 차이
·
웹 개발/Javascript
안녕하세요~ 경제적 자유입니다.오늘은 JavaScript의 생성자함수와 new 연산자를 리뷰해보려고 합니다. OverViewJavaScript에서 객체를 만들 때 가장 먼저 배우는 방법은 보통 객체 리터럴입니다. 그런데 비슷한 구조의 객체를 여러 개 만들어야 한다면 어떨까요? 이럴 때 사용할 수 있는 방법이 바로 생성자 함수와 new 연산자입니다. 쉽게 말하면 생성자 함수는 객체를 찍어내는 설계도이고, new는 그 설계도를 이용해서 새 객체를 실제로 만드는 버튼이라고 볼 수 있습니다. 추가로 더 자세히 공부하고 싶다면 아래 MDN 문서를 참고해보세요.참고 링크: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/new 개..
[JavaScript(11)] 가비지 컬렉션, 메모리는 언제 사라질까?
·
웹 개발/Javascript
안녕하세요~ 경제적 자유입니다.오늘은 JavaScript의 가비지 컬렉션(Garbage Collection)을 리뷰해보려고 합니다. OverViewJavaScript로 코드를 작성하다 보면 객체, 배열, 함수 같은 값을 계속 만들게 됩니다.그런데 우리가 만든 값들이 영원히 메모리에 남아 있다면 어떻게 될까요? 처음에는 괜찮아 보이지만, 사용하지 않는 값들이 계속 쌓이면 프로그램이 느려지거나 메모리를 많이 차지하게 됩니다.그래서 JavaScript 엔진은 더 이상 사용할 수 없는 값을 자동으로 찾아서 정리합니다. 이 자동 정리 시스템을 가비지 컬렉션이라고 합니다. 추가로 더 자세히 공부하고 싶다면 아래 MDN 문서를 참고해보세요.참고 링크: https://developer.mozilla.org/ko/do..
[JavaScript(10)] 객체 복사(Object.assign()과 structuredClone())
·
웹 개발/Javascript
안녕하세요~ 경제적 자유입니다.오늘은 JavaScript의 객체 복사를 리뷰해보려고 합니다. OverViewJavaScript에서 객체를 다루다 보면 이런 상황을 자주 만나게 됩니다. let user = { name: "상구", age: 20,};let copyUser = user;copyUser.age = 30;console.log(user.age); // 30JavaScript에서 객체는 값 자체가 복사되는 것이 아니라, 객체가 있는 위치를 가리키는 참조가 복사되기 때문입니다. 추가로 더 자세히 공부하고 싶다면 아래 MDN 문서를 참고해보세요.참고 링크: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Object..
[JavaScript(9)] 객체, 프로퍼티와 메서드
·
웹 개발/Javascript
안녕하세요~ 경제적 자유입니다.오늘은 JavaScript의 객체를 리뷰해보려고 합니다. OverView 객체는 쉽게 말하면 여러 정보를 하나의 상자에 담아두는 자료구조라고 볼 수 있습니다.예를 들어 사람 한 명을 표현할 때 이름, 나이, 직업, 취미를 각각 따로 변수로 만들 수도 있지만, 객체를 사용하면 하나로 묶어서 관리할 수 있습니다. let person = { name: "상구", age: 20, job: "student", hobby: "coding",};이렇게 하면 person이라는 하나의 객체 안에 상구라는 사람의 정보가 정리됩니다. 그리고 오늘 같이 볼 중요한 개념이 하나 더 있습니다.바로 객체 복사입니다. 객체는 원시값처럼 단순히 값 자체가 복사되는 것이 아니라, 기본적으로 참조를..
[JavaScript(8)] 코드품질을 높이는 방법
·
웹 개발/Javascript
안녕하세요~ 경제적 자유입니다.오늘은 JavaScript의 디버깅, 코딩 스타일, 주석, 닌자코드를 리뷰해보려고 합니다. OverView지금까지 변수, 함수, 배열 메서드, 객체 같은 문법을 공부했다면, 이제는 “코드를 어떻게 더 잘 작성하고, 어떻게 문제를 찾고, 어떻게 안정적으로 유지할 것인가?”를 생각해야 합니다. 하지만 조금 더 공부하다 보면 이런 고민이 생깁니다.“왜 에러가 났지?”“내 코드가 다른 사람이 봐도 이해될까?”“주석은 많이 쓰는 게 좋은 걸까?”“내 함수가 진짜 제대로 동작하는지 어떻게 확인하지?”“최신 문법을 쓰면 모든 브라우저에서 동작할까?”오늘 다룰 내용은 바로 이런 질문들과 연결됩니다. 쉽게 말하면, JavaScript 문법이 “재료”라면, 디버깅, 코딩 스타일은 그 재료를..
[JavaScript(7)] 함수
·
웹 개발/Javascript
안녕하세요~ 경제적 자유입니다.오늘은 JavaScript의 함수 기초, 함수 표현식, 화살표 함수를 리뷰해보려고 합니다. OverView JavaScript를 공부하다 보면 function, const sayHi = function() {}, () => {} 같은 문법을 자주 만나게 됩니다.처음 보면 “다 함수 같은데 왜 이렇게 여러 가지 방식이 있지?”라는 생각이 들 수 있습니다. 쉽게 말하면 함수는 자주 사용하는 코드를 하나의 상자에 담아두는 것과 비슷합니다.예를 들어 “인사하기”라는 기능을 여러 번 써야 한다면, 매번 console.log("안녕하세요")를 쓰는 대신 함수로 만들어두고 필요할 때마다 꺼내 쓸 수 있습니다. 추가로 더 자세히 공부하고 싶다면 아래 MDN 문서를 참고해보세요.참고 링크..