본문 바로가기

공부/자바스크립트8

[js] ~ tilde와 ~~ double tilde 프로그래머스 코딩테스트를 풀면서 다른 사람들의 코드를 많이 접하게 됬는 데, 그 중에서 ~~를 사용한 코드를 보고 ~ Bitwise Not (~) 연산자에 대해 정리해보기로 했다. ✨ ~ 연산자 비트를 반전 시킨다. 다른 비트 연산자와 마찬가지로 연산 전에 부호가 있는 32비트 정수로 변경한 후 연산을 진행한다. 자바스크립트는 숫자를 표현할 때, 64 bit 부동소수점 방식을 사용한다. 그러나 모든 비트연산들은 연산 전에 32비트 정수로 변환하고 비트 연산을 진행한다. 연산이 끝난 후, 다시 64비트로 변환한다. ✨ ~를 하나만 쓰는 경우 ~N은 -(N+1)을 반환한다. const a = 5; // 0000 0000 0000 0000 0000 0000 0000 0101 const b = -3; // 11.. 2023. 1. 8.
[js] 프로토타입 체인 🎉 프로토타입 체인이란? 자바스크립트는 객체의 프로퍼티와 메서드에 접근하려고 할 때, 해당 객체에 접근하려는 프로퍼티가 없다면 자신의 프로토타입 참조를 따라가 자신의 부모역할을 하는 프로토타입 객체의 프로퍼티를 순차적으로 검색한다. = 이를 프로토 타입 체인이라고한다. 프로토타입 체인은 프로토타입 기반 객체지향 프로그래밍의 상속을 구현하는 메커니즘이다. 🎉 프로토타입 체인 예시 class Animal { constructor(name) { this.name = name; } getName() { return this.name; } } class Cat extends Animal { say(){ console.log("야옹"); } } Cat 클래스의 인스턴스인 cat이 어떻게 Animal 클래스가 가지고.. 2022. 11. 21.
[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.

티스토리툴바