티스토리 뷰

- JavaScript에서의 배열

> 선언: var a = [];

> 한 배열 안에 모든 타입의 원소가 들어갈 수 있다. 숫자, 문자, 배열 (-> 2차원 배열), dict 등...

> 선언할 때 길이를 정해주지 않는데...

 

a[500] = 10;

이렇게 해줘도 에러가 발생하지 않고 알아서 배열 길이가 501이 된다.

이 상태에서 정의해주지 않은 중간 값들 (a[250] 이라던지) 을 띄워보면 undefined가 뜸. (아무 쓰레기값이 뜨는게 아니다)

 

- 유용한 배열 메서드들: 자바의 ArrayList 메서드들이랑 크게 다르지 않다

> push()

> indexOf()

> join()

> concat()

주의: 메서드에 따라 원래 배열을 조작하는 것도 있고, 원래 배열은 그대로 두고 새 배열을 반환하는 것도 있다. 자바나 파이썬에서도 자주 경험해봤듯 (replace 등)...

 

- foreach와 map 메서드를 이용한 배열 순회

> 기존의 for, while과 달리 언어 자체에 지정된 키워드가 아니라 배열의 메서드임

> 함수를 인자로 가짐. 뭔 소리냐?

 

testArray.forEach(function(value){
  console.log(value)
});

forEach() 안에 저렇게 함수를 선언해주면 value 안에 testArray의 값들이 하나씩 들어가면서 순회를 한다.

 

map() 은 배열의 각 원소에 어떤 처리 (함수의 내용) 을 한 뒤 그 값들을 이용해서 만든 새로운 배열을 리턴한다.

 

var mapped = testArray.map(function(v){
  return v * 2; // testArray의 모든 원소에 각각 *2를 적용해서 mapped에 넣는다
});

- 자바스크립트 객체 (Object / Dictionary)

자바의 map이나 파이썬의 dict처럼 key-value 쌍으로 저장되는 자료구조. 자바스크립트에선 그냥 객체라고 하나보다.

이런 형태로 데이터를 주고받는 게 JSON (JavaScript Object Notation) 임. JSON에 Object가 들어가는 이유가 그거였다.

 

var obj = {name: "test", age: 20}

> key를 이용한 접근

console.log(obj.name);

console.log(obj["name"]); // obj[name] 이라고 하면 에러남

 

> for-in을 이용한 탐색

파이썬에서도 그랬고 JS에서도 배열 (리스트) 을 탐색할 때 이걸 쓸 수도 있는데, 원래 목적은 객체 (dict) 를 탐색하기 위한 것이라 함.

 

for (key in obj) {
  console.log(obj[key]);
}

> Object.keys(obj): 키들이 담겨있는 배열을 리턴함. forEach랑 같이 쓰면 이걸로도 순회가 가능

 

> 객체의 추가/삭제

obj["name"] = "newName";
obj.age = 20;

delete obj.name; // delete라는 키워드를 사용함
delete obj["age"];

 

- 예제

아래와 같은 객체가 있을 때 (흔히 웹크롤링이나 데이터통신 하다보면 JSON 형식으로 자주 보게 되는 그런 형태다) 값이 숫자인 key만 뽑아서 배열에 넣어보라는 문제.

var arr = []; 
for (key in data){ 
  if(typeof(data[key]) === "number") // typeof를 이용해 데이터 타입을 확인한다
    arr.push(key);
  if(typeof(data[key]) === "object"){ // value가 또다시 object인 경우
    for (key2 in data[key]){ // 하위 레벨을 한번 더 탐색해서...
      if (typeof(data[key][key2]) === "number") // 이렇게 2차원 배열마냥 접근할 수 있다
        arr.push(key2);
    } 
  } 

console.log(arr);

문제에서는 object 안의 value가 또 object고 그런게 반복되면서 더 깊은 depth까지 내려가진 않았기 때문에 이렇게 짰는데, 다른 사람들 해놓은거 보니까 재귀함수를 썼더라. 

저 내용을 함수로 만들고 for문 부분을 재귀함수 호출로 바꿔주면 될 것 같다. 인자로 넣어줄 것은 object 타입인 data[key] 가 되겠다.

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2024/04   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함