[TIL] 23.03.31

오늘의 나는 무엇을 잘했을까?

학습을 하며 추가 자료를 찾아 가며 했다.
검색을 통해 조금 더 심화된 내용을 보충하며 공부하는 것이 앞으로도 도움이 될 것 같다.

오늘의 나는 무엇을 배웠을까?

JS

1. 객체 (Object)

1-1. 객체란?

• 키(key)와 값(value)으로 구성된 프로퍼티(property)의 집합
• 프로퍼티의 값은 js에서 사용 가능한 모든 값 사용
• 프로퍼티의 값으로 함수를 받을 수 있는데, 이 함수를 메소드라고 함
• 데이터 : 프로퍼티, 동작 : 메소드로 구성된 집합
• 프로토타입을 상속받을 수 있음

1-2. 프로퍼티 (property)

• key : value 로 구성됨
• key로 모든 문자열 또는 symbol 값을 사용 가능하고,
• value로 모든 값을 사용 가능함
• key에 다른 값을 지정하면 암묵적 타입 변환이 일어나 문자열이 됨
• 이미 존재하는 key를 중복 선언 시 덮어씌워짐
• 객체의 프로퍼티는 열거 시 순서가 보장되지 않음

1-3. 메소드 (method)

• 프로퍼티 값이 함수일 경우 부르는 이름
• 객체에 제한되어 있는 함수

2. 객체 생성

2-1. 객체 리터럴

• 중괄호를 사용하여 객체를 생성
• 가장 일반적인 js의 객체 생성 방식
• 빈 객체도 생성 가능
  

2-2. Object 생성자 함수

• new 연산자와 Object 생성자 함수 를 호출하여 객체 생성
• 빈 객체 생성 후 프로퍼티나 메소드를 추가하는 방식
• 객체가 소유하지 않은 프로퍼티 key에 값을 할당하면 프로퍼티가 추가되고 값이 할당 됨
  

2-3. 생성자 함수

• 객체를 생성하는 함수
• 객체를 생성하기 위한 템플릿처럼 활용할 수 있음
• 프로퍼티가 동일한 객체 여러개를 쉽게 생성
• 함수 선언과 동일하게 생성자 함수를 선언한 뒤 new 연산자를 붙여 호출하면 동작
• 일반적으로 함수명을 대문자로 시작 (일반 함수와의 혼란을 방지)
  

3. 객체 프로퍼티에 접근하기

3-1. key

• 일반적으로 문자열 지정
• 문자열이나 symbol 이외의 값 지정 시 문자열로 암묵적 타입 변환
• 문자열을 사용하므로 따옴표를 사용하지만, js에서 사용 가능한 유효한 이름일 경우 생략 가능
• 표현식을 사용할 경우 대괄호로 묶어야 함
• js 예약어는 key로 사용하지 말자

3-2. value

• 점 (.) 표기법
  key가 유효한 js 이름이고 예약어가 아닌 경우 사용
  object명.key 와 같이 사용

• 대괄호 ([ ]) 표기법
  key가 유효한 js 이름이 아니거나 예약어일 경우 사용
  object명['key'] 와 같이 사용
  이 때, 대괄호 내 프로퍼티 이름은 반드시 문자열

• 객체 내 존재하지 않는 프로퍼티를 참조하면 undefined 가 반환

3-3. value 갱신과 삭제

• 객체에 존재하는 프로퍼티에 새로운 값을 할당하면 프로퍼티 값이 갱신
• delete 연산자를 사용하여 객체의 프로퍼티 삭제, 피연산자는 key
  

3-4. 프로퍼티의 동적 생성

• 객체에 존재하지 않는 프로퍼티 key에 값을 할당
• 해당 key와 value로 프로퍼티가 생성
  

3-5. for-in 문

• 객체에 포함된 모든 프로퍼티에 대한 loop 수행

• 객체의 key를 순회함
  

• 객체는 정수형 key를 오름차순으로 정렬 후 나머지 프로퍼티를 추가한 순서대로 정렬함

• 따라서 정수형 key를 사용하면 의도하지 않은 결과를 얻을 수 있음을 유의해야 함

4. 배열 (Array)

4-1. 배열이란?

• 1개의 변수에 여러 개의 값이 순차적으로 저장된 객체
• js의 배열은 객체, 내장 메소드를 포함
• 배열의 각 값들은 요소(element)
• 각 요소들에 index 라는 순서를 알려주는 순서값이 붙음
• 마치 객체의 프로퍼티 네임

5. 배열의 생성

5-1. 배열 리터럴

• 0개 이상의 값을 쉼표로 구분하여 대괄호 ([ ])로 묶음
• 객체 리터럴과 달리 프로퍼티 네임이 없이 값만이 존재
• indexing => 대괄호 표기법을 사용하여 대괄호 안에 요소의 인덱스를 넣어 값을 얻음
• 인덱스는 0부터 시작
  

5-2. Array 생성자 함수

• new 연산자와 Array(parameter) 생성자 함수 사용하여 생성
• 매개변수가 1개이며 숫자인 경우 배열의 length 값이 됨
  
• 그 외의 경우 매개변수로 전달 된 값들을 요소로 가지는 배열을 생성
  

6. 배열 요소의 추가와 삭제

6-1. 배열 요소의 추가

• 객체와 마찬가지로 요소를 동적으로 추가 가능
• 인덱스를 사용하여 필요한 위치에 값 할당
  
• 값이 할당되지 않은 인덱스의 요소는 생성되지 않으므로 해당 요소를 참조하면 undefined가 반환
  

6-2. 배열 요소의 삭제

• delete 연산자와 인덱싱을 활용하여 삭제
• 배열의 length에는 변함이 없이, 해당 인덱스는 empty 상태가 됨
  
• 요소를 완전 삭제하여 length에도 반영하기 위해서는 후술할 splice 메소드 사용

7. 배열의 프로퍼티와 메소드

7-1. legth 프로퍼티

• 요소의 개수(배열의 길이)를 나타내는 프로퍼티
• 32bit 양의 정수로 처리
  
• 하지만 항상 배열 요소의 개수와 length 프로퍼티의 값이 일치하지 않음
  => 이를 희소 배열 (sparse array) 라고 부름
  
• length 프로퍼티를 명시적으로 변경할 수도 있음
• 현재 length 프로퍼티 값보다 작게 변경 시 length 프로퍼티 값 이상 인덱스의 요소는 모두 삭제됨

7-2. Array.isArray(arg) 메소드

• 주어진 인수가 배열이면 true, 배열이 아니면 false 반환
  

7-3. Array.from 메소드

• 유사 배열 객체(array-like object) 또는 이터러블 객체(iterable object)를 새로운 배열로 변환
  

7-4. Array.of 메소드

• 전달된 인수를 요소로 갖는 배열 생성
• Array 생성자 함수와 달리 전달된 인수가 1개이며 숫자여도 배열 생성
  

7-5. indexOf 메소드

• 배열에서 인수로 전달된 요소를 찾아 해당 인덱스 반환
• 중복되는 요소가 있으면 첫번째 인덱스
• 해당하는 요소가 없을 경우 -1
  

7-6. includes 메소드

• 배열에서 인수로 전달된 요소를 찾아 boolean 값으로 반환
• 있으면 true 없으면 false
  

7-7. concat 메소드

• 인수로 전달된 배열 또는 값을 원본 배열의 마지막 요소로 추가한 새로운 배열 반환
• 원본 배열이 변경되지 않음
• 배열을 인수로 전달하는 경우 해체하여 요소 각각을 추가
  

7-8. join 메소드

• 원본 배열의 모든 요소를 문자열로 변환
• 인수로 전달 받은 구분자로 연결한 문자열 반환
• 구분자 생략 가능, 기본 구분자는 comma( , )
  

7-9. push 메소드

• 인수로 전달 받은 모든 값을 원본 배열의 마지막에 요소로 추가
• 변경된 length 값 반환
• 원본 배열을 직접 변경
  

• 배열을 인수로 전달 받는 경우 배열 자체를 요소로 추가
  
• 성능면에서 push 메소드는 좋지 않다고 한다
• 대체제로 length 프로퍼티를 활용하여 직접 요소를 추가하거나 spread 문법을 사용하는 편이 낫다

7-10. pop 메소드

• 원본 배열에서 마지막 요소 제거, 제거한 요소를 반환
• 원본 배열이 빈 배열이라면 undefined 반환
• 원본 배열을 직접 변경
  

7-11. 스택 (stack)

• 데이터를 마지막에 밀어넣고, 마지막에 넣은 데이터를 먼저 꺼내는 자료 구조
• LIFO 후입선출 방식
• 앞서 살펴본 push 와 pop 메소드를 사용하면 쉽게 구현이 됨
• 데이터를 밀어 넣는 것 => push , 데이터를 꺼내는 것 => pop

7-12. shift 메소드

• 원본 배열에서 첫 요소 제거, 제거한 요소 반환
• 원본 배열이 빈 배열이라면 undefined 반환
• 원본 배열을 직접 변경
  

7-13. 큐 (queue)

• 데이터를 마지막에 밀어넣고, 먼저 들어온 것을 먼저 꺼내는 자료 구조
• FIFO 선입선출 방식
• 앞서 살펴본 push 와 shift를 사용하면 큐처럼 구현 가능
• 데이터를 밀어 넣는 것 => push , 데이터를 꺼내는 것 => shift

7-13. unshift 메소드

• 인수로 전달 받은 모든 값을 원본 배열의 첫 요소로 추가
• 변경된 length 값 반환
• 원본 배열을 직접 변경
  
• 배열을 인수로 전달 받는 경우 배열 자체를 요소로 추가
  

7-14. reverse 메소드

• 배열 요소 순서를 반대로 변경하고 변경된 배열을 반환
• 원본 배열을 직접 변경
  

7-15. slice(start = 0, end = this.length) 메소드

• 인자로 지정된 배열의 부분을 복사하여 반환
• start 부터 end 직전 요소까지 복사
• 원본 배열은 변경되지 않음
• start : 복사를 시작할 인덱스, 음수일 경우 배열 끝에서부터의 인덱스
• end : 옵션값, 기본값은 length
  

7-16. splice(start, deleteCount, items) 메소드

• 배열의 요소를 제거하고 그 위치에 새로운 요소 추가
• 삭제한 요소들을 가진 배열을 반환
• 배열 중간에 새로운 요소를 추가할 때도 사용
• start : 시작 위치, start만 지정할 시 start를 포함한 이후 모든 요소 제거
• deleteCount : 제거할 요소의 수, 0 이면 제거 되지 않음
• items : 요소가 삭제된 자리에 추가할 요소, 없으면 제거만 실행
• 원본 배열을 직접 변경
  

8. for-of 문

• 반복할 수 있는 객체를 순회할 수 있는 반복문
• 루프마다 객체의 프로퍼티 값을 지정된 변수에 대입

for (변수 of iterable-object) {
	loop마다 반복할 동작;
}

9. 자료형 심화

9-1. 숫자형 메소드

• toFixed(n)
  인자 n에 따라 소수점 아래 자릿수를 고정해 준 (반올림 하여) 문자열을 반환
  만약 기존 소수점 자리보다 큰 수를 인자로 넣으면 0 으로 자릿수를 채움
• toString(n)
  인자 n에 따라 n진법으로 숫자를 변환하여 문자열로 반환

9-2. Math 객체

• Math.abs(n) : 절댓값 반환
• Math.max / min(n1, n2, n3 ...) : 인자 중 최댓값 / 최솟값을 반환
• Math.pow(a, b) : a의 b제곱의 값이 반환
• Math.sqrt(n) : n의 제곱근 반환
• Math.round(n) : n의 반올림 된 값 반환
• Math.floor / ceil(n) : n의 버림값 / 올림값 반환
• Math.random() : 0 이상 1 미만의 랜덤 값 반환
• Math 객체

오늘의 나는 어떤 어려움이 있었을까?

Weekly 미션을 시작하려 했으나, 시간적 여유가 없었다.
시간 분배를 잘 해보자.

내일의 나는 무엇을 해야할까?

• Weekly Mission