본문 바로가기

전체 글57

[js] 프로토타입 자바스크립트를 프로토타입 기반 객체 지향 언어라고 한다. 이 글은 프로토타입이 무엇인지에 대해 공부한 내용을 일부분 정리한 내용이다. 프로토타입 객체란? 프로토타입(원형)은 어떤 객체의 부모 역할을 하는 객체를 말한다. 프로토타입 객체는 객체 간의 상속을 구현하기 위해 자바스크립트가 사용한다. 즉, 객체는 자신의 부모 객체인 프로토타입에 존재하는 식별자들을 사용할 수 있다는 말이다. 그럼 프로토타입은 어디에 저장되어있을까? 모든 객체는 자신의 부모 역할을 하는 프로토타입을 가지고 있다. 그렇다면 어디에 저장되어 있는 것일까? 모든 객체는 [[Prototype]] 이라는 내부 슬롯이 존재한다. 여기에 프로토타입 참조를 가지고 있다. 내부 슬롯은 자바스크립트 엔진을 위한 영역으로, 개발자가 직접 접근할 수 .. 2022. 11. 18.
[js] 객체지향 프로그래밍 객체 지향 프로그래밍 프로그램을 명령어의 조합으로 보는 절차적 관점에서 벗어나 표현하고자 하는 실체가 가지는 속성들을 객체로 묶어서 표현하는 프로그래밍 방식을 객체 지향 프로그래밍이라고 한다. 즉, 실체가 가지는 속성(데이터와 기능)을 하나로 묶어서 표현한다. 실체란 프로그래밍을 통해 표현하고자 하는 모든 것을 의미한다. ex ) 사람(실체) / 속성(이름,성별, 말한다, 달린다, 뛴다 ...) 객체 지향 프로그래밍의 주요 개념 4가지 캡슐화 데이터(속성)과 기능(메서드)를 따로 정의하는 것이 아니라 하나로 묶는 것을 의미한다. 정보 은닉 세부 구현이 외부로 드러나지 않도록 감추는 것이다. 필요한 메서드만 외부로 노출 시켜, 만약 객체 내부의 구현을 수정하더라도 노출된 메서드를 사용하는 코드 흐름은 바뀌.. 2022. 11. 18.
[js]자바스크립트 클래스 클래스와 인스턴스 클래스 객체지향 프로그래밍에서 객체를 생성하기 위한 청사진, 설계도를 의미한다. 인스턴스 클래스를 사용해 생성한 객체를 인스턴스라고 한다. 자바스크립트의 객체지향 프로그래밍 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어다. 따라서 다른 객체 지향 프로그래밍 언어들과 다르게 클래스를 사용하지 않고 객체지향 프로그래밍을 할 수 있다. 물론 ES6에 클래스 문법이 생기면서 클래스를 사용할 수 있다. 단, 클래스를 사용하더라도 프로토타입을 기반으로 객체지향 프로그래밍을 구현한다는 점은 변하지 않는다. 따라서 자바스크립트에는 재사용가능한 객체를 생성할 때, 클래스를 사용하는 방식과 생성자 함수를 사용하는 방식 두 가지가 존재한다. 편리함은 클래스가 더 편하다. 클래스 기반과 프로토타입 .. 2022. 11. 18.
[js] 객체 구조 분해 할당과 얕은 복사 방식들 객체 구조 분해 할당 오늘 페어 활동을 하면서 객체 구조 분해 할당에서 처음보는 문법 형식을 접할 수 있었다. 객체를 구조 분해 할당 할 때, 분해 받는 오브젝트의 프로퍼티를 내가 원하는 이름으로 가져올 수 있었다. // 코드 출처 - https://ko.javascript.info/destructuring-assignment#ref-47 let options = { title: "Menu", width: 100, height: 200 }; // { 객체 프로퍼티: 목표 변수 } let {width: w, height: h, title} = options; console.log(w); console.log(h); console.log(title); 따라서 width라는 프로퍼티를 w라는 변수로 사용할 수.. 2022. 11. 9.
[js] 원시자료형과 참조자료형의 차이 자바스크립트의 타입은 크게 두 가지로 구분한다. 오늘은 참조형과 자료형의 차이에 대해서 간략히 정리해보았다. 원시자료형 - Number, String, Boolean, null, undefined, Symbol, BigInt 참조자료형 - 객체, 배열 간단한 타입에대한 내용은 이전 글을 참조 참조자료형은 왜 생겼을까? 참조 자료형은 대량의 데이터를 사용하고 싶기때문에 등장했다. 기존의 자료형은 하나의 변수가 하나의 값만 가지고 있다. let apple = "사과"; 그러나 사과 한개가 아니라 여러가지 과일을 표현하고 싶을 때, 위처럼 하나의 변수에 하나의 값만 넣어서 사용할 수 있는 구조는 매우 불편하다. let fruit = "사과, 바나나, 복숭아, ..., 메론" // 사용하기 위해서는 ,를 구분해.. 2022. 11. 7.
[js] "1" + "1" = "11"인 이유 📢 개인 공부용으로 작성된 내용임으로 잘못된 부분이 있을 수 있습니다. 잘못된 부분을 알려주시면 빠른 시일 안에 수정하겠습니다. 감사합니다. 자바스크립트에서 "1"과 "1"을 더하면 "11"이 된다. 그러나 "1" - "1"은 0이 된다. 이렇게된다는 것은 알지만, 왜 그런지는 잘 모르겠어서 이번 주 블로그 주제로 결정했다. + 연산자와 - 연산자 먼저, +연산자와 -연산자가 무엇이 다른지 찾아봤다. Addition + 연산자 The addition operator (+) produces the sum of numeric operands or string concatenation. - mdn MDN을 보면 + 연산자는 두 가지 기능을 가지고 있다. 숫자를 더하는 기능 문자열을 이어붙이는 기능 Subtra.. 2022. 11. 5.

티스토리툴바