javascript 35

2, 8, 16진법과 비트 연산

parseInt와 toString은 숫자를 진법으로 변환하는 함수이다. 이러한 진법을 표기하는 방법이 있는데, 2진법은 0b, 8진법은 0o, 16진법은 0x를 사용하는 것이다. 해당 표기법의 타입은 number이다. 해당 연산자는 비트를 연산하여 10진법의 숫자로 반환한다. ⚪ 비트 연산자 컴퓨터는 32비트 2진법으로 구성되어 있기 때문에 0과 1로 구성된 비트로 연산이 진행된다. 비트 연산을 통해, 새로운 비트를 만들고 10진법으로 반환한다. ⚫ & 같은 위치에 있는 비트를 비교해서 둘 다 1일 경우에 1로 치환하고, 이외에는 0으로 치환한다. ⚫ | 같은 위치에 있는 비트를 비교해서 하나라도 1일 경우 1로 치환한다. ⚫ ^ 같은 위치에 있는 비트를 비교해서 같은 값일 경우 0 아닐 경우 1로 치환..

TIL/JS 2023.03.28

JSON

JSON은 컴퓨터가 이해 할 수 있도록, 포맷된 데이터 형식이다. JSON은 Javascript Object Notation의 약자로, Javascript 에서 영감을 얻어 만들었기 때문에, 생김이 비슷하다. ⚪ JSON.stringify() Json의 정적 메서드인 stringify를 사용해서, 직렬화를 할 수 있다. 직렬화 한 상태의 타입은 string이다. ❗ Infinity, NaN는 Json을 했을 시, null로 직렬화된다. new Date()는, JavaScript와 달리, 9시간 시차가 나기 때문에 정확성이 부족하다. Symbol과 함수는 undefined가 되어, 해당 프로퍼티를 제외하고 stringify된다. BigInt는 오류가 난다. Json에서 undefined가 반환되면, 해당 ..

TIL/JS 2023.03.28

Symbol

Symbol을 검색 해 보면 절대 중복되지 않는 유일무이한 값이라고 설명 되어 있다. 그런데 공부를 해 보니, 이 말로 Symbol을 설명하기엔 부족 하다고 느꼈다. Symbol은 주로 키로 사용한다. 이유는 외부로 부터 접근을 차단 할 수 있기 때문이다. Symbol 데이터 타입을 그대로 key로 넣는다면, Object.prototype.includes처럼, 같은 데이터로 인식하지 않는다. 객체는 무조건, 주소가 들어가 있기 때문에 보기에는 같아보여도 결국 다른 값이라는 것이 여기서도 나온다. const obj = { user: 'abcd', [Symbol('passowrd')]: 123, } console.log(obj); // { user: 'abcd', [Symbol(passowrd)]: 123 ..

TIL/JS 2023.03.27

Object methods

Object 또한 빌트인 객체로, new 키워드를 사용해서 인스턴스를 만들 수 있다. 하지만, 모든 객체의 부모는 Object이기 때문에, 이미 Object의 instance다. 특이점은, new 키워드를 통해 데이터를 초기화하면, 데이터 타입에 따라 prototype으로 분리한다. 💡 prototype으로 분리된다는 것이지, 데이터 타입이 바뀐다는 것이 아님을 유의하자. const arr = new Object([1, 2, 3]); console.log(arr, typeof arr); // [Array]object const num = new Object(1); console.log(num, typeof num); // [Number]object const bool = new Object(true); ..

TIL/JS 2023.03.24

디스트럭쳐링 접근

배열의 고차함수를 공부하다 보니 디스트럭쳐링은 다양한 방식으로 사용되는 것을 발견했다. 디스트럭쳐링은 기존에 키에 접근하는 방식과 다른 문법을 사용하여 키에 접근 할 수 있는 방법이다. 가장 기초적으로는, ES6의 새로운 문법으로 사용된다. 기존의 key를 새로운 변수명과 같게하고, key의 value도 똑같이 가져오고자 할 때이다. const obj = {x: 1, y: 2}; const {x, y} = obj; console.log(x, y); // 1, 2 함수에서 key를 전달받아 작업할 때 사용한다. function introduce ({name, age}) { return `나는 ${age}살 ${name}야.` } const child = { name: 'Nora', age: 8 }; con..

TIL/JS 2023.03.24

배열의 고차함수 메서드

배열에는 prototype method가 있다. 그런데 그 중에서도, 콜백 함수를 인자로 받아 특정한 알고리즘을 거쳐주는 메서드가 있는데, 이를 함수에서 배운 고차함수 메서드 라고 한다. 배열의 고차함수는 일반 함수에서의 고차함수는 차이점이 있다. 본래 함수에서 고차함수에 콜백함수가 전달 될 때는 콜백 함수를 호출 해야 return이 된다. 하지만, 배열의 고차함수는 내부적으로 알아서 호출하고, 요소에 접근해서 return까지 해준다. 이러한 편리함 측면에서, 일회성 기능을 수행 할 때는 함수보타 고차함수를 사용한다. 💡고차 함수는 보통 3개의 인자를 받는다. (itm, idx, arr) itm은 배열의 요소이며, idx는 인덱스, arr는 실제 참조하고 있는 배열이다. 따라서, arr를 이용 할 경우 ..

TIL/JS 2023.03.24

스프레드, 디스트럭쳐링

⚪스프레드 배열과 객체를 복사해야 하는 경우가 있다. 배열 같은 경우 for of는 값을 참조하는 것이기 때문에 사용 할 수 없고, for문은 많은 데이터를 돌리는데 시간적으로 효율적이지 않다. 객체의 경우에도 값을 복사하기 위해서는 key와 복잡하다. 물론 지원하는 메서드를 사용 할 수도 있지만 그것보다 더 쉽게 복사 할 수 있는 방법이 스프레드다. 스프레드는 값을 복사 할 뿐만 아니라 얕은 복사이기 때문에 값을 변경하더라도 원본이 변경되지 않는다. 얕은 복사이지만 할당하여 주소를 복사하는 방식과는 다른 복사이다. // const a = b; ⚪ 디스트럭쳐링 기존에 식별자에 값을 할당하는 구조적에서 벗어나 원본의 키를 식별자와 값으로 복사해 오는 것을 말한다. 키를 복사하는 것이기 때문에 배열 경우 l..

TIL/JS 2023.03.23

class 상속, super

최근에 유튜브를 보다가 현직 개발자 유튜버가 한 말이 인상 깊었었다. 개발자는 사람이 반복작업을 하는 일을 컴퓨터에게 시키는 사람이다. 라는 말이였다. 개발자는 단순 타이핑을 하는 프로세스를 가만히 볼 수만 없다는 뜻이 된다. 이 말을 잘 설명 해 줄 수 있는 것이 오늘 공부한 class의 상속과 super개념이라고 생각한다. class는 extedns라는 키워드를 통해 부모 클래스, 자식 클래스로 분리가 되며, 자식은 부모의 속성을 물려받을 수 있다. 때문에, 반복 타이핑을 하지 않고도, 속성과 메서드를 끌어와 마치 내것 처럼 사용 할 수 있다. ⚪ 부모 클래스의 속성을 가져오는 방법 extends 키워드를 통해 가져온다. 생성된 인스턴스는 부모의 속성과 메서드와 자신의 속성과 메서드를 가질 수 있다...

TIL/JS 2023.03.23

Array static method, prototype method

Static Method ⚪ Array.isArray() Array를 생성하는 정적 메서드 제외하고 유용한 메서드 isArray가 있다. isArray는 isNaN처럼 Array 여부에 따라 불리언으로 반환한다. 💡 Array는 생성자 함수를 쓰지 않더라도 내부적으로 사용 해 만든걸로 쳐진다. 때문에 instanceof Array와 isArray는 같은 기능을 한다. 하지만, 기존에 있던 배열 형태는 instance로 생성되는 것이 아니기 때문에 false가 나온다. MDN문서에서도 instanceof보다는 isArray를 사용 하는 것을 권장하고 있다. const arrays = [ [], [1, 2, 3], new Array(), Array.prototype // Array.prototype은 ins..

TIL/JS 2023.03.22

Math

Math는 생성자 함수로서 기능을 하지 않는다. 정적 프로퍼티와 메서드를 가지고 있다. Static Property ⚪ Math.PI PI의 값 ⚪ Math.E 자연로그의 밑 Static Methods ⚪ Math.abs() 절대값을 나타낸다. ⚪ Math.min(), Math.max() 여러개의 인자를 전달 받아, 최소값, 최대값을 찾아낸다. ⚪ Math.ceil(), Math.round(), Math.floor(), Math.trunc() 실수를 올림, 반올림, 내림, 정수부로 나타낸다. ⚪ Math.pow() 두가지 인자를 전달 받아, 제곱을 한다. A ** B 와 같은 기능이다. ⚪ Math.sqrt() 한 개의 인자를 전달받아, 제곱근을 한다. ⚪ Math.random() 0~1 사이의 무작위 ..

TIL/JS 2023.03.22