자바스크립트 - Vanilla JS

[자바스크립트 / Vanilla JS] 함수 참조 (Function Reference)과 함수 호출 (Function Call)에 대해서 알아보자

함수 참조와 함수 호출은 JavaScript 및 TypeScript와 같은 프로그래밍 언어에서 중요한 개념이다. 이 두 개념의 차이점은 함수가 어떻게 다뤄지는지와 언제 실행되는지와 관련이 있다. ❗ 함수 참조 (Function Reference) 함수 참조는 함수 자체를 가리키는 것이다. 이것은 함수를 호출하지 않고 함수의 이름을 변수에 할당하거나 다른 함수에 전달하는 것을 의미한다. 함수 참조를 사용하면 함수를 나중에 호출하거나 다른 곳에서 호출할 수 있다. 예제: function sayHello() { console.log("Hello!"); } const helloFunction = sayHello; // 함수 참조 helloFunction(); // 함수 호출 ❗ 함수 호출 (Function Ca..

[자바스크립트 / Vanilla JS] padStart()와 padEnd()에 대해서

❗ padStart()란 ? 특정 길이에 도달할 때까지 문자열 시작 부분에 패딩을 추가하는 데 사용할 수 있는 내장 JavaScript 메서드이다. padStart()에는 두 개의 인수가 있다. 첫 번째는 결과 문자열의 원하는 길이이고 두 번째는 padding 값에 사용할 문자이다(기본값은 공백). 원래 문자열의 길이가 지정된 길이보다 크거나 같으면 padding이 추가되지 않는다. const str = 'hello'; const paddedStr = str.padStart(10, ' '); console.log(paddedStr); // " hello" 이 예에서 padStart()는 문자열 'hello'의 시작 부분에 5개의 공백을 추가하는 데 사용되어 길이가 10자인 새 문자열이 생성된다 원래 문자..

[자바스크립트 / Vanilla JS] 클로저 함수(Closure function)란 ?

❗ 클로저 함수란 ? 클로저 함수(Closure function)란, 자신이 생성될 때의 환경을 기억하고 이 환경에서 생성될 때의 데이터를 계속 유지하는 함수를 말한다. 이는 자바스크립트에서 함수가 일급 객체(first-class object)이기 때문에 가능합니다. 클로저 함수는 외부 함수 안에 내부 함수를 정의하고, 내부 함수가 외부 함수의 지역 변수를 참조하거나 외부 함수의 매개변수를 활용하는 경우에 생성된다. 이때 외부 함수가 실행을 마치고 반환되어도, 내부 함수가 이용하는 외부 함수의 지역 변수나 매개변수는 메모리에 유지된다. 클로저 함수를 사용하면, 내부 함수에서 외부 함수의 지역 변수에 접근하여 이용할 수 있으므로, 정보의 은닉, 캡슐화, 함수 팩토리 등의 다양한 디자인 패턴을 구현할 수 있..

[자바스크립트 / Vanilla JS] some()과 includes()의 차이점

includes() 및 some() 메서드는 배열에서 특정 요소를 검색하는 데 사용된다. 그러나 이 두 가지 방법에는 몇 가지 차이점이 있다. ❗ includes() 배열에 특정 요소가 포함되어 있는지 여부를 나타내는 boolean 값을 반환한다. 기본 값과 기본 값이 아닌 값 모두와 함께 사용할 수 있다. 찾은 요소의 인덱스에 대한 액세스를 제공하지 않는다. 배열을 수정할 수 있는 수단을 제공하지 않는다. 더 간단하고 읽기 쉽다. const fruits = ['apple', 'banana', 'orange']; console.log(fruits.includes('apple')); // true console.log(fruits.includes('pear')); // false ✔ include() 예시..

[자바스크립트 / Vanilla JS] forEach()와 map()의 차이점

map()과 forEach()에 대한 정의는 패스.❗ forEach()와 map()의 공통점forEach, map공통점은 "배열을 이용한다"는 점이다.배열의 값을 조작해서 원하는 결과값을 도출하는데 의미가 있다.❗ forEach()와 map()의 차이점1. 새로운 배열을 반환하는 map()forEach()가 배열 요소마다 한 번씩 주어진 함수를 실행하는 것과 달리,map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환한다는 특징을 가지고 있다. 그리고, forEach()와 map()은1. currentValue (배열 원소의 값)2. index (현재 요소의 인덱스)3. array (현재 배열)세 개의 인자를 가지고 호출된다. 2. 리턴값을 보내지 않..

[자바스크립트 / Vanilla JS] parseInt()와 Number()의 차이점

나는 개발을 진행해가며 문자열을 정수형으로 변환 하는 일을 꽤나 자주 겪고는 한다. 문자열을 정수형으로 변환하는 많은 예제들을 구글링 해보았을 때 문자열을 정수형으로 변환하는 방법이 2가지가 있었다. 참고로 나는 parseInt()만 주구장창 썼다. 바로 parseInt()와 Number()이다. Number()는 어떤 결과값이 도출될지 궁금하여 내 코드에 Number도 적용했는데 parseInt()를 썼을 때와 같은 결과가 나왔다....! 그래서 드는 의문이 "같은 결과가 나오는데 왜 문자열을 정수형으로 변환하는 방법이 2가지이지 ?" 라는 생각이 들었다. 그래서 이 번 포스팅은 parseInt()와 Number()의 차이점과 사용법 및 정의에 대해서 다루어보겠다. ❗ parseInt() 먼저 pars..

[자바스크립트 / Vanilla JS] 스프레드 연산자 (Spread Operator)

ES6에서는 '...'와 같이 다소 특이한 형태의 문법이 추가되었습니다. 점 3개가 연달아 붙어있는 이 표시는 Spread Operator(스프레드 오퍼레이터, 스프레드 연산자, 전개 구문, 펼침 연산자...)를 나타내는 것으로, 배열, 함수, 객체 등을 다루는 데 있어서 매우 편리하고 재미(?) 있는 새로운 기능을 제공한다. 이번 글에서는 스프레드 연산자에 대해서 살펴보도록 하겠다. ❗ Spread Operator 기본 문법 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다. 간단한 예를 들면 다음과 같은 표현을 들 수 있다. // Array let arr1 = [1, 2, 3, 4, 5]; let arr2 = [....

[자바스크립트 / Vanilla JS] 클래스 (class) 총정리

클래스 (class) 란 ❓ MDN에서 클래스를 다음과 같이 설명한다. 클래스는 일차적으로 자사크르비트의 기존 프로토타입 기반 상속에 대한 문법적 설탕(syntax sugar)이다. 클래스 문법이 자바스크립트에 새로운 객체 지향 상속 모델을 도입하는 것은 아니다. 라고 문법적 설탕(Syntax Sugar)이란 ❓ Syntax Sugar는 한국어로 문법 설탕이라고 번역된다. JS뿐만 아니라 프로그래밍 언어 전반적으로 적용되는 개념이며, 달달한 이름에 걸맞게 읽는 사람 또는 작성하는 사람이 편하게 디자인 된 문법이라는 뜻을 갖고 있다. 본격적으로 클래스를 살펴보기 전에 프로토타입 상속 예시를 먼저 보자. function Person(name, age) { this.name = name; this.age = ..