감공사

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

💻Example Code

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

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

✨ 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의 특정 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

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

💻Example Code

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

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

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

💻Example Code

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

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

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

💻Example Code

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

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

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

💻Example Code

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

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

✨ 절대값을 이용한 계산이 필요할 때 사용할 수 있는 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

✨ 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

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

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

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

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

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

위 생성자를 이용해 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