오늘의 나는 무엇을 잘했을까?
학습을 하며 추가 자료를 찾아 가며 했다.
검색을 통해 조금 더 심화된 내용을 보충하며 공부하는 것이 앞으로도 도움이 될 것 같다.
오늘의 나는 무엇을 배웠을까?
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 미션을 시작하려 했으나, 시간적 여유가 없었다.
시간 분배를 잘 해보자.
내일의 나는 무엇을 해야할까?