💡 Keyword

---

• 각 데이터(문자열, 숫자 배열 등)에 적용할 수 있는 속성들

데이터

---

다음 데이터들을 다루는 추가적인 명령들에 관해 배워보자.

• String: "", '', ``
• Number
• Boolean: true, false
• undefined
• null
• Array([])
• Object({})
  
  

🤔 리터럴 방식
특정한 기호를 통해 데이터를 손쉽게 만들어내는 방식을 뜻한다.

🤔 Tip
MDN 문서 'Related Topics'의 'Methods'에서 싫어요(👎) 기호가 있는 것은 기술 자체가 없어졌거나 사용을 권장하지 않는 기술이다.
과학실 플라스크(🧪) 기호가 있는 것은 아직은 실험적인 기술이므로 실무에 도입하기엔 조금 무리가 있는 기술이다.

1. 문자

---

.indexOf()

.length

.slice()

.replace()

.match()

문자열에서 정규표현식을 통해 특정한 문자를 매치시킬 수 있고, 이를 배열 데이터로 반환한다.

.trim()

공백 문자를 제거한다.

2. 숫자와 수학

---

toFixed()

숫자 데이터에 사용할 수 있다. 반환 시 문자 데이터로 반환한다.
인수로 소수점의 몇 번째 자리까지 유지할 것인지를 명시할 수 있다.

🤔 parseInt(), parseFloat()

• parseInt(): 문자를 정수로 변환한다.
• parseFloat(): 문자를 실수로 변환한다.

Math

숫자 데이터를 이용해 수학적인 연산을 하는 여러 가지 메소드를 포함하고 있다.

• Math.abs(): 주어진 숫자의 절대값을 반환한다.
• Math.min(): 인수로 들어온 숫자 데이터 중 가장 작은 값을 반환한다.
• Math.max(): 인수로 들어온 숫자 데이터 중 가장 큰 값을 반환한다.
• Math.ceil(): 올림
• Math.floor(): 내림
• Math.round(): 반올림
• Math.random(): 난수를 생성한다.
  
  

3. 배열

---

.length

배열의 길이를 반환한다. (item의 개수가 몇 개인지 반환한다.)

.concat()

두 개의 배열 데이터를 병합해서 새로운 배열을 반환한다.
원본의 데이터가 수정되지 않는다.

.forEach()

메소드가 붙어있는 배열의 item 개수만큼 콜백 함수를 실행한다.
따로 반환되는 값이 없다.

.map()

인수로 사용하는 콜백에서 반환된 데이터를 가지고 새로운 배열을 만들어서 반환한다.
원본 데이터에 영향을 주지 않는다. 새로운 배열에 저장하여 반환!

• 일반 함수 사용
  
• 화살표 함수 사용
  
  

.filter()

특정한 기준에 의해서 필터링해서 새로운 배열을 만들어서 반환한다.
원본 데이터에 영향을 주지 않는다. 새로운 배열에 저장하여 반환!

• 화살표 함수 사용
  
  

.find(), findIndex()

• .find()

  • 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다.
  • 요소가 없다면 undefined를 반환한다.
  • 콜백 내에서 원하는 데이터를 찾으면 반복이 종료되고 찾은 (배열의)item을 반환한다.
    

• .findIndex()

  • 찾은 item의 인덱스 번호를 반환한다.
    
    

🤔 정규표현식 /^B/
대문자 'B'로 시작하는 문자 데이터를 의미한다.

.includes()

배열 데이터 부분에 인수로 사용된 특정한 데이터가 포함되어 있는지 확인한다.
Boolean 데이터를 반환한다.

.push(), .unshift()

❗ 원본이 수정되므로 주의

• .push()
  • 배열의 가장 뒤쪽에 인수의 내용을 삽입한다.
• .unshift()
  • 배열의 가장 앞쪽에 인수의 내용을 삽입한다.
    
    

.reverse()

❗ 원본이 수정되므로 주의

배열 데이터를 뒤집어서 반환한다.

.splice()

❗ 원본이 수정되므로 주의

• 삭제
  • 배열에서 특정한 item을 지울 때 사용한다.
    
• 끼워넣기
  • item을 끼워넣을 수도 있다.
    
    

4. 객체

---

일반적인 실제 객체 데이터 자체에는 사용할 수 없다.
Object라는 전역 객체에 직접적으로 사용하는 메소드이다. (정적 메소드)

.assign()

🤔 target과 userAge가 같은 이유?
생긴 것이 똑같아서 true 값이 나온 게 아니라 같은 메모리 주소를 바라보고 있으므로 일치 연산자로 비교했을 때 true 값이 나온 것이다.
const a와 const b는 생긴 것은 같지만 다른 메모리 주소를 바라보고 있으므로 false 값이 나온다.

다음과 같은 방식으로 원본 데이터를 손상하지 않고 새로운 객체 데이터를 만들 수 있다. (특정한 객체 데이터를 복사하는 용도로 사용할 수도 있다.)
새로운 객체 데이터가 생성된 것이므로 더이상 target과 userAge는 같지 않다.

.keys()

객체 데이터의 key 값(프로퍼티 이름)만 추출하여 새로운 배열로 반환한다.

🤔 이를 어떻게 활용할 수 있을까?

• 인덱싱
  • keys 배열의 email이라는 데이터를 사용하고 싶다면? keys[2] 형식으로 접근한다.
    
    
• 객체 데이터의 인덱싱
  • 인덱스 번호가 아니라 객체 데이터가 가지고 있는 프로퍼티 이름을 명시한다. user['email']