[TIL] 프로그래밍과 데이터 in JavaScript

Jeris·2023년 4월 10일

JavaScript

코드잇 부트캠프 0기

목록 보기

17/107

Topic

JavaScript 자료형, 객체, 배열

What I Learned

객체

객체(Object)와 프로퍼티(Property)
- 객체
```
{
  property_name: property_value,
  ...
}
```
- 프로퍼티 네임을 key라고도 한다
- 프로퍼티 네임은 문자열이지만 따옴표를 생략해도 JavaScript가 암묵적으로 문자열로 형 변환을 한다
- 프로퍼티 네임 주의 사항
  - 첫 번째 글자는 반드시 문자, 밑줄(_), 달러기호($) 중 하나로 시작해야 한다
  - 띄어쓰기를 쓰면 안된다
  - 하이픈(-)을 쓰면 안된다
- 주의 사항에 어긋나는 프로퍼티 네임은 따옴표로 감싸줘야 한다
- 프로퍼티 밸류에는 객체를 포함한 모든 데이터 타입의 값을 쓸 수 있다
객체에서 데이터 접근하기
- object.key 점 표기법
  - 따옴표를 생략할 수 없는 키 값으로는 접근할 수 없다
- object['key'] 대괄호 표기법
- key와 대응되는 value를 리턴한다
- 존재하지 않은 key 값을 넣으면 undefined를 리턴한다
객체 다루기
- object.key = value;
  - 존재하는 key 값일 경우 새로 입력한 value 값을 할당한다
  - 존재하지 않는 key 값일 경우 새로운 key-value 쌍을 생성한다
- delete object.key; 객체 내의 키-밸류 쌍을 삭제한다
- key in object
  - 존재하는 key 값일 경우 true를 리턴한다
  - 존재하지 않는 key 값일 경우 false를 리턴한다
  - 예기치 않게 프로퍼티 밸류 값에 undefined가 할당되더라도 존재하는 프로퍼티 네임이라고 확인할 수 있다
객체와 메소드(Method)
- 객체의 메소드: 밸류 값이 함수인 키
- 객체의 메소드의 장점
  - 다른 함수의 이름 중복을 피할 수 있다
  - 객체에 집중해서 함수의 동작 부분을 작성할 수 있다
  - 객체의 고유한 동작으로 구분할 수 있기 때문에 좀 더 의미 있는 코드로 활용이 가능하다
for...in 반복문
```
for (variable in object)
  statement
```
- variable 매 반복마다 키 값을 문자열로 할당 받는다
- statement
  - object[variable] value 값 접근
- 정수형 프로퍼티 네임을 사용할 때
  - 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고 나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징이 있다
  - 그러므로 정수형 프로퍼티는 일반적으로 사용되지 않는다
Date객체
- 데이트(Date) 객체
  - 내장 객체(Standard built-in objects) 중 하나
  - 다양한 메소드와 인자를 전달하는 방법
    - Date - JavaScript | MDN 참고

배열

배열(Array)
```
let arr = [
  element1,
  ...
  elementN
];
```
- arr[index] index(0부터 시작하는 정수 값)을 활용하여 element에 접근할 수 있다
- element에 array 값을 넣으면 다차원 배열을 활용할 수 있다
배열 다루기
- 배열은 특별한 객체의 한 종류이다
- 다양한 메소드(점 표기법/대괄호 표기법)
  - length
  - splice(start[, deleteCount[, item1[, item2[, ...]]]] 배열의 여러 요소를 수정/삭제하고 삭제된 요소들을 포함한 배열을 리턴
    - start 배열의 변경을 시작할 인덱스
    - deleteCount 배열에서 제거할 요소의 수
    - itemN 배열에 삭제한 위치에 추가할 요소
  - shift() 배열의 첫 번째 요소를 제거하고 리턴
    - 빈 배열이 아니라면 배열의 길이가 줄어든다
  - pop() 배열 끝에서부터 요소 제거
  - unshift(element) 배열 앞에 요소 추가
  - push(element) 배열 끝에 요소 추가
  - indexOf(element) 배열 안 요소의 인덱스 리턴
    - element가 array에 포함되어 있다면 item이 있는 인덱스가 리턴된다
    - element가 array에 포함되어 있지 않다면 -1이 리턴된다
    - 여러 번 포함되어 있으면 처음 발견된 인덱스가 리턴된다
    - lastIndxOf(element) 여러 번 포함되어 있을 때 마지막 인덱스가 리턴된다
  - includes(element)
    - element가 array애 포함되어 있다면 true를 리턴한다
    - element가 array에 포함되어 있지 않다면 false를 리턴한다
  - reverse() 배열의 순서 뒤집기
  - Array - JavaScript | MDN 참고
for...of 반복문
```
for (variable of array)
  statement
```
- variable 매 반복마다 element 값을 할당받는다
- for..in 문도 배열에 쓸 수 있지만 배열의 메소드나 프로퍼티 등이 의도하지 않게 variable에 할당될 수 있으므로 배열에는 for..of 문을 쓰는 것이 좋다

자료형 심화

다양한 숫자 표기법
- NeM 지수 표기법
  - N * 10M의 표현법
- 0xN 16진법
- 0oN 8진법
- 0bN 2진법
숫자형 메소드
- toFixed(N) 소수점 N번째 자리까지 표현된 값을 문자열로 리턴한다
- tostring(N) N진법으로 표현된 값을 문자열로 리턴한다
- Number 함수로 형 변환을 해도 되지만 숫자로 된 문자열 앞에 더하기(+) 기호를 붙이면 숫자형으로 형변환된다
- 정수에 그대로 숫자형 메소드를 쓰면 소수점으로 인식하여 오류가 나기 때문에 온점을 두 번(..) 쓰거나 숫자를 괄호로 감싸주거나 숫자를 변수에 할당한 후 써야한다
Math객체
- 다양한 연산들을 유용하게 사용하기 위한 내장 객체
- 메소드
  - Math.abs(N) 절댓값을 리턴
  - Math.max(N1, N2, ...) 최댓값을 리턴
  - Math.min(N1, N2, ...) 최솟값을 리턴
  - Math.pow(N, M) NM 값을 리턴
  - Math.sqrt(N) N의 제곱근을 리턴
  - Math.round(N) N의 반올림된 값을 리턴
  - Math.floor(N) N의 올림 값을 리턴
  - Math.ceil(N) N의 버림 값을 리턴
  - Math.random() 0이상 1 미만의 랜덤 값을 리턴
문자열 심화
- string.length 문자열의 길이를 리턴
- string[N] 해당 인덱스의 문자를 리턴
- `string.indexof('a')
- `string.lastIndexof('a')
- string.toUpperCase() 문자열을 모두 대문자로 변환하여 리턴
- string.toLowerCase() 문자열을 모두 소문자로 변환하여 리턴
- string.trim() 양 쪽 끝의 공백을 제거한 문자열을 리턴
- string.slice([start],[end])
  - start index부터 end index 직전까지의 범위의 문자열을 리턴
  - end를 생략할 경우 start index부터 끝까지의 범위의 문자열을 리턴
  - start, end를 생략할 경우 문자열을 그대로 리턴
- 배열과 다른 점
  - typeof 연산자의 리턴 값이 다르다
  - 한 배열과 한 문자열의 내용이 같더라도 일치 비교, 동등 비교에서 false가 출력된다
  - 문자열은 배열과 다르게 바뀔 수 없는(immutable) 자료형이다
기본형(primitive type)과 참조형(reference type)
- 기본형: 변수에 할당할 때 메모리에 값을 그대로 저장한다
  - Boolean
  - number
  - String
  - null
  - undefined
- 참조형: 변수에 할당할 때 메모리의 주소 값을 저장한다
  - array
  - function
  - object
참조형 복사하기
- 참조형 변수를 다른 변수에 할당하면 주소값만 복사된다
- array2 = array1.slice(); 배열의 slice 메소드를 활용하면 배열의 실제값을 복사를 할 수 있다
- Object.assign({}, object2); Object라는 객체의 assign 메소드를 활용하면 객체의 실제값을 복사를 할 수 있다
- 객체 안에 객체가 있는 경우 실제값을 복사하는 방법이 복잡할 수 있다
const 키워드로 변수 선언하기
- 몇몇 스타일 가이드에서는 변수를 const 키워드로 선언하라고 권장하고 있다
- 변수의 재할당을 방지하여 코드의 일관성과 안정성이 올라간다
- 변수가 진짜 상수라면 이름을 대문자로 작성하고 두 단어 사이는 밑줄로 구분하여 작성하고, 변수라면 이름을 camelCase로 작성하여 구분 짓는 게 좋다
- const 키워드로 참조형 변수를 선언해도 주소값만 저장되기 때문의 객체 내부는 변동될 수 있다