💡 이번에 배운 내용
- Section1.
웹 프론트엔드 개발의 기초지식을 기반으로 스스로 단순한 Web App을 만들 수 있다.- Unit 9. Javascript 배열, 객체: 배열과 객체, 그 메서드에 대해 학습한다.
느낀점
배열과 객체는 크게 어렵지 않았지만 각 메서드와 그 특징, 메서드가 mutable인지 immutable인지 확실히 알아두지 않으면 문제풀기 어려웠던 유닛이었다.
다행히 계속해서 정리하며 학습해서 메서드를 크게 헷갈리지는 않았다.
그리고 배열과 객체의 구조가 흥미롭고 여러 데이터를 다루는데 실용적이어서
개인적으로 재미도 있었다.🥹
연습 코딩문제는 저번만큼 어렵지 않았지만 이 기세로 부디 다른 코딩문제들도 저번보다는 수월히 풀길 바랄 뿐이다......!
키워드
배열, 객체, array, object, index, Array.isArray(array), mutable, immutable, dot notation(점 표기법), bracket notation(괄호 표기법), for...of, for...in
학습내용
Ch1. 배열
배열은 리스트에 여러 값을 포함하고 있는 하나의 객체이며 순서가 있는 값이다.
배열의 기본 개념
배열의 순서는 인덱스(index), 값은 요소(elements) 라고 한다.
배열은 대괄호([], square bracket)안에 각각의 요소가 쉼표로 구분되어 있다.
배열은 console.table(배열); 구문을 이용하면 쉽게 그 구조를 알 수 있다.
let myArray=[1,2,3,4];배열의 요소는 인덱스를 이용해 접근하며 재할당으로 값 변경이 가능하다.
없는 인덱스의 값은 undefined이다.
또한 배열은 중첩이 가능하다.
배열의 메서드
배열의 메서드는 여러 가지가 있다.
split(), join(), slice(), splice(), Array.isArray(), push(), unshift(), pop(), shift(), indexOf(), includes()
이 메서드를 무작정 외우기보다 어떤 기능이 있고,
mutable한지 immutable한지 확실히 알아두는 것이 중요하다.
(myArray는 임의의 배열이다.)
- myArray.length : 배열의 길이를 알아낼 수 있다.
- myArray.push(추가할 값) : 요소를 추가한다. (mutable)
- myArray.pop() : 마지막 요소를 삭제한다. (mutable)
- myArray.shift() : 처음 요소를 삭제한다. (mutable)
- myArray.unshift(추가할 값) : 배열의 처음에 값을 추가한다. (mutable)
- myArray.splice(시작 인덱스, [삭제할 개수], [추가할 값]) : 배열의 요소를 삭제하거나 추가한다. 삭제할 개수와 추가할 값은 생략 가능하고 추가할 값은 여러 개도 가능하다. (mutable)
- myArray.indexOf(찾는 값) : 배열에서 찾는 값이 있으면 그 인덱스를 출력한다. (없으면 -1)
- myArray.includes(찾는 값) : 배열에서 찾는 값이 있으면 true를, 없으면 false를 반환한다. 예전에는 인터넷 익스플로러(1955-2022)에서 사용할 수 없었다.
- myArray1.concat(myArray2) : 배열 myArray1과 배열 myArray2를 합쳐 하나의 배열로 만든다. (immutable)
myArray1과 myArray2의 원본은 바뀌지 않는다.
배열 메서드의 활용
- indexOf()를 이용한 값 검사하기:
myArray.indexOf(검사할 값)!==-1 이 true일 경우 검사할 값이 myArray에 있는 것이다. - 반복문을 이용해 배열의 요소 하나씩 출력하기
for(let i=0; i<myArray.length; i++){
console.log(myArray[i]); //배열의 요소를 하나씩 출력
}
//let i=0; 인덱스가 0으로 시작하므로 0부터 시작
//i<myArray.length; 배열의 길이만큼 반복. 0부터 시작하니 미만
//i++ 하나씩 증가- 반복문을 이용해 배열의 합 구하기
배열 요소의 합을 구할 때 총 합계 변수의 초기값은 0이여야 한다.
undefined인 경우 undefined에 숫자를 더했을 때 NaN이 나오기 때문이다. - 배열의 type : 배열은 typeof의 결과가 "object"가 나온다.
- 배열 판별하기 :
(때문에) 배열인지 아닌지 판별하기 위해서는 .isArray(임의의 값)를 사용해야 한다.
임의의 값이 배열일 경우 true가 출력된다. - 위의 메서드 중 push(), pop(), shift(), unshift()를 실행한 값을 확인하면
배열이 아니라 추가하거나 삭제한 값 자체가 확인된다.
Ch2. 객체
공통적인 속성을 가진 데이터를 여럿 다뤄야 할 때,
객체를 사용하는 것이 좋다.
만약 이 데이터를 배열로 처리한다면 각 요소가 어떤 의미를 가지고 있는지 직접 매변 확인해 봐야 한다.
객체의 구성
객체는 키와 값의 쌍으로 구성되어 있다.(key:value)
키와 값 사이에는 콜론(:)으로 구분하고
키-값과 키-값 사이는 콤마(,)로 구분한다.
전체는 중괄호({})로 묶인다.
객체의 값 접근
- 방법1 dot notation(점 표기법) : 객체명.키
- 방법2 bracket notation(괄호 표기법) : 객체명['키']
(키를 감쌀 때 따옴표 외에 백틱(``)도 사용 가능하다.)
(맞는 문자열을 변수에 할당하고, 그 변수를 사용할수도 있다. 이 때는 변수므로 따옴표를 사용하지 않는다.)
let user1={
name: 'lee',
age: 21,
id: 'n1234'
};
//1. dot notaion
console.log(user1.name); // 'lee'
//2. bracket notation
console.log(user1['name']); // 'lee'만약 bracket notation의 경우 잘못 접근했을 경우 에러가 뜬다.
ex. user1[name]
-> Uncaught ReferenceError: name is not defined
그리고 bracket notation은 키 명이 동적으로 변할 때 용이하다.
객체의 사용
- 추가 및 수정
객체를 접근하는 방식으로 접근하고, 할당하면 값을 수정하거나 추가할 수 있다.
ex. user1.name='kim';
값은 배열도, 심지어 객체도 추가가 가능하다. - 삭제
삭제는 아래와 같이 delete를 이용해 삭제한다.
ex. delete user1.name; - in 연산자
해당 키가 있는지 확인할 수 있으며 boolean타입으로 반환한다.
ex. 'name' in user1; //true
객체를 순회하는 방법, 응용
- 1) for in
for of처럼 객체를 순회할 때 사용하는 for문 활용법. (아래 질문해보기 2번 참고) 제일 간단한(?) 순회 방법이다. - 2) Object.keys(obj)
객체의 키만 배열 형태로 반환한다. - 3) Object.entries(obj)
한 쌍을 ['키',값]으로 구성된 배열(키는 문자열)로 만들고, 이 배열들을 담은 배열을 반환한다.
이를 for문과 함께 사용할 때 for...of를 사용한다.
다만, 반환된 배열의 순서가 중요하다면 먼저 정렬을 해야 한다.
let obj1={ a:'1',b:2,c:'aef'};
let result=Object.entries(obj1);
console.log(result);
/*
(3) [Array(2), Array(2), Array(2)]
0: (2) ['a', '1']
1: (2) ['b', 2]
2: (2) ['c', 'aef']
length: 3
[[Prototype]]: Array(0)
*/참고 및 출처:
lilyoh.log - js object 요소에 접근하고 순회하기
intrepidgeeks.com - javascript 객체 순회
javascript MDN - Object.keys()
javascrpit MDN - for...in
javascript MDN - Object.entries()
질문해보기
1. typeof가 모든 타입을 그대로 나타내지 못할 때는?
null과 array는 "object"로 출력된다.
때문에 null은 따로 예외로 비교해야하고,
array인 경우 Array.isArray(검사할 값)를 사용해야 한다.
something===null; //something이 null이면 true, 아니면 false
Array.isArray(something); //something이 배열이면 true, 아니면 false참고:
javascript MDN - typeof
javascript MDN - isArray()
2. for in과 for of
- for in
객체에 유용하게 사용할 수 있는 문법
순서가 없는 객체 사용을 권장하며 순서가 있는 배열에는 사용 권장X
(구조에 따라 반복하는 순서가 다를 수 있으므로!)
const myObject = { first: 1, second: 2, third: 3 }; //a,b,c는 키, 1,2,3은 각 값
for (const property in object) {
console.log(`${property}: ${object[property]}`);
//'키: 값' 을 출력
}참고 및 출처: javascript MDN - for...in
- for of
배열처럼 반복되는 열거가능(enumerable)한 속성이 있는 객체를 반복문에 사용할 때 용이하다.
const myArray = ['first', 'second', 'third'];
for (const el of myArray) {
console.log(el); // 배열의 각 요소를 차례로 출력
}참고 및 출처 : javascript MDN - for...of
3. 변수에 배열을 할당하고, 변수에 요소를 추가하거나 삭제하면?
놀랍게도 원본 배열도 같이 변경된다!
let arr1=[1,2,3];
let result=arr1;
result.push(4);
console.log(arr1); //1,2,3,4이 문제를 해결하기 위해서는 변수에 배열을 slice()를 이용해 복사하여 할당해야 한다.
let arr1=[1,2,3];
let result=arr1.slice();
result.push(4);
console.log(arr1); //1,2,34. join() 메서드
join(기준)메서드는 ()안의 기준으로 배열의 요소들을 연결하여 문자열을 만든다.
join()일 경우 배열의 요소들을 ','로 연결하여 문자열을 만들고
join('')일 경우 배열의 요소들을 모두 붙여서 문자열을 만든다.
참고 및 출처: javascript MDN - join()
5. 추가학습 : JSON
JSON(JavaScript Object Notation)은 Javascript 구조화된 데이터를 표현하기 위한 문자 기반의 표준 형식이다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용하며 객체와 유사한 형식을 갖고 있다.
(객체처럼 생겼지만 객체와 달리 키 부분이 문자열이다.)
원하는 정보에 접근할 때 객체와 마찬가지 방식으로 접근할 수 있다.
(다행히 지난번 터미널에 대해 학습하며 npm, node를 다룰 때 본 거라 모양새가 크게 어색하지 않았다.)
참고 및 출처: javascript MDN - JSON
6. 키 이름을 넣지 않아도 자동으로 지정된다?!
(220927 추가)
변수에 값을 할당하고, 값만 있는 변수로 객체를 만들면?
자동으로 변수명이 키 명이 된다.
let a='apple';
let b='banana';
let result1={a,b}
let result2={a,monky:b}
console.log(result1);
//{a: 'apple', b: 'banana'}
console.log(result2);
//{a: 'apple', monky: 'banana'}