[JS/Node] 배열, 객체

LEE JI YOUNG·2021년 9월 3일

1-10 210826 JS/Node SEB_Full 코드스테이츠

JS/Node

목록 보기

5/23

배열 기초

배열, 객체
- 수 많은 데이터를 한 번에 처리하는 방법. 인스타그램이나 카카오톡 같은 대규모 서비스에서 매번 새로운 변수를 선언한다면, 같은 일을 여러번 반복하게 된다. 한 번에 최소 100개 이상의 데이터를 사용할 때, 배열이나 객체를 사용한다면 단 한 번의 선언으로 해결 가능. 이런 대량의 데이터를 쉽게 다룰 수 있게 해주는 데이터 타입, 배열과 객체.
- 대량의 데이터를 다루기에 적합하게 제작된 데이터 타입
- 배열과 객체는 참조 타입(reference type) 데이터.
- 참조 타입은 원시 타입(숫자, 문자열, boolean, undefined 등) 데이터와 다른 성격
- 반복문 : 대량의 정보를 처리하는 법
- 배열, 객체 : 대량의 정보를 보관하고 관리하는 법
배열 특징 : 순서에 집중. 인덱스로 요소를 조회 - arr[index]
객체 특징 : 키의 의미에 집중한 데이터 구조. 키의 속성으로 요소를 조회 - obj.name
(.)온점(dot) : 온점을 이용해서 변수가 가지고 있는 속성(property)에 접근 가능. 관련된 명령(method) 실행 가능. 함수처럼 ()소괄호 이용한 형태로 실행.
- method : 문자열or배열변수.length, 배열변수.push(요소), 배열변수.pop()
배열 오름차순, 내림차순 정렬

배열 Array

배열 : 순서(index)가 있는 값 (index : 0부터 시작)
대괄호(square bracket)을 이용해서 배열, 원소(element), 쉼표(comma)로 구분
let 배열변수 = [원소, 원소, 원소, 원소];

let myNum = [73, 98, 86, 61, 96];
// "myNum"이라는 배열의 3번째 인덱스 값은 61 : myNum[3] 값은 61

배열 값 변경

값은 인덱스 통해 접근 : 배열변수[index];

myNum[3] = 200;
// myNum = [73, 98, 86, 200, 96]

let myNum1 = [[13, 30], [73, 8], [44, 17]];
// myNum1의 1번째 인덱스 값 : myNum1[1] 값은 [73, 8]
// myNum1의 1번째 인덱스 값의 0번째 인덱스 값 : myNum1[1][0] 값은 73

배열 길이

배열의 길이 : 배열변수.length;

let myNum = [73, 98, 86, 61];
// myNum.length; => 4

배열 요소(element) 추가 (+)

배열의 요소 추가
- 끝에 추가 : myNum.push(요소) : 리턴 값은 방금 추가된 후 배열.length
- 앞에 추가 : myNum.unshift(요소) : 리턴 값은 방금 추가된 후 배열.length
- myNum 배열 자체가 바뀌게 됨.

let myNum = [73, 98, 86, 61];

// 끝에 요소 추가
myNum.push(96);  // 리턴 값은 추가된 배열의 길이 5
// myNum이라는 배열 끝에 96 추가
// myNum = [73, 98, 86, 61, 96];

// 앞에 요소 추가
myNum.unshift(96);
// myNum이라는 배열 앞에 96 추가
// myNum = [96, 73, 98, 86, 61];

배열 요소(element) 삭제 (-)

배열의 요소 삭제
- 끝에 삭제 : myNum.pop() : 리턴 값은 방금 삭제된 첫번째 였던 요소
- 앞에 삭제 : myNum.shift() : 리턴 값은 방금 삭제된 마지막번째 였던 요소
- myNum 배열 자체가 바뀌게 됨.

let myNum = [73, 98, 86, 61];

// 끝에 요소 삭제
myNum.pop(); // 리턴 값은 방금 삭제된 마지막번째 요소인 61
// myNum이라는 배열 끝에 요소 삭제
// myNum = [73, 98, 86];

// 앞에 요소 삭제
myNum.shift(); // 
// myNum이라는 배열 앞에 요소 삭제
// myNum = [98, 86];

배열의 반복 literation of an array

반복문 이용

반복문을 이용해 배열의 요소를 한번씩 출력하려면?

let myNum = [73, 98, 86, 61];

for(let n = 0; n < myNum.length; n++){
	console.log(myNum[n]);
}
// myNum.length 값은 4, 출력은 index 3 까지

배열 기초 메소드

배열과 객체의 타입 : object

let myNum = [73, 98, 86, 61];   //배열
let obj = { a: 1};              // 객체

typeof = myNum        // "object"
typeof = [1, 2, 3]    // "object"
typeof = obj          // "object"

배열 확인

배열 boolean 값으로 확인 : Array.isArray(배열)

Array.isArray( myNum )        // true
Array.isArray( [1, 2, 3] )    // true
Array.isArray( [] )           // true

배열 테이블로 확인 : console.table(배열)
배열 요소 포함 여부 확인 :

배열변수.indexOf('있는지 확인하고 싶은 요소')
- 검색한 요소 없을 때 결과값 : -1
- 인덱스 정보, 포함여부(-1)알 수 있음.
- 호환성 좋음

let words = ['a', 'ab', 'abc'];   //배열

words.indexOf('a');        // 0
words.indexOf('abc');      // 2
words.indexOf('없는단어');      // -1

//응용 : 결과값이 -1이 아니면 존재하는 요소
words.indexOf('없는단어') !== -1;      // false  : 없다
words.indexOf('A') !== -1;            // false : 없다
words.indexOf('ab') !== -1;           // true  : 있다

배열변수.includes('있는지 확인하고 싶은 요소')
- 호환성 안좋음 : 익스플로러 지원안됨.

let words = ['a', 'ab', 'abc'];   //배열

words.includes('없는단어')  // false  : 없다
words.includes('A')       // false : 없다
words.includes('ab')      // true  : 있다

객체 Object

객체 : 각기 다른 값을 가질 수 있지만, 입력해야하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리 가능. 공통적인 속성을 가지는 경우 객체를 사용한다. ( 예. 회원 주소록 )
- 중괄호(curly bracket)을 이용해서 객체, 키 : 값 쌍(key-value pair), 쉼표(comma)로 구분
배열은 각 인덱스가 어떤 정보를 가지는지 알 수 없다.

let user = ['Steve', 'Lee', 'steve@code.com', 'Seoul']; 
let user = ['Jason', 'Kim', 'Jason@code.com', 'Busan'];

객체는 각 인덱스를 키-값 쌍(key-value pair)으로 이루어져 정보 알 수 있다.

let user = {
  firstName : 'Steve', 
  lastName : 'Lee', 
  email : 'steve@code.com', 
  city : 'Seoul'
};

객체 값 사용하는 방법 2가지

Dot natation : 객체변수.키
- 키를 바꿀 수 없다.

user.firstName;      // 'Steve' 
user.city;           // 'Seoul'

Bracket natation : 객체변수['키'] , 객체변수[변수]
- 키를 변수로 설정하여 여러 값을 찾아볼 수 있다.


user['firstName']   // 'Steve' 
user['city']        //'Seoul'
user[city]  // ** content is not defined 에러가 난다 = city라는 변수가 정의된 적이 없다.   

let keyname = 'city';
user[Keyname]  //  'Seoul'

user.city === user['city'] !== user[city]

객체 값 추가 (+)

: 객체변수.키 = 값;

값 타입은 관련 없다!

let user = {
  firstName : 'Steve', 
  lastName : 'Lee', 
  email : 'steve@code.com', 
  city : 'Seoul'
}; 
// 객체 값 추가
user['age'] = '28';
user.isPublic = true;
user.tags = ['#코드스테이츠', '#개발자과정'];

// 객체 변환
//let user = {
//  firstName : 'Steve', 
//  lastName : 'Lee', 
//  email : 'steve@code.com', 
//  city : 'Seoul'
//  age : '28',
//  isPublic : true,
//  tags : ['#코드스테이츠', '#개발자과정']
//};

객체 값 삭제 (-)

: delete 키.값;

// 키-값 쌍 지우기
delete user.age;
delete user['age'];

객체 키 확인

: 키 in 객체변수;

let user = {
  firstName : 'Steve', 
  lastName : 'Lee', 
  email : 'steve@code.com', 
  city : 'Seoul'
}; 
// 확인
'firstName' in user;   //true
'Name' in user;   //false

배열 메소드

배열 복사

그외 내용

undefined + 10 = NaN
=== : 값과 타입을 모두 비교. 엄격한 비교
== : 값만 비교, 느슨한 비교 (1=='1')
[] === [] // false : 주소(위치)가 서로 달라서..
배열, 객체는 비교할 수 없다. 배열, 객체는 reference type참조형이다.
배열을 복사하는 방법 : arr.slice()
arr.length // 0, 요소의 갯수, [] 빈배열이라는 말
Array.isArray(arr) : 배열 확인(빈배열도 배열)
배열.splice(<제거를 시작할 인덱스>, <제거할 엘리먼트 수>, <제거할 자리에 새롭게 집어넣을 엘리먼트>) : 배열o, 문자열x, splice라는 메소드는 ‘배열’에서 요소의 범위를 정해 제거하거나, 어떤 자리에 요소를 추가하는 메소드
배열.join('-') : 배열의 요소들을 ()안의 것으로 합친 문자열로 변환
반복문 - 배열,문자열 : for(let el of arr)
반복문 - 객체 : for(let key in obj)
자바스크립트는 대/소문자 다르게 판단.
Slice vs Splice vs Split의 차이점 slice와 splice는 다름!!!
자바스크립트에서 유용할 수도 있는 연산자들 모음
VSC 코드 줄이동 : option키 누르고 드래그 (mac). // alt + 방향키
key값은 스트링
let 쓰는 이유 : 재선언될까봐 index값이 변할 수 있어서
const : 재할당이 안됨. 따라서 // let은 어딘가에서 재할당 가능.
let obj1 = {a:2 , b:3};
let obj2 = obj1;
하면 obj2.pop()하면 obj1도 변하는 이유가 궁금해요
---> 참조형은 서로 연결되어있다. 추후에 배울 내용