자바스크립트 배열
배열의 선언
var a = [];
var a = [1,2,3,"hello",null,true,[]];배열은 순서가 있고, 배열의 원소에는 모든 타입이 다 들어갈 수 있습니다. 배열 안에 배열도, 배열 안에 객체도 들어갈 수 있습니다.
var a = [4]; // a에 원소 4를 가지는 배열 선언
a[1000] = 3; // 배열 a의 1001번째 인덱스 3 추가 [4, empty x 999, 3]
console.log(a.length); // 1001
console.log(a[500]); // undefined 출력
a.push(5); //[4, empty x 999, 3, 5] push 메서드는 배열 인덱스 끝에 5 추가
console.log(a.length); // 1002배열의 유용한 메서드 - indexOf, join, concat
//배열의 원소에 특정값이 있는지 확인할 수 있습니다.
[1,2,3,4].indexOf(3); // 3이라는 원소가 2번째 인덱스에 있어 2를 반환합니다.
[1,2,3,4].indexOf(7); // 7이라는 원소가 없으므로 -1을 반환합니다.
//배열의 원소들을 문자열로 만들수 있습니다.
[1,2,3,4].join(); // "1,2,3,4"
//배열을 합칠 수 있습니다.
[1,2,3,4].concat(2,3); // [1,2,3,4,2,3]
var a = [5,4,3,2];
a.concat(9,8,7); // [5,4,3,2,9,8,7]※ 주의! 어떤 메서드는 새로운 배열을 반환하고, 어떤 메서드는 원래 배열의 값을 변경시키듯 서로 다른 값을 반환하니 주의해야합니다.
예를 들어 concat은 원래 배열은 그대로 있고 합쳐진 새로운 배열을 반환합니다.
var origin = [4,3,2,1];
var changed = origin.concat(); // [4,3,2,1]
// origin 배열의 값과 changed 배열의 값은 동일하나, 각각 가리키는 메모리 주소가 달라 false return 합니다.
console.log(origin === changed); //false배열 탐색 - foreach, map, filter
1) forEach
var str = ["boost","course","web"];
str.forEach(function(value) {
console.log(value)
});
// result
boost
course
webfor문과 달리 배열의 길이를 체크하거나, i++과 같이 증가시켜주는 코드가 필요없습니다. 이부분은 자바스크립트 파서가 알아서 처리해주어 for문 쓰면서 발생할 수 있는 실수를 줄여주며 가독성도 높아집니다. 한가지 특이한 점은 forEach는 함수를 인자로 갖는다는 점입니다.
2) map
var str = ["케냐","과테말라","온두라스"];
var result = str.map(function(value, index){
return index +"번째 원두는 "+value+"입니다";
});
console.log(result); //["0번째 원두는 케냐입니다","1번째 원두는 과테말라입니다", "2번째 원두는 온두라스입니다"]
console.log(str); // ["케냐","과테말라","온두라스"]새로운 배열을 반환하는 map 메서드 예제입니다. 부모 스코프 영역을 건드리지 않고 새로운 배열을 생성해 반환합니다.
3) filter
var arr = [2,3,4,5,6,7,8];
var result = arr.filter(function(n) {
return n%2 == 0;
});
console.log(result); // [2,4,6,8]
console.log(arr); // [2,3,4,5,6,7,8]요소들을 걸러내는 기능을 가진 함수입니다. 리턴값이 true인 요소만 모아서 새로운 배열을 만듭니다. 만족하는 요소가 없다면 [] 이처럼 빈 배열을 반환합니다.
자바스크립트 객체
key, value 구조의 자료구조입니다. 자바스크립트의 객체는 내부적으로 어떤 순서는 가지고 있으나 겉으로 드러나는 index가 아니므로 객체를 순서 기반으로 사용하는것은 적절하지 않습니다. 순서가 필요할 경우 배열을 사용하고, key값을 기반으로 동작하는 자료구조에는 객체를 사용해야 합니다.
객체선언
var obj = {title:"stranger things", genre:"SF, Horror"};
console.log(obj["title"]); // "stranger things"
console.log(obj.genre); // "SF, Horror"객체는 {} 으로 자료를 표현하며, 서버와 클라이언트 간에 데이터를 교환할때 객체포맷과 비슷한 방법(JSON)으로 데이터를 보냅니다.
객체의 추가/삭제
var drama = {title:"stranger things", genre:"SF, Horror"};
console.log(drama); // {title: "stranger things", genre: "SF, Horror"}
drama["title"] = "walking dead";
console.log(drama); // {title: "walking dead", genre: "SF, Horror"}
drama.genre = "Zombie Apocalypse";
console.log(drama); // {title: "working dead", genre: "Zombie Apocalypse"}
delete drama.title;
delete drama.genre;
console.log(drama); // {}
추가하는 방법은 dot notation ( drama.title ="test" )을 더 많이 사용합니다.
객체의 탐색 - for-in, Object.keys + forEach
var drama = {title:"stranger things", genre:"SF, Horror"};
//방법1. for - in 구문
for(value in drama) {
console.log(drama[value]);
}
//방법2. Object.keys() 이용한 후 forEach 탐색
Object.keys(drama).forEach(function(key){
console.log(drama[key]);
});
출처
1. https://www.edwith.org/boostcourse-web/lecture/16746/