4전 4전

| ~ 연산자 자바스크립트에서 "~" 연산자는 비트반전 연산자입니다. 피연산자의 모든 비트를 반전시키고, 그 결과를 반환해 줍니다. 예를 들어 5라는 숫자가 있다고 해봅시다. 5를 32비트 이진수로 나타내면 '00000000000000000000000000000101'인데 ~5라고 사용하면 각 비트를 반전시켜서 '11111111111111111111111111111010'이 됩니다. 이를 10진수로 변환하면 -6이 되는 거입니다. console.log(~5) // -6출력 | ~~ 연산자 "~~" 연산자는 "~" 연산자를 두 번 적용하는 연산자입니다. ~5는 -6이 되는 거고 ~~5는 다시 5가 되는 거입니다. 근데 "~" 연산자를 사용하면 소수점이 날아가기 때문에 피연산자의 소수 부분을 제거하고 정수 ..

| extends extends는 내가 만든 class를 상속한 또 하나의 class를 만들고 싶을 때 사용할 수 있습니다. // class 생성 class User { constructor(name, age) { this.name = name; this.age = age; } } // class User를 기반으로한 새로운 class User2 생성 class User2 extends User { } let me = new User('Lee', 26); // { name: 'Lee', age: 26 } let me = new User2('Lee', 26); // { name: 'Lee', age: 26 } 이런 식으로 원하는 class를 복사한 또 하나의 class를 만들 수 있습니다. | super ..

자바스크립트에서 Array나 Object 자료형에 있는 데이터를 쉽게 꺼내고 싶을 때 destructuring 문법을 사용하면 쉽게 할 수 있습니다. | 사용 1. Array 안에 있는 데이터를 변수에 담기 let [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1 2 3 출력 이런 식으로 사용하면 각 변수에 배열 데이터가 담깁니다. 또한 기본값을 지정할 수도 있습니다. let [a, b, c = 3] = [1, 2]; console.log(a, b, c); // 1 2 3 출력 2. Object 안에 있는 데이터를 변수에 담기 let data = { info: { name: '4전', age: 25, address: { city: 'New York', state: ..

자바스크립트에서 async/await는 코드의 비동기처리를 도와줍니다. 콜백함수와 promise도 비동기 처리를 도와주지만 async/await를 사용하여 좀 다른 방식으로 구현할 수 있습니다. | 사용 1. async 사용하기 위해서 함수 앞에 async 키워드를 넣어줘야 합니다. 그럼 그 함수는 항상 promise를 반환해서 then()을 이용해 실행시킬 수 있습니다. async function 함수() { return 1; } 함수().then((result)=>{ console.log(result) }) // 1출력 2. await await는 async함수 내부에서만 사용할 수 있는데 promise앞에 써주면 해당 promise의 작동이 끝날 때까지 기다린 다음에 다음 코드를 실행해 줍니다. a..

자바스크립트에서 promise는 비동기작업을 쉽게 할 수 있게 도와주는 기능입니다. 콜백함수로 비동기 처리를 할 수 있지만 작업이 많으면 코드가 복잡해지기 때문에 Promise를 사용할 수 있습니다. | 사용 먼저 Promise를 만들려면 new Promise() 문법으로 변수 오브젝트를 하나 생성하면 됩니다. let 프로미스 = new Promise(function(resolve, reject){ }); 프로미스.then(function(){ }).catch(function(){ }) 이런 식으로 사용하면 되는데 이때 프로미스 안의 코드가 실행(resoleve)되면 then() 안에 있는 코드를 실행시켜 고, 또한 코드 실행이 실패(reject)하면 catch() 안에 있는 코드를 실행시켜 줍니다. /..

자바스크립트에서 객체나 배열 등의 데이터 구조를 복사할 때 얇은 복사와 깊은 복사 두 가지 방법이 있습니다. | 얇은 복사(Shallow Copy) 얇은 복사는 해당 객체나 배열의 참조값(메모리 주소)만 복사하는 방법입니다. 이 경우에는 원본 객체와 복사된 객체가 같은 참조값(메모리 주소)을 가지고 있어서 복사된 객체를 변경하면 원본의 객체도 같이 변경이 돼서 주의해야 합니다. 1. 방법 (1) Object.assign() 사용 Object.assign() 첫 번째 인수로 전달된 객체에 다른 객체들의 속성을 복사하는 메서드입니다. 첫 번째 인자로 빈 객체를 전달해 주고 두 번째 인자에는 복사할 객체를 넣어주면 되고, 이때 중첩돼 있는 객체의 값은 원본 객채와 같은 참조값을 가리킵니다. let obj1 =..

동기식 처리는 코드가 한 번에 한 줄씩 차례로 실행되는 것을 말하고 비동기식 처리는 코드가 병렬적으로 한 번에 실행되는 것을 말합니다. | 자바스크립트가 작동하는 방식 1. 동기식 처리 자바스크립트에서는 코드가 동기식으로 작동합니다. 웹 브라우저에는 stack이라는 코드를 실행해 주는 공간이 있는데 거기에서 코드를 한 줄씩 차례로 실행해 주는 거입니다. 예를 들면 console.log(1); console.log(2); console.log(3); 이런 식으로 코드를 작성하면 자바스크립트는 동기적으로 작동하기 때문에 콘솔에 차례대로 1, 2, 3이 출력이 됩니다. 2. 비동기식 처리 자바스크립트에서 코드를 비동기식으로 처리하는 경우도 있는데 이는 setTimeout(), addEventlistener()..

자바스크립트 자료형에는 크게 2가지 타입이 있는데 그게 원시타입과 참조타입입니다. | 원시타입(Primitive Type) 1. 종류 원시타입의 종류는 다음과 같습니다. 숫자 문자열 불리언 null undefined 심벌(Symbol) 2. 특성 원시타입의 데이터를 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장이 됩니다. 그래서 원시값이 같은 변수를 다른 변수에 할당하면 원본 원시값이 복사돼서 전달됩니다. let a = 10; let b = a; // a의 원시값 10 복사 a = 11; console.log(a); // 11 출력 console.log(b); // 10 출력 | 참조타입(Reference Type) 1. 종류 참조타입의 종류는 대표적으로 다음과 같습니다. 배열(Array..