배열
- 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 |