728x90

✨ string의 양쪽 공백을 모두 없애주는 build-in method

💻Example Code

실행 결과

🧨 Client에게 무언가 입력을 받은 후 실수로 채워진 공백을 지울 때 유용하게 사용 가능하다.

👉 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim

 

String.prototype.trim()

The trim() method removes whitespace from both ends of a string. Whitespace in this context is all the whitespace characters (space, tab, no-break space, etc.) and all the line terminator characters (LF, CR, etc.).

developer.mozilla.org

 

'JavaScript > Built-in Method etc.' 카테고리의 다른 글

Array.prototype.find()  (0) 2020.06.09
Array.prototype.splice()  (2) 2020.05.15
String.prototype.charAt()  (0) 2020.02.22
Set (Object)  (0) 2020.02.20
String.prototype.localeCompare()  (0) 2020.02.20
728x90

✨ testing function의 결과로 나온 array 중 첫 번째 값(value)을 반환하는 build-in method

💻Example Code

실행 결과

🧨 DOM에서 원하는 node를 찾고자 할 때 유용하게 사용할 수 있다.

실전 예제

👉 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

 

Array.prototype.find()

The find() method returns the value of the first element in the provided array that satisfies the provided testing function.

developer.mozilla.org

 

'JavaScript > Built-in Method etc.' 카테고리의 다른 글

String.prototype.trim()  (2) 2020.08.10
Array.prototype.splice()  (2) 2020.05.15
String.prototype.charAt()  (0) 2020.02.22
Set (Object)  (0) 2020.02.20
String.prototype.localeCompare()  (0) 2020.02.20
728x90

✨ Array의 특정 index를 지정하여 제거하거나 삽입할 수 있는 build-in method

💻Example Code

실행 결과

🧨 splice(시작 index, option, 값) 의 형식으로 사용할 수 있으며,
option에 0을 지정하면 삽입, 1을 지정하면 제거(변경) 효과를 볼 수 있다.
또한, splice(0)을 이용하면 해당 array의 모든 값을 제거하는 효과를 볼 수 있다.

👉 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

 

Array.prototype.splice()

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

developer.mozilla.org

 

'JavaScript > Built-in Method etc.' 카테고리의 다른 글

String.prototype.trim()  (2) 2020.08.10
Array.prototype.find()  (0) 2020.06.09
String.prototype.charAt()  (0) 2020.02.22
Set (Object)  (0) 2020.02.20
String.prototype.localeCompare()  (0) 2020.02.20
728x90

✨ String의 인덱스를 지정하는 또 다른 방법

💻Example Code

실행 결과

🧨 물론 직접 지정하는 것도 가능하지만, 조금 더 graceful 표현이 필요할 때, 또는 목적에 맞게 사용 가능하다.
프로젝트는 보통 다수의 인원이 참여하게 되는데, 내 코드를 다른 사람도 이해할 수 있어야 한다.
따라서, 내가 작성한 코드의 목적을 정확히 표현하고 싶을 때 사용할 수 있다.

👉 자세한 내용https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt

 

String.prototype.charAt()

The String object's charAt() method returns a new string consisting of the single UTF-16 code unit located at the specified offset into the string.

developer.mozilla.org

 

'JavaScript > Built-in Method etc.' 카테고리의 다른 글

Array.prototype.find()  (0) 2020.06.09
Array.prototype.splice()  (2) 2020.05.15
Set (Object)  (0) 2020.02.20
String.prototype.localeCompare()  (0) 2020.02.20
Math.round()  (0) 2020.02.16
728x90

✨ 유일한(unique)값을 얻고 싶을 때 사용할 수 있는 Built-in Object

💻Example Code

실행 결과

🧨 중복된 값이 여러 개 존재할 때 유용하게 사용 가능하다.

👉 자세한 내용https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

'JavaScript > Built-in Method etc.' 카테고리의 다른 글

Array.prototype.splice()  (2) 2020.05.15
String.prototype.charAt()  (0) 2020.02.22
String.prototype.localeCompare()  (0) 2020.02.20
Math.round()  (0) 2020.02.16
Math.abs()  (0) 2020.01.28
728x90

✨ 문자의 정렬 순서를 비교를 통해 알아낼 수 있는 helper method

💻Example Code

 

 

실행 결과

🧨
의 비교 문자가의 비교 문자보다 정렬 순서가 앞이라면 -1
의 비교 문자가 의 비교 문자보다 정렬 순서가 같다면 0
의 비교 문자가 의 비교 문자보다 정렬 순서가 뒤라면 1
이 출력되는 것을 확인할 수 있다.

👉 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

 

String.prototype.localeCompare()

The localeCompare() method returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.

developer.mozilla.org

 

'JavaScript > Built-in Method etc.' 카테고리의 다른 글

String.prototype.charAt()  (0) 2020.02.22
Set (Object)  (0) 2020.02.20
Math.round()  (0) 2020.02.16
Math.abs()  (0) 2020.01.28
Math.PI  (0) 2020.01.28
728x90

✨ 반올림이 필요할 때 사용하는 helper method

💻Example Code

 

실행 결과

🧨 반올림이 필요할 경우에 사용할 수 있다.

👉 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round

 

Math.round()

The Math.round() function returns the value of a number rounded to the nearest integer.

developer.mozilla.org

 

'JavaScript > Built-in Method etc.' 카테고리의 다른 글

Set (Object)  (0) 2020.02.20
String.prototype.localeCompare()  (0) 2020.02.20
Math.abs()  (0) 2020.01.28
Math.PI  (0) 2020.01.28
Array.prototype.forEach()  (0) 2020.01.23
728x90

✨ 절대값을 이용한 계산이 필요할 때 사용할 수 있는 helper method

💻Example Code

const x1 = 5;
const x2 = 3;

console.log(x2-x1);
console.log(x1-x2);
console.log(Math.abs(x2-x1));
console.log(Math.abs(x1-x2));

🧨 두 점 사이의 거리 등 다양한 계산에서 활용할 수 있다.

👉 자세한 내용은 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/abs

 

Math.abs()

Math.abs() 함수는 주어진 숫자의 절대값을 반환합니다.

developer.mozilla.org

 

'JavaScript > Built-in Method etc.' 카테고리의 다른 글

String.prototype.localeCompare()  (0) 2020.02.20
Math.round()  (0) 2020.02.16
Math.PI  (0) 2020.01.28
Array.prototype.forEach()  (0) 2020.01.23
Math.pow()  (0) 2020.01.22
728x90

✨ PI(파이)를 이용한 계산이 필요할 때 사용할 수 있는 helper method

💻Example Code

const radius = 2
const areaOfCircle = radius * radius * Math.PI;

console.log( areaOfCircle );
console.log( Math.PI );

실행 결과

🧨 원의 넓이를 구하는 공식: 반지름*반지름*PI(파이)

😋 소수점 아래를 조정하고 싶다면 toFixed()를 사용해주면 된다. 링크 참고(https://dpsc615.tistory.com/14)

👉 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI

 

Math.PI

The Math.PI property represents the ratio of the circumference of a circle to its diameter, approximately 3.14159:

developer.mozilla.org

 

'JavaScript > Built-in Method etc.' 카테고리의 다른 글

Math.round()  (0) 2020.02.16
Math.abs()  (0) 2020.01.28
Array.prototype.forEach()  (0) 2020.01.23
Math.pow()  (0) 2020.01.22
Math.random()  (0) 2020.01.18
728x90

Object를 생성할 때마다, 뭔지 모르게 항상 붙는 __proto__가 있다.
또한 출처를 알 수 없는 .length, split(), toString()를 우리는 항상 사용해 왔다.
이것들은 뭘까? 어디서 왔고? 어디서 생겼을까? 라는 생각으로 시작하면 될 것 같다.

먼저, JavaScript는 객체지향 언어다.
하지만, Java, Python과 다르게 class기반의 객체지향 언어가 아니고, prototype 기반의 객제지향 언어다.
(ES5 이후 class를 지원하지만, class를 객체지향의 기반으로 사용하고 있지 않다)

생성자로 사용하기 위한 fuction을 작성해보자.

Bird constructor, Bird prototype

위 결과를 보면 함수를 생성했는데, constructor__proto__가 함께 생성된 것을 볼 수 있다.

간단히 말하자면, constructor해당 Object의 원본(Bird 자신)을 가리키며, __proto__ Object prototype을 가리킨다.
Object prototype은 JavaScript에서 생성되는 모든 것들의 조상이라고 생각하면 된다
(앞서 말한 toString(), split() 등 모든 built-in method를 가지고 있다)

위 생성자를 이용해 bird1과 bird2를 instance로 찍어보자.

bird1, bird2 Instance

bird1를 출력해보면 자신만의 name, color와 생성자가 가지고 있던 sing function 그리고 __proto__가 생성된 것을 볼 수 있다.
그리고 __proto__를 누르면 function 생성자를 선언할 때 볼 수 있던 constructor__proto__다시 볼 수 있다.

이런식으로, prototype chain을 통해 연속적으로 자신의 조상 prototype을 참조한다.

즉, 우리가 JavaScript안에서 생성하는 Array, String, Object, function 등 모두 함수를 통해 생성되며,
단순히 하나의 Object만 생성되는 것이 아니라, constructor와 Object prototype을 참조하며 생성된다.
또한, 각 instance마다 property를 추가할 필요 없이 prototype을 이용해 memory를 공유할 수 있다.

참고 자료 https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co

 

🎉👨‍👩‍👧‍👧 JavaScript Visualized: Prototypal Inheritance

 

dev.to

 

'JavaScript > JavaScript' 카테고리의 다른 글

Hoisting(호이스팅)  (0) 2020.01.24
Event Library(이벤트 관리 라이브러리를 만들어보자)  (0) 2020.01.15

+ Recent posts