4전 4전

자바스크립트에서 특정값으로 끝나는지 아니면 특정값으로 시작하는지 확인할 수 있는 메서드가 있습니다. | endsWith() endsWidth는 특정값으로 끝나는지 확인할 수 있는 메서드입니다. 1. 문법 endsWidth() 메서드는 매개변수 2가지를 집어넣을 수 있습니다. string.endsWith(searchString, length) 여기서 serchString은 확인하고자 하는 특정 문자열, length는 찾으려고 하는 문자열의 길이입니다. length는 안 넣어도 되고 기본값은 문자열 전체 길이의 값입니다. 2. 사용 console.log("apple".endsWith("e")); // apple이 e로 끝나므로 true console.log("apple".endsWith("l")); // a..

| ~ 연산자 자바스크립트에서 "~" 연산자는 비트반전 연산자입니다. 피연산자의 모든 비트를 반전시키고, 그 결과를 반환해 줍니다. 예를 들어 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()..