[JavaScript] 자바스크립트의 다양한 지식 #2

 

 

안녕하세요. GUO 입니다.

오늘은 그동안 공부해온 JavaScript 지식을 복습할 겸 적어보려고 합니다.

(주관적인 복습 개념으로 적는 글이기 때문에 일부 제외된 부분이 있을 수 있습니다)

 

 

---

 

 

1. 생성자 함수

비슷한 객체를 여러 개 만들어야 하는 상황(회원, 상품)에서 생성자 함수를 이용할 수 있습니다.

 

생성자 함수 = 필요한 재료를 넣어 찍어내는 와플팬

생성된 객체 = 와플

 

• 첫 글자는 대문자로 사용
• `new` 연산자를 사용해서 호출

`new` 키워드를 사용하면 자바스크립트는 먼저 빈 객체를 자동으로 생성합니다. 이 객체는 생성자 함수 내에서 `this` 키워드를 통해 참조됩니다. 생성자 함수가 끝나면, 자바스크립트는 암묵적으로 `this`를 반환합니다. 즉, `return this;`가 명시적으로 작성되지 않더라도, 자동으로 새로 생성된 객체를 반환합니다.

 

때문에 `this = {}` 과 `return this;`를 생략하더라도 `new` 연산자가 자동으로 반환을 하기 때문에 생략이 가능합니다.

 

 

메소드를 만든 코드

 

위의 코드에서 `sayName` 함수의 `this`는 `user1`을 의미합니다.

 

 

 

---

 

 

2. Computed property (계산된 프로퍼티)

 

위의 코드에서 대괄호로 묶인 [a]는 문자 a가 아닌 변수 `a`에 할당된 값이 들어갑니다.

이것을 Computed property (계산된 프로퍼티) 라고 합니다.

 

위의 코드처럼 식 자체를 넣는 것도 가능합니다.

 

 

 

---

 

 

3. 객체에서 사용하는 몇 가지 메소드(Object methods)

• Object.assign() : 객체 복제
• Object.keys() : 키를 배열로 반환
• Object.values() : 값을 배열로 반환
• Object.entries(): 키와 값을 모두 배열로 반환
• Object.fromEntries() : 키와 값의 배열을 모두 객체로 만듦

 

---

 

 

 

4. Symbol

심볼은 유일한 식별자를 만들 때 사용합니다. 심볼은 항상 고유한 값을 가지므로, 심볼로 만든 프로퍼티 키는 다른 어떤 프로퍼티 키와도 충돌하지 않습니다. 이 고유성 덕분에, 심볼을 사용하면 같은 이름의 프로퍼티라도 각기 다른 용도로 사용할 수 있습니다. 코드에서 프로퍼티 이름 충돌을 방지하는 데 유용합니다.

 

심볼로 만든 프로퍼티는 객체의 내부 상태를 표현하거나 숨기고자 하는 프로퍼티를 정의할 때 유용합니다.

심볼 값을 찾고 싶을 때에는 아래 방법을 사용하면 됩니다.

 

• Object.getOwnPropertySymbols(); 는 심볼 값을 보여줍니다.
• Reflect.ownKeys(); 는 심볼 값을 포함한 값을 모두 보여줍니다.

 

 

 

4-1. Symbol.for() : 전역 심볼

하나의 심볼만 보장 받을 수 있습니다(없으면 만들고, 있으면 가져오기 때문)

 

Symbol 함수는 매번 다른 심볼 값을 생성하지만,

Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 심볼을 공유합니다.

 

 

---

 

 

 

5. 숫자(Number) 와 수학(Math)

위의 코드처럼 `toString()`을 사용하면 10진수를 2진수 혹은 16진수로 바꿀 수 있습니다.

 

 

 

몇 가지 Math 메소드

• Math.ceil() : 올림 // 5.1 -> 6
• Math.floor() : 내림 // 5.7 -> 5
• Math.round() : 반올림 // 5.1 -> 5   ,    5.7 -> 6

소수점 둘째자리까지 표현(셋째 자리에서 반올림)

 

또 다른 방법 `toFixed()`

 

`toFixed()`는 통계 작업 등에 유용하게 쓰이지만 문자열로 반환한다는 주의점이 있어,

문자열로 반환 후 숫자로 변환하는 경우가 많습니다.

 

• isNaN() : NaN인지 아닌지 판단
• parseInt() : 문자열을 숫자로 반환(정수만 반환)
• parseFloat() : `parseInt()`와 동일하게 동작하지만 부동 소수점까지 반환
• Math.random() : 0 ~ 1 사이 무작위 숫자 생성

이미지 출처 - 코딩앙마 유튜브

 

• Math.max() : 괄호 안 인수들 중 최댓값을 구해줌
• Math.min() : 괄호 안 인수들 중 최소값을 구해줌
• Math.abs() : 절대값을 구해줌
• Math.pow(n, m) : 제곱값을 구해줌 // Math.pow(2, 10) = 1024
• Math.aqrt() : 제곱근을 구해줌

 

---

 

 

 

6. 문자열 메소드 (String methods)  

• toUpperCase() : 모든 영문을 대문자로 변환
• toLowerCase() : 모든 영문을 소문자로 변환
• str.indexOf(text) : 문자를 인수로 받아 몇 번째 위치에 존재하는 지 알려줌(0부터 시작)
• str.slice(n, m) : n부터 m까지의 문자열을 반환 // n - 시작점  ,  m - 없으면 문자열 끝까지 & 양수면 그 숫자까지(포함x) & 음수면 끝에서부터 셈

이미지 출처 - 코딩앙마 유튜브

 

• str.substring(n, m) : n과 m 사이 문자열을 반환 // 음수는 0으로 인식, n과 m의 위치를 바꿔도 똑같음
• str.substr(n, m) : n부터 시작하여 m개를 가져옴
• str.trim() : 앞 뒤 공백 제거
• str.repeat(n) : 문자열을 n번 반복

 

 

---

 

 

7. 배열 메소드 (Array methods)

• arr.splice(n, m) : 특정 요소를 지움 // n - 시작 ,  m - 개수
• arr.splice(n, m, x) : 특정 요소를 지우고 추가 // x - 추가
• arr.splice() : 삭제된 요소 반환
• arr.slice(n, m) : n부터 m의 앞까지 반환
• arr.concat(arr2, arr3..) : 합쳐서 새 배열로 반환
• arr.forEach(fn) : 배열 반복
• arr.includes() : 배열 내에 인수를 포함하고 있는지 확인
• arr.find(fn) : 배열에서 조건을 만족하는 첫 번째 요소를 `true` 반환. 조건을 만족하는 요소가 없으면 `undefined`를 반환
• arr.findIndex(fn) : 배열에서 조건을 만족하는 첫 번째 요소의 인덱스를 반환함. 조건을 만족하는 요소가 없으면 `-1`을 반환
• arr.filter(fn) : 첫 번째 요소만 반환하는 `arr.find(fn)`와 달리 만족하는 모든 요소를 반환
• arr.reverse() : 역순으로 재정렬 // 최신 순서로 정렬할 때 유용
• arr.map(fn) : 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환
• arr.join() : 배열 내의 인수들을 합쳐서 반환함
• arr.split() : 문자열을 나눠서 배열로 만들어줌 
• Array.isArray() : 배열인지 아닌지 알려줌

 

 

---

 

 

출처

 

• https://youtu.be/4_WLS9Lj6n4?si=aSVp4ytlMaadUktr

• [ChatGPT](https://www.openai.com/chatgpt)