티스토리툴바

Front End/JavaScript

배열, 객체

배열 (Array)

다량의 데이터를 다룰 수 있는 데이터 타입.

  • 순서(index)에 대한 정보를 가진 자료구조
  • 대괄호[] 를 사용하며, 각각의 요소는 쉼표 , 로 구분한다.
  • 실제로 들어가는 값을 요소(element)라 부름
  • 순서는 인덱스(index)라 부르며, 0부터 시작한다.
  • 배열 내의 값으로도 배열이 들어 갈 수 있다.

배열 활용법

배열 내부의 값은 인덱스를 사용해 접근, 변경이 가능하다.

let myNum = [73, 98, 86, 61, 96]
myNum[3]; // 61
myNum[3] = 200; // 세번째 인덱스 값에 200 할당
myNum; // [73, 98, 86, 200, 96]

let myNumber = [[13, 30], [73, 8], [44, 17]];
myNumber[0]; // [13, 30]
myNumber[1][0] // 73
  • .length : 배열의 길이 확인 가능
  • .push() : 배열 끝에 새로운 요소을 넣을 수 있음
  • .pop() : 배열 마지막 요소을 삭제
  • .shift() : 배열 첫 번째에 요소을 삭제
  • .unshift() : 배열 첫 번째에 요소를 추가
  • .splice(index, deleteCount, Value) : 특정 인덱스 다음에 요소를 추가/삭제 → start 에는 추가 될 순서의 index 입력 → deleteCount 에는 삭제 할 요소의 갯수를 입력. 0인 경우 제거하지 않음 → Value 에는 추가 할 요소를 입력. 만약 입력하지 않을 경우 앞의 조건에 따라 제거만 함
☝
console.table() console.table()을 사용하면 해당 배열을 표 형식으로 확인할 수 있다.

변수가 배열인지 판별하는 Array.isArray()

변수나 값의 타입은 typeof 를 사용하면 확인 할 수 있지만 배열과 객체는 모두 object 라는 결과값이 나온다. 이 때 Array.isArray() 를 사용하면 배열인지를 확인하여 불리언 값을 도출한다.

배열에 특정 값이 포함되어 있는지 확인하기

  • .indexOf() : 배열 내에 포함된 요소를 입력하면 인덱스를 찾아준다. 아무 것도 없으면 -1을 도출한다.
  • .includes() : 배열 내에 포함된 요소가 있는지 판단하여 불리언 값을 도출한다. 단, IE에서는 사용 할 수 없다.

여러 배열을 하나로 합치는 방법

  1. 새로운 배열 선언 후 배열 내부에 ...array1, ...array2 와 같은 방식으로 입력한다.
  1. array.concat() 메소드를 사용한다. ex)array1.concat(array2)

배열 내의 값을 하나의 문자열로 연결하는 Array.join()

해당 메서드를 사용하면 배열 내의 값을 모두 연결해 하나의 문자열 값을 도출한다. 기본 값은 쉼표,로 연결하고 괄호() 안에 특정 문자열을 입력하면 값과 값 사이에 해당 문자열을 넣어서 출력한다.

배열을 복사하거나 잘라낼 때 사용하는 .slice()

배열은 JavaScript에서 Mutable type 이기 때문에, 재할당 시 원시형 타입과 달리 새로 데이터 공간을 할당하지 않고 변경된다. 만약 새로운 배열이 필요 할 경우 .slice() 를 사용할 수 있으며 일부를 추출해야 할 경우 .slice(start, end)에 각각 시작 index, 끝 index(해당 index를 포함하지 않음)을 입력해 새로운 배열로 추출할 수 있다.

배열과 반복문의 활용

인덱스와 .length 를 활용해 반복문에 적용할 수 있다.

let myNum = [73, 98, 86, 61, 96];
for(i = 0; i < myNum.length; i++){
	console.log(myNum[i]);
}
let myNum = [10, 20, 40, 10];
let sum = 0;
for(i = 0; i < myNum.length; i++){
	sum = sum + myNum[i];
}

객체

배열과 마찬가지로 다량의 데이터를 다룰수 있는 데이터 타입이나 내부에 접근 할 때 인덱스가 아닌 의미를 가진 키(Key)을 지정하여 접근 할 수 있다.

  • 중괄호{} 를 사용하며, 키(Key)와 값(Value)는 콜론: 으로 구분한다.
  • 키-값 쌍(key-value pair)는 쉼표,로 구분한다.

객체의 값을 사용하는 방법

추가와 사용, 삭제

객체 내에 정의 된 키를 이용해 값을 가져온다. 정의되지 않은 키와 값을 아래의 형식으로 입력하면 객체에 추가된다. 앞에 delete 를 포함해 입력하면 키-값 쌍은 삭제된다.

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

// dot notation
user.firstName; // 'Steve'
user.city; // 'seoul'

// bracket notation
user['lastName']; // 'Lee'
user['email']; // 'steve@mail.com'

// delete
delete user.city; //{ firstName: 'Steve', lastName: 'Lee', email: 'steve@mail.com' };
  • Dot notation Object.Key Array.length 처럼 속성을 가져오는 방식으로 값을 가져온다.
  • Bracket notation Object[Key] Array[Index] 처럼 키를 입력해 값을 가져온다. 이 때 키는 문자열 ‘’ 형태로 입력한다.
    • ⚠️ 문자열 형태로 입력하지 않으면 다른 선언된 데이터를 참조한다 (변수, 전달인자 등) → 반대로 말해, 특정되지 않은 객체를 받아서 사용해야 하는 경우 이런 특성을 활용 가능

in 연산자를 이용해 키 존재 유무 확인

‘Key’ in Object 의 형식으로 입력하면 내부에 값이 있는지 확인하여 불리언 값을 도출한다.

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

'city' in user; // true
'age' in user; // false


Uploaded by N2T

티스토리툴바