「웹해킹을 위한 자바스크립트(Javascript) 훑어보기」- 3. 데이터 구조(배열, 객체, 반복)

본 글은 Udemy(유데미)에서 제공하는 Colt Steele님의 「The Web Developer 부트캠프 2023」 강의를 수강하며 배운 내용을 바탕으로 작성했습니다. 

웹 해킹 및 보안에 쓰이는 자바스크립트 코드를 보고 이해할 수 있는 수준에 다다르기 위해 전반적인 내용을 가볍게 훑어보는 기획입니다.

 

이번에는 JS의 데이터 구조, 배열과 객체를 간단하게 알아보겠습니다.

이를 활용하는 반복 구문도 함께 알아보도록 합시다.

 

배열(array)

 

연속된 데이터를 표현할 수 있는 구조로, 어떤 자료형이든 넣을 수 있습니다.

대괄호로 감싸서 배열임을 표현합니다.

 

let array = []	#배열 선언
let colors = ["red", "orange"]

 

자바스크립트에서 배열은 다른 언어에서의 리스트(list)와 유사하게 동작합니다.

배열에는 여러 자료형이 섞여도 상관없습니다.

 

let anything = [true, 12, 9.99, NaN, "Hello"]

 

배열 자료형인 만큼 인덱스를 통해 요소에 접근할 수 있습니다.

문자열 역시 인덱스를 통해 문자에 접근할 수 있습니다.

 

배열에 포함된 문자열의 문자에는 인덱스를 두 번 사용하여 접근할 수 있습니다.

첫 번째 인덱스로 배열의 요소에 접근하고,

두 번째 인덱스로 문자열의 문자에 접근합니다.

let days = ["monday", "tuesday"]
days[0][0]  //"m"

 

배열의 크기보다 큰 인덱스에 값을 대입하면 그만큼 빈 공간이 생깁니다.

let days = ["monday", "tuesday"]

days[5] = "saturday"

days.length  //6

days
// ['monday', 'tuesday', empty × 3, 'saturday']

---

배열 메서드

자바스크립트의 배열은 스택과 큐로 활용할 수 있습니다.

• push: 배열의 마지막에 원소를 추가합니다.
• pop: 배열의 마지막에 있는 원소를 삭제합니다.
• shift: 배열 가장 앞에 있는 원소를 삭제합니다.
• unshift: 배열 가장 앞에 원소를 추가합니다.

let nums = [1, 2];
nums.push(3);
// (3) [1, 2, 3]
nums.pop();
// (2) [1, 2]
nums.unshift(0);
// (3) [0, 1, 2]
nums.shift()
// (2) [1, 2]

 

 

• concat: 배열을 합쳐 새로운 배열을 반환합니다.
• includes: 특정 값이 배열에 포함되어 있는지 알려줍니다.
• indexOf: 인자와 일치하는 값의 시작 인덱스를 반환합니다..
• reverse: 배열의 순서를 뒤집습니다. 새 값을 반환하지 않고 호출한 배열 자체를 변경합니다.
• slice: 배열의 일부를 슬라이싱합니다.
• splice: 원소를 삽입하거나 제거합니다.

splice는 인자로 시작 인덱스, 삭제할 원소 개수, 추가할 요소를 받습니다.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) //구문
const months = ['Jan', 'Mar']
months.splice(1, 0, 'Feb'); //인덱스[1]에 Feb를 추가한다. 삭제할 원소는 0개
//(3) ['Jan', 'Feb', 'Mar']
months.splice(2, 1); //인덱스[2]부터 원소 1개를 삭제한다
//(2) ['Jan', 'Feb']

• sort: 유니코드 순으로 정렬합니다.

---

객체

객체(object)는 속성(properties)의 집합입니다.

속성은 키-값(key-value) 쌍으로 이루어집니다.

 

객체의 요소에 접근하는 방법은 []를 이용하는 방법과 .(점)을 이용하는 방법이 있습니다.

const person = 
{
	firstName: "Park",
	lastName: "Jason"
}

//access
person["firstname"]   //"Park"
person.lastName   //"Jason"

 

모든 키는 string으로 변환됩니다. 2020과 같은 number 타입도 key로 사용되면 문자열로 인식합니다.

const years = 
{
	2020: "worst",
	2023: "best"
}

years["2020"]
//'worst'

 

[] 호출과 . 호출의 차이는 표현식을 사용할 수 있는지 여부입니다.

person["first" + "Name"]  //"Park"

---

반복문

반복문을 통해 배열에 있는 원소에 한 번에 접근할 수 있습니다.

 

for of

const colors = ["red", "orange", "yellow"]

for(let it of colors) {
	console.log(it)
}

 

for in

객체에서 키로 지정된 속성에 대해 반복해 줍니다.

const person = 
{
	firstName: "Park",
	lastName: "Jason"
}

for(let it in person) {
	console.log(it)
}

/* result
firstName
lastName
*/

 

key가 아닌 value에 접근하고 싶다면

Object.values()를 사용합니다.

const person = 
{
	firstName: "Park",
	lastName: "Jason"
}

for(let it of Object.values(person)) {
	console.log(it)
}	
/* result
Park
Jason
*/

 

Objects.keys(): 키에 대해 반복합니다.

Objects.values(): 값에 대해 반복합니다.

Objects.entries() :키-값 쌍에 대해 반복합니다.