본문 바로가기

JAVASCRIPT

(13)
(Javascript) 자바스크립트 배열 메서드 some, every, find, findIndex 사용법 이전에 자주 쓰이는 배열 메서드에 대해 다룬 적이 있다. 이 외에도 종종 쓰이는 배열 메서드가 있어서 이번 포스팅에서 정리해보고자 한다.  some 메서드 배열 안의 요소가 판별 함수를 적어도 하나라도 통과하는지 테스트, 조건을 만족하는 요소가 하나라도 있으면 true, 그렇지 않으면 false를 반환const array1 = [1, 2, 3, 4, 5];console.log(array1.some(e=>e%2===0)); //trueconst array2 = [1, 3, 5, 7, 9];console.log(array2.some(e=>e%2===0)); //false  every 메서드배열 안의 요소가 판별 함수를 모두 충족하는지 테스트 모든 요소가 조건을 만족하면 true, 그렇지 않으면 false를 ..
(Javascript) 2차 배열 만드는 방법, 2차 배열의 참조가 같아지는 오류 2차 배열에서 주의해야 하는 참조 자바스크립트에서 빈 문자열로 2차 배열을 만들어야 한다고 하자  이때 new Array와 full을 이용해 아래와 같은 방법을 생각해 낼 수 있다.//error! 배열 내부의 참조가 모두 같아져 버린다.new Array(len1).full(new Array(len2).fill(0)) 하지만 결론적으로 말하자면 위와 같이 배열을 설정하면 안 된다. 그 이유는 배열이 생성되는 과정을 자세히 들여다보면 알 수 있다.  1. new Array(len2).fill(0)가 배열을 생성한다. 2. new Array(len1)가 배열을 생성한다.3. new Array(len1)의 fill 함수가 new Array(len2)의 참조로 배열 내부를 채운다. 결론적으로 new Array(l..
(Javascript) iterable, 유사 배열(arraylike)의 차이점, 사용법 유사배열과 iterable의 설명을 보다 보면 비슷하면서 다르기에 꽤나 헷갈린다. 이번 포스팅에서는 iterable과 유사배열의 차이를 확실히 정리하고자 한다.   iterable이란? iterable을 직역하면 반복이 가능하다는 뜻이다.  이 말 그대로, 반복이 가능한 객체를 iterable로 부른다. iterable 객체에는 문자열, 배열, map, set 등이 있다. iterable이 되려면 특정 조건을 충족해야 한다.  가장 중요한 조건은 for...of를 사용할 수 있어야 한다는 것인데, for... of를 사용할 수 있으려면 해당 객체 내에 메서드 Symbol.iterator가 구현되어 있어야 한다. for... of를 사용하면 객체 Symbol.iterator가 자동으로 호출된다.  [Sym..
(Javascript) 헷갈리는 this 고정시키기. bind, apply, call 사용법, 차이점 객체의 메서드를 호출하거나, 생성자 함수 또는 클래스로 새로운 인스턴스를 만들 때, this를 많이 사용한다. 다른 언어와 달리 자바스크립트에서 this는 상황에 따라서 다른 것을 가리키는 경우가 있기에 종종 this가 무엇을 가르키는지 헷갈릴 때가 많다. 따라서 이번 포스팅에서는 이런 헷갈리는 this가 가리키는 것을 아예 고정시키는 메서드 bind, apply, call 각각의 사용법 그리고 차이점에 대해서 설명하고자 한다.    참고로 this에 관해서는 아래 포스팅에서 자세히 설명해 두었다.  (Javascript) this란 무엇인가? this 사용방법this는 객체 또는 함수와 같이 사용되는 키워드이다. 객체 내에서 사용되는 this는 호출방식에 따라 가리키는 것이 달라질 수 있다.   1. ..
(Javascript) 논리 연산자 &&과 ||의 단축 평가 논리 연산자 &&와 ||는 boolen이 아닌 피연산자와도 사용할 수 있다. boolen이 아닌 피연산자를 이용할 때, 반환값을 boolen로 변환하지 않고, 그대로 반환한다. 이 때문에 처음 논리연산자와 단축평가를 접하면 아주 헷갈린다. 따라서 이번 포스팅에서는 논리연산자 &&와 ||에 대해 설명하고, 피연산자 값에 따라 달라지는 반환값을 정리하고자 한다.  Falsy와 Truthy 값각 논리 연산자를 설명하기 전에 Falsy와 Truthy가 무엇인지 설명하고자 한다. 논리 연산자에 boolen이 아닌 피연산자를 추가하면,  논리 연산자는 해당 피연산자를 boolen으로 변환하려고 시도한다. 이때 아래에 해당하면 논리연산자는 해당 피연산자를 false로 취급한다. 아래 값들은 falsy값이라 불리며, ..
(Javascript) hoisting(호이스팅)이란? 발생 배경, 종류, TDZ 호이스팅의 발생 배경 자바스크립트는 인터프리터 언어이다.  컨파일러로 한 번에 기계어로 변환하는 컴파일 언어와 달리 한 줄씩 코드를 읽고 실행한다는 것이다. 하지만 자바스크립트가 인터프리터 언어라고 해서 아무 준비없이 코드를 바로 실행하는 건 아니다. 컴파일 언어가 컴파일 과정을 거치듯 인터프리터 언어도 인터프리테이션 단계를 거친다. 이 인터프리테이션 과정 중, 변수나 함수 선언을 찾아 메모리에 할당하는 과정이 있는데 이를 변수 & 함수 바인딩이라고 한다.   이렇게 코드가 실행되기 전에 변수나 함수 선언을 미리 할당하는 과정이 있기에  실제로 변수나 함수 선언이 되기 이전에 그 변수나 함수에 접근이 가능한데, 이때 변수와 함수 선언이 코드 가장 위로 끌어올려지는 것 같이 느껴지는 현상을 호이스팅(hoi..
(Javascript) this란 무엇인가? this 사용방법 this는 객체 또는 함수와 같이 사용되는 키워드이다. 객체 내에서 사용되는 this는 호출방식에 따라 가리키는 것이 달라질 수 있다.   1. 함수가 객체의 메서드로 호출되는 경우this는 해당 객체를 나타낸다.const user = { name: 'Alice', hi: function() { console.log(`Hello, my name is ${this.name}`); }};user.hi(); // "Hello, my name is Alice"   2. 생성자(constructor)함수로 호출된 경우this는 새로 생성된 인스턴스를 가리킨다.function User (name, age) { this.name = name; this.age = age; this.hi: functio..
(Javascript) fetch를 이용해서 api 가져오기 , 사용법, 작동 과정 fetch() 함수를 이용하면 서버에서 데이터를 가져오거나 보낼 수 있다. 이 함수를 이용해 무료 api 정보를 받아올 수 있다. 나는 퀴즈 앱을 만들기 위해서 무료 퀴즈 api url을 받아왔다.   Open Trivia DBFree to use, user-contributed trivia questions!opentdb.com   fetch() 사용법fetch() 함수의 기본 문법은 아래와 같다.let promise = fetch(url, [options]); url(필수) : 접근하고 싶은 url 링크 [options] : 선택 매개변수 옵션은 다양하지만 아래 5가지가 가장 많이 사용된다.  또한 옵션을 적지 않으면 자동으로 Get 메서드로 처리되어 url로부터 정보를 받아오게 된다.  method..