본문으로 바로가기

[JS] Javascript 배열, 객체

category Dev/Javascript 2018. 7. 10. 19:39


배열

- Javascript의 배열 안에는 모든 타입이 다들어갈 수 있다 ( 함수, 배열, 객체 등등 )

- forEach, map, filter 등의 메소드가 존재함


1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a = [1,2,3];
a.push(4);            // Push를 통해 배열에 값 추가
 
var changedArray = [...a,5,6];  // concat
 
changedArray.forEach(function(v,i,o){
  console.log(v);     // forEach는 함수를 매개변수로 받아서 반복문 실행함
});
 
var newArray = ["apple","tomato"].map(function(v,i){
  return i + "번째 과일은 " + v + "입니다.";  // changedArray의 원소를 돌면서, 값을 변경시킨 후에 새로운 배열로 만들어 반환함
})
 
console.log(newArray);
cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var data = [{title : "hello",content : "간지철철", price : 12000},
            {title : "crong",content : "괜춘한 상품", price : 5500},
            {title : "codesquad",content : "쩌는상품", price : 1200}];
 
// 가격이 5000원 이상인 상품만 추출하여
// '5,000원' 식으로 가격 형태를 바꿈
 
var newData = data.filter(v=>{
  return v.price > 5000;
}).map(v=>{
  var obj = {title : v.title,
            content : v.content,
            price : (''+v.price).replace(/^(\d+)(\d{3})$/"$1,$2원")};
  return obj;
});
 
newData.forEach(v=>{
  console.log("title: " + v.title + ", content: " + v.content + ", price: " + v.price);
});
cs




객체

- 자바스크립트 객체는 사실 객체리터럴이 그 자체이며 객체를 쉽게 만들 수 있다

- key, value로 이뤄진 Data Type

- for in 을 통해 탐색을 진행함


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var myFriend = {
  key : "value"
  addition : [
          {name : "codequad"},
          {age : 2}
  ]
};
 
for(key in myFriend) {                // Object를 탐색하기 위한 반복문
  console.log(myFriend[key]);
}
 
console.log(Object.keys(myFriend)); // 출력형태가 배열임
 
Object.keys(myFriend).forEach(function(v){
  console.log(myFriend[v]);
});
cs


- 객체안에서의 this는 그 객체 자신을 가리킨다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var todo = {
  todos : [],
  
  addTodo : function(newTodo){
    this.todos.push(newTodo);
  },
 
  showTodo : function(){
    console.log(this.todos);
  }
}
 
todo.addTodo("Eat");
todo.addTodo("Sleep");
todo.showTodo();
cs



- ES6에서는 function을 생략 할 수 있다


1
2
3
4
5
6
7
8
9
10
11
12
const obj = {
  // ES6 에서는 function을 생략할 수 있다
  getName(){
    return this.name;
  },
  setName(name){
    this.name = name;
  }
}
 
obj.setName("Crong");
console.log(obj.getName());
cs



'Dev > Javascript' 카테고리의 다른 글

[JS] 생성자 패턴  (0) 2018.09.03
[JS] Handlebar 템플릿 라이브러리  (0) 2018.08.22
[JS] DOM 심화  (1) 2018.07.11
[JS] Javascript 기초정리2  (0) 2018.05.22
[JS] Javascript 기초정리1  (1) 2018.05.22