JavaScript

[JavaScript] 배열 메서드 정리

Array.prototype.slice() start ~ end 직전까지에 대한 얕은 복사본으로 새로운 배열을 리턴한다. 원본 배열을 변경하지 않는다. const arr = ['a', 'b', 'c', 'd', 'e']; // slice(startIdx, endIdx) console.log(arr.slice(2,4)); // ['c', 'd'] Array.prototype.splice() 시작 인덱스부터 입력된 갯수만큼 배열에서 추출한 후 원본 배열을 변경한다. const arr = ['a', 'b', 'c', 'd', 'e']; // splice(startIdx, deleteCount) console.log(arr.splice(2,3)); // 이 때의 리턴 값은 ['c', 'd', 'e']; cons..

[JavaScript] net::ERR_ABORTED 404 (NOT FOUND) 에러

자바스크립트 파일 경로 에러 // 찾을 수 있는 경로 // 찾을 수 없었던 경로 같은 폴더 내에 위치하다가 분기되는 지점부터 경로를 작성해주어야 오류가 발생하지 않는다 .. 허무 또 까먹을까봐 써둔다.

[JavaScript] 문자열 메서드 정리

문자열 메서드가 작동하는 이유 문자열은 기본적으로 원시타입이기 때문에 직접 수정, 변경이 불가능하다. 이런 문자열에 문자열 메서드가 작동할 수 있는 이유는, 메서드가 호출될 때 자바스크립트가 이 원시타입 문자열을 문자열 객체로 변환하기 때문이다. 그리고 메서드는 해당 문자열 객체에 대하여 실행된다. 그리고 이 과정을 (원시 값을 객체로 변환하는 것을) 'boxing' 이라고 한다. String.prototype.indexOf() 호출한 Str 에서 주어진 값과 일치하는 첫 번째 인덱스를 리턴한다. 일치하는 값이 없을 시 -1 을 리턴한다. const str = 'What a beautiful day!'; str.indexOf('a'); // 2 str.indexOf('x'); // -1 str.index..

[JavaScript] 데이터 타입

자바스크립트의 데이터 타입은 8가지가 있고, 크게 원시타입과 객체타입으로 분류할 수 있다. 원시 타입 숫자 타입 : 정수, 실수 구분 없이 하나의 숫자 타입만 존재한다. 자바스크립트의 숫자는 배정밀도 64비트 부동소수점 형식의 2진수 (실수)로 처리된다. 문자열 타입 : 자바스크립트의 문자열은 원시 타입 즉 변경 불가능한 값이다. ES6에서 도입된 템플릿 리터럴은 이스케이프 시퀀스(\n 등) 을 사용하지 않고도 줄바꿈이 허용된다. 불리언 타입 : true & false undefined 타입 : 값을 할당하지 않은 변수가 가지는 값 null 타입 : 값이 없음을 의도적으로 명시할 때 사용하는 값 변수에 null을 의도적으로 할당하는 것은 이전에 변수에 할당되어 있던 값을 더 이상 참조하지 않겠다는 의미이..

[모던 자바스크립트 딥다이브] 17. 생성자 함수

모던 자바스크립트 Deep Dive 17장 내용을 발췌, 요약한 글 입니다. 17.1 Object 생성자 함수 생성자 함수 : new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수. 인스턴스 : 생성자 함수에 의해 생성된 객체. 자바스크립트는 Object생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise등의 빌트인 생성자 함수 제공. 특별한 이유가 없는 이상 객체 리터럴을 사용하는게 더 간편하다. // 빈 객체 생성 const person = new Object(); // 프로퍼티, 메서드 추가 person.name = 'Park'; person.sayHello = function() { return `Hi, $..

[JavaScript] HTML, CSS, JS로 만든 웹계산기

I am a Calculator hyejj19.github.io 무엇을 만들어볼까 하다가, 자주 쓰는 계산기를 만들어 보았다. 다른 글들을 참고해보니 eval() 함수를 사용해 문자열 자체를 코드로 변환하여 연산하는 방식도 있었는데, 외부에서 입력된 코드를 그대로 실행시킨다는 점이 자칫 치명적인 단점이 될 수 있다는 우려가 있다. 따라서 eval()을 사용하지 않고 입력값을 변환하여 내부적으로 계산하는 방식으로 만들게 되었다. 참고로 ? { key.addEventListener('click', (e) => { let num = e.target.textContent.trim(); setNumber(num); }); }); // 연산자 클릭이벤트 감지 keyFunctions.forEach((key) => k..

[모던 자바스크립트 딥다이브] 함수 선언문, 함수 표현식

함수 리터럴 상수 (Constant): 변하지 않는 변수 (참조 변수 - 주소 값이 변하지 않는 것이다.) 리터럴 (Literal) : 변하지 않는 데이터 그 자체를 의미함. const a = 1; // a -> 상수 // 1 -> 리터럴 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기 방식을 말한다. 즉, 리터럴은 값을 생성하기 위한 표기법이다. 따라서 함수 리터럴도 평가되어 값을 생성하며, 이 값은 객체다. 즉, 함수는 객체다. (값의 성질을 갖는 일급 객체에 해당한다.) 함수 정의 함수 정의 : 함수 호출 전, 인수를 전달 받을 매개변수와 실행할 문들, 그리고 리턴 값을 지정하는 것. 변수는 선언, 함수는 정의라고 하는데 이는 메모리 할당 여부에 따른 표현의 차이..

[JavaScript] arr.sort() 메서드 (배열의 정렬)

arr.sort([comepareFunction]) sort() 메서드를 배열에 적용하면 조건에 따른 적절한 정렬 후 배열을 리턴한다. 이 때 원본 배열을 직접 변경하기 때문에 사용시 주의가 필요하다. comepareFunction은 두 개의 배열의 요소를 인자로 받는다. 두 요소를 a, b라고 한다면 a와 b를 비교해 얻은 리턴값을 가지고 정렬 순서를 결정한다. comepareFunction의 리턴 값이 0보다 작으면 a, b의 순서로 정렬된다. comepareFunction의 리턴 값이 0보다 크면 b, a의 순서 숫자 오름차순 정렬 const nums = [1,4,3,5,2]; nums.sort((a,b) => { if (a b) retu..

[JavaScript] 원시타입 vs 참조타입

데이터 타입 자바스크립트에서 데이터 타입은 변경 불가능한(immutable) 원시 타입과, 변경 가능한(mutable) 참조 타입으로 구분된다. 원시 타입은 콜스택 내의 실행컨텍스트에 저장되고, 참조 타입(객체)은 메모리 힙에 저장된다. 변수 식별자가 가리키는 메모리 주소에 저장된 값이 실제 값인지 혹은 참조할 메모리 주소인지에 따라 원시 타입과 참조 타입을 구분할 수 있다. 원시 타입 객체를 제외한 모든 타입의 값(Boolean, Null, Undefined, Number, String, Symbol, BigInt) 을 원시 타입 값이라고 한다. 한번 생성된 원시 값은 읽기 전용 값으로, 변경할 수 없다. let age = 30; let oldage = age; age = 31; // age === 3..

[JavaScript] this keyword

this 함수 호출 시, 각각의 함수(실행컨텍스트)에 생성되는 특별한 값이다. 함수의 호출 방법에 따라 this의 값은 바뀐다. this는 고정된 값이 아니다. 호출 방식 this가 가리키는 값 객체 메소드 메소드를 호출하고 있는 객체 일반 함수 strict mode : undefined / sloopy mode : window 전역객체 화살표 함수 부모 스코프의 this 값 (화살표 함수는 자신만의 this 값을 가지지 않는다.) 이벤트 리스너 이벤트가 동작하고 있는 DOM element Example 객체 메소드 호출 const hyejung = { year : 1997, calcAge : function() { console.log(2022-this.year); } } //this -> hyejun..