🌱용어 정리
-
배열(Array) : 순서에 대한 정보(index)를 가지고 있는 참조형 데이터 타입이자 순서(index)가 있는 값(element)으로 대괄호([])를 이용해서 만든다.
-
메서드(Method) : 객체 지향 프로그래밍에서 객체와 관련된 서브 루틴(함수)이며 데이터와 멤버 변수에 대한 접근 권한을 갖는다.
🌱배열 기본 조작
- 요소 접근 : 인덱스를 이용해 접근한다.
let fruits = ['banana', 'apple', 'pineapple'];
fruits[2]; // "pineapple"
fruits[3]; // undefined
let myNum = [ // 2차원 배열
[13, 30],
[73, 8],
[44, 17],
];
myNum[1][0]; // 73- 배열의 길이 :
length를 이용한다.
let myNum = [23, 4, 51, 87];
myNum.lenght; // 4🌱배열의 반복
- 배열과 반복문은 조합하는 경우가 많다.
let myNum = [23, 4, 51, 87];
for(let n = 0; n < myNum.length; n++) {
console.log(myNum[n]);
}- for of 문 : 반복가능한 객체(Array, Map, Set, String, TypedArray)에 대해 반복하는 반복문
🌱배열 메서드
-
Array.isArray(): 배열인지 아닌지 판별하는 메서드 (배열은 typeof로 검사했을 때 object라고 나옴) -
배열 요소 추가 및 삭제 :
pop(),push(),shift(),unshift()
myNum.pop(); // 배열 마지막 요소 삭제
myNum.push(); // 배열 마지막에 요소 추가
myNum.shift(); // 배열 첫번째 요소 삭제
myNum.unshift(); // 배열 첫번째 요소 추가
// 원본 배열을 변경한다 (mutable)- 배열 요소의 포함여부 확인 :
indexOf,includes
let words = ['a', 'b', 'c'];
words.indexOf('b'); // 1
words.indexOf('d'); // -1, 배열에 없는 단어
words.indexOf('c') !== -1 // true
words.includes('a') // trueindexOf는 해당하는 요소의 index까지 알아낼 수 있고 모든 브라우저에서 지원하지만, includes는 IE에서 지원되지 않음.
(indexOf가 호환성, 범용성 측면에서 더 좋다!)
🌱Mutable & Immutable
- Mutable : 변경 가능한 변수의 유형 (ex. 객체, 배열)
- Immutable : 변경 불가한 변수의 유형
🌱객체
- 객체(Object) : 키-값 쌍(key-value pair)으로 이루어져 있는 참조 자료형, 데이터에 의미를 부여할 수 있다.
객체는 게임 캐릭터에 비유할 수 있다!
ID와 직업을 가진다는 틀은 같지만, ID와 직업의 세부 내용은 각각 다른 것 처럼.
// 각 변수는 서로에 대한 관계성이 없음
let userName = 'hazel';
let userClass = 'Sorceress';
let user2Name = 'nut';
let user2Class = 'Warrior';
// 각 값이 하나의 배열로 묶여있긴 하지만, index가 어떤 정보를 갖고 있는지 미리 알아야하며, 가독성도 떨어짐
let user = [
'hazel',
'Sorceress'
];
let user2 = [
'nut',
'Warrior'
];
// 객체
let user = {
userName: 'hazel',
userClass: 'Sorceress'
};- 객체의 값을 접근하는 방법
- Dot notation : key값을 . 으로 접근할 수 있다.
user.userName; // 'hazel'- Bracket notation : key값을 []안에서 문자열 형식으로 전달하여 접근한다.
user['userName']; // 'hazel'- 주의 사항
let userName = 'kim'
user[userName] === user['userName']; // false, 따옴표가 없어서 userName은 변수로 취급된다.
user['userName'] === user['kim']; // true- 속성 추가, 삭제, 존재 여부 확인 :
delete,in
user['level'] = '60'; // 기존에 없는 key로 속성 추가
delete user.level; // key값으로 속성 제거
'level' in user; // false- for in 문 : 상속된 열거 가능한 속성들을 포함해 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대한 반복문 (쉽게 말해서 객체를 순회하는 반복문)
🌱Tips
console.table(arr): 테이블로 배열 출력debuggger; [함수_호출부]: 개발자 도구에서 F9를 눌러서 디버깅 가능 (종료는 F8)- 의사코드 잘 쓰는 법: 입력값, 출력값을 먼저 정의하자!
// 입력값 : 문자열 ex) 'apple'
// 출력값 : 각 문자를 키로 갖는 객체 {a: 1, p: 2, l: 1, e: 1}
🌱알게된 점 & 느낀 점
- 배열과 객체의 개념과 다양한 메서드들을 알고 쓸 수 있게 되었다.
- for of와 for in의 차이를 알고 쓸 수 있게 되었다.
- 배열보다 객체를 순회해서 값에 접근하는게 조금 더 추상적이고 어렵게 느껴졌다.
🌱추가 학습
- dot notation과 bracket notation의 차이 조금 더 알아보기
- JSON을 JavaScript배열의 형태로 바꾸는 방법 검색해보기
- 객체에 대한 다른 자료 더 찾아보기
| 참고자료 |
FE developer