SlideShare a Scribd company logo
Javascript
Array
[1, 2, 3, 4 ]
배열
요소
0 1 2 3
인덱스
배열이란?
배열의 크기는 커질 수도 있고, 작을 수도 있다.	
요소사이에 빈자리가 있어도 된다.	
Array객체의 prototype의 속성들을 상속받는다.
배열 생성-1
var a = [];	
var b = [1, 2, 3, 4, 5];	
var c = [1.1, true, 'a', ];	
var d = [a, b, c];	
var e = new Array();	
var f = [{x: 1}, {x: 2}];	
var g = [1,,3];
배열 생성-2
//배열 생성자로 저장될 요소의 크기를 미리 할당	
var a = new Array(10);	
!
//배열 생성자로 요소들을 할당	
var b = new Array(5, 4, 3, 2, 1, 'a');
배열요소 읽고/쓰기
var a = ['world'];	
var b = a[0];	
a[1] = 3.14;	
!
var i = 2;	
a[i] = 3;	
a[i + 1] = '안녕';	
a[a[i]] = a[0];
특별한 인덱스
var a = {};	
a[-1.11] = 'string';	
//{ -1.11 : 'string' }	
!
var b = [];	
b[-1.0000] = 'string';	
b['hello'] = 'world';
희소배열-1
희소배열은 요소의 위치가 연속적이지 않다.	
보통 배열보다 느린 편이다.	
메모리를 많이 사용한다.	
요소를 찾는데 시간이 걸린다.
희소배열-2
//모든 요소에 undefined 값을 반환	
var a = [,,,,];	
!
//요소가 존재하지 않는 배열	
var b = new Array(4);	
!
//희소배열 검사방법	
//0 in a	 :true	
//0 in b	 :false
희소배열 검사
var a = [배열꾸러미];	
for (var i = 0; i < a.length; i++) {	
//null이나 undefined건너뛰기	
if (a[i] === undefined) continue;	
!
//희소배열 요소 건너뛰기	
if (!(i in a)) continue;	
}
배열 길이
[].length; //0	
['a'].length; //1	
[1,2,3].length; //3	
!
var a = [1,2,3,4,5];	
a.length; //5	
!
a.length = 4;	
//[1,2,3,4]
배열요소 추가/삭제
a = [];	
a[0] = 'a';	
a.push('b');	
!
//['a', 'b'];
a = [1,2,3];	
delete a[1];	
!
//[1,undefined,3];	
//희소배열	
//length는 줄지 않는다.
다차원 배열
var a = [1, 2, 3, ['a', 'b', 'c'], 5];	
!
a[3]; //['a', 'b', 'c']	
a[3][1]; //'b';
배열 메소드
Array객체의 prototype의 속성들을 상속받은 것.
https://developer.mozilla.org/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array#Methods
join()
배열의 모든 요소를 문자열로 변환.
toString()
배열의 모든 요소들을 쉼표(,)로 분리 후 문자열로 반환.	
join() 메서드를 써도 동일한 결과 반환.
var a = [1, 2, 3];	
!
a.toString();	
//'1,2,3'	
!
a.join();	
//'1,2,3'	
!
a.join('-');	
//'1-2-3'
reverse()
배열의 요소를 반대로 변환
var a = [1,2,3];	
!
a.reverse();	
//[3,2,1]	
!
a.reverse().join();	
//"3,2,1"
sort()
배열의 요소들을 전달인자 없이 반환하면 알파벳순으로 정렬 후 반환.
var a = ['c', 'b', 'a'];	
!
a.sort();	
//알파벳순 정렬	
//['a', 'b', 'c']	
!
a.sort().join('-');	
//"a-b-c"
추가로 전달인자 두개를 받아서 다른 순서로 반환할 수 있다.
a.sort(function(a, b){	
//code	
});
concat()
기존 배열요소에 concat() 전달인자로 새로운 배열로 반환.
var a = [1, 2, 3];	
!
a.concat(4, 5); //[1,2,3,4,5]	
a.concat([4, 5]); //[1,2,3,4,5]	
a.concat([4, 5], [6, 7]); //[1,2,3,4,5,6,7]	
a.concat([4, 5, [1, 2]]); //[1,2,3,4,5,[1,2]];	
!
* 주의	
a.push(4, 5); //length 값이 반환되며, 배열객체에 4, 5 추가.	
a.concat(4, 5); //length 값이 반환되지 않으며, 배열객체에 4, 5 추가.
slice()
두개의 전달인자로 처음과 끝을 명시하여 배열요소 중 일부분을 반환.
var a = [1,2,3,4,5,6,7,8];	
!
a.slice(2, 4);	
//[3, 4, 5]	
!
a.slice(3);	
//[4, 5, 6, 7, 8]	
!
a.slice(-3, -2);	
//음수는 요소의 마지막부터 시작	
//[6]
splice()
처음 두개의 전달인자로 처음과 끝을 명시한 요소들을 반환 후 삭제.
var a = [1,2,3,4,5,6,7,8];	
!
a.splice(4);	
//[5, 6, 7, 8] 반환	
//a = [1, 2, 3, 4]	
!
a.splice(1, 2);	
//[2, 3] 반환	
//a = [1, 4];	
!
a.splice(1, 1);	
a.splice(1);	
//[4] 반환	
//a = [1];
push()
한개 이상의 요소들을 배열 마지막에 이어 붙인 후 length 값으로 반환.
pop()
배열의 마지막 요소를 제거 후 length 값 감소. 제거한 요소로 반환.
var a = [];	
!
a.push('a', 'b');	
//2	
//['a', 'b']	
!
a.pop();	
//'b'	
//['a']
unshift()
한개 이상의 요소들을 배열 앞부분에 이어 붙인 후 length 값으로 반환.
shift()
배열의 첫번째 요소를 제거 후 length 값 감소. 제거한 요소로 반환.
var a = [];	
!
a.unshift('a', 'b');	
//2	
//['a', 'b']	
!
a.shift();	
//'a'	
//['b']
ECMAScript5 브라우저 호환 그래프
http://kangax.github.io/es5-compat-table/
forEach()
배열을 순회하는 메소드.	
세개의 전달인자(값, 인덱스, 배열)로 넘기고 호출한다.
data.forEach(value, index, array) {	
//code	
}
map()
배열의 각 요소들을 첫 번째 전달인자로 함수에 전달하고 반환.
var a = [1, 2, 3];	
!
a.map(function(x){	
return x * x; //[1, 4, 9]	
});
filter()
배열의 모든 요소중 조건에 해당하는 요소들만 골라 반환.
var a = [5, 4, 3, 2, 1];	
!
a.filter(function(x){	
return x < 3; //[2, 1]	
});
every()
var a = [5, 4, 3, 2, 1];	
!
a.every(function(x){	
return x < 3; //false	
});	
!
a.every(function(x){	
return x < 6; //true	
});
배열의 모든 요소가 조건자에 해당되면 true 반환.
some()
every() 메소드와 반대로 배열의 요소들 중	
한개라도 조건자에 해당되면 true 반환.
var a = [5, 4, 3, 2, 1];	
!
a.some(function(x){	
return x < 3; //false	
});
reduce()
배열에 두개의 전달인자를 함수에 전달하고 식에 맞는 결과값을 반환.
var a = [1, 2, 3, 4, 5];	
!
a.reduce(function(x, y){	
//1+2	
//3+3	
//6+4	
//10+5	
return x + y; //15	
});
indexOf() / lastIndexOf()
배열의 요소들 중에서 특정한 값을 찾는다.	
값이 존재하면 인덱스로 반환.	
존재하지 않으면 -1로 반환한다.	
!
indexOf()는 배열의 처음부터 검색.	
lastIndexOf()는 배열의 끝에서부터 검색.
var a = [1, 'e2goon', 3, 4, 5];	
!
a.indexOf('e2goon'); //1
끝
Ad

Recommended

파이썬 기본 문법
파이썬 기본 문법
SeongHyun Ahn
 
파이썬 유용한 라이브러리
파이썬 유용한 라이브러리
SeongHyun Ahn
 
파이썬2.7 기초 공부한 것 정리
파이썬2.7 기초 공부한 것 정리
Booseol Shin
 
[Commit Again] 1주차 STL study
[Commit Again] 1주차 STL study
경 송
 
R 시작해보기
R 시작해보기
SEUNGWOO LEE
 
RPG Maker와 Ruby로 코딩 시작하기 Day 3
RPG Maker와 Ruby로 코딩 시작하기 Day 3
Sunwoo Park
 
[Algorithm] Merge Sort
[Algorithm] Merge Sort
Bill Kim
 
Javascript 완벽 가이드 정리
Javascript 완벽 가이드 정리
ETRIBE_STG
 
골때리는 자바스크립트 발표자료
골때리는 자바스크립트 발표자료
욱진 양
 
Startup JavaScript 4 - 객체
Startup JavaScript 4 - 객체
Circulus
 
Javascript
Javascript
Hong Hyo Sang
 
Hacosa j query 4th
Hacosa j query 4th
Seong Bong Ji
 
Javascript introduction, dynamic data type, operator
Javascript introduction, dynamic data type, operator
Young-Beom Rhee
 
키트웍스_발표자료_김경수functional_programming240920.pdf
키트웍스_발표자료_김경수functional_programming240920.pdf
Wonjun Hwang
 
스터디 2주차-자바스크립트기초2
스터디 2주차-자바스크립트기초2
Kim Sehwan
 
Start IoT with JavaScript - 4.객체1
Start IoT with JavaScript - 4.객체1
Park Jonggun
 
Javascript 교육자료 pdf
Javascript 교육자료 pdf
Hyosang Hong
 
프론트엔드스터디 E03 - Javascript intro.
프론트엔드스터디 E03 - Javascript intro.
Young-Beom Rhee
 
[Swift] Data Structure - Array
[Swift] Data Structure - Array
Bill Kim
 
7주 JavaScript Part2
7주 JavaScript Part2
지수 윤
 
Javascript
Javascript
Joshua Yoon
 
Functional programming
Functional programming
ssuserdcfefa
 
[ES6] 12. Array
[ES6] 12. Array
Han JaeYeab
 
자바스크립트 기초문법~함수기초
자바스크립트 기초문법~함수기초
진수 정
 
자바스크립트
자바스크립트
Hansol_
 
0.javascript기본(~3일차내)
0.javascript기본(~3일차내)
Sung-hoon Ma
 
JavaScript Patterns - Chapter 3. Literals and Constructors
JavaScript Patterns - Chapter 3. Literals and Constructors
Hyuncheol Jeon
 

More Related Content

Similar to Javascript - Array (20)

Javascript 완벽 가이드 정리
Javascript 완벽 가이드 정리
ETRIBE_STG
 
골때리는 자바스크립트 발표자료
골때리는 자바스크립트 발표자료
욱진 양
 
Startup JavaScript 4 - 객체
Startup JavaScript 4 - 객체
Circulus
 
Javascript
Javascript
Hong Hyo Sang
 
Hacosa j query 4th
Hacosa j query 4th
Seong Bong Ji
 
Javascript introduction, dynamic data type, operator
Javascript introduction, dynamic data type, operator
Young-Beom Rhee
 
키트웍스_발표자료_김경수functional_programming240920.pdf
키트웍스_발표자료_김경수functional_programming240920.pdf
Wonjun Hwang
 
스터디 2주차-자바스크립트기초2
스터디 2주차-자바스크립트기초2
Kim Sehwan
 
Start IoT with JavaScript - 4.객체1
Start IoT with JavaScript - 4.객체1
Park Jonggun
 
Javascript 교육자료 pdf
Javascript 교육자료 pdf
Hyosang Hong
 
프론트엔드스터디 E03 - Javascript intro.
프론트엔드스터디 E03 - Javascript intro.
Young-Beom Rhee
 
[Swift] Data Structure - Array
[Swift] Data Structure - Array
Bill Kim
 
7주 JavaScript Part2
7주 JavaScript Part2
지수 윤
 
Javascript
Javascript
Joshua Yoon
 
Functional programming
Functional programming
ssuserdcfefa
 
[ES6] 12. Array
[ES6] 12. Array
Han JaeYeab
 
자바스크립트 기초문법~함수기초
자바스크립트 기초문법~함수기초
진수 정
 
자바스크립트
자바스크립트
Hansol_
 
0.javascript기본(~3일차내)
0.javascript기본(~3일차내)
Sung-hoon Ma
 
JavaScript Patterns - Chapter 3. Literals and Constructors
JavaScript Patterns - Chapter 3. Literals and Constructors
Hyuncheol Jeon
 
Javascript 완벽 가이드 정리
Javascript 완벽 가이드 정리
ETRIBE_STG
 
골때리는 자바스크립트 발표자료
골때리는 자바스크립트 발표자료
욱진 양
 
Startup JavaScript 4 - 객체
Startup JavaScript 4 - 객체
Circulus
 
Javascript introduction, dynamic data type, operator
Javascript introduction, dynamic data type, operator
Young-Beom Rhee
 
키트웍스_발표자료_김경수functional_programming240920.pdf
키트웍스_발표자료_김경수functional_programming240920.pdf
Wonjun Hwang
 
스터디 2주차-자바스크립트기초2
스터디 2주차-자바스크립트기초2
Kim Sehwan
 
Start IoT with JavaScript - 4.객체1
Start IoT with JavaScript - 4.객체1
Park Jonggun
 
Javascript 교육자료 pdf
Javascript 교육자료 pdf
Hyosang Hong
 
프론트엔드스터디 E03 - Javascript intro.
프론트엔드스터디 E03 - Javascript intro.
Young-Beom Rhee
 
[Swift] Data Structure - Array
[Swift] Data Structure - Array
Bill Kim
 
7주 JavaScript Part2
7주 JavaScript Part2
지수 윤
 
Functional programming
Functional programming
ssuserdcfefa
 
자바스크립트 기초문법~함수기초
자바스크립트 기초문법~함수기초
진수 정
 
자바스크립트
자바스크립트
Hansol_
 
0.javascript기본(~3일차내)
0.javascript기본(~3일차내)
Sung-hoon Ma
 
JavaScript Patterns - Chapter 3. Literals and Constructors
JavaScript Patterns - Chapter 3. Literals and Constructors
Hyuncheol Jeon
 

Javascript - Array

  • 2. [1, 2, 3, 4 ] 배열 요소 0 1 2 3 인덱스
  • 3. 배열이란? 배열의 크기는 커질 수도 있고, 작을 수도 있다. 요소사이에 빈자리가 있어도 된다. Array객체의 prototype의 속성들을 상속받는다.
  • 4. 배열 생성-1 var a = []; var b = [1, 2, 3, 4, 5]; var c = [1.1, true, 'a', ]; var d = [a, b, c]; var e = new Array(); var f = [{x: 1}, {x: 2}]; var g = [1,,3];
  • 5. 배열 생성-2 //배열 생성자로 저장될 요소의 크기를 미리 할당 var a = new Array(10); ! //배열 생성자로 요소들을 할당 var b = new Array(5, 4, 3, 2, 1, 'a');
  • 6. 배열요소 읽고/쓰기 var a = ['world']; var b = a[0]; a[1] = 3.14; ! var i = 2; a[i] = 3; a[i + 1] = '안녕'; a[a[i]] = a[0];
  • 7. 특별한 인덱스 var a = {}; a[-1.11] = 'string'; //{ -1.11 : 'string' } ! var b = []; b[-1.0000] = 'string'; b['hello'] = 'world';
  • 8. 희소배열-1 희소배열은 요소의 위치가 연속적이지 않다. 보통 배열보다 느린 편이다. 메모리를 많이 사용한다. 요소를 찾는데 시간이 걸린다.
  • 9. 희소배열-2 //모든 요소에 undefined 값을 반환 var a = [,,,,]; ! //요소가 존재하지 않는 배열 var b = new Array(4); ! //희소배열 검사방법 //0 in a :true //0 in b :false
  • 10. 희소배열 검사 var a = [배열꾸러미]; for (var i = 0; i < a.length; i++) { //null이나 undefined건너뛰기 if (a[i] === undefined) continue; ! //희소배열 요소 건너뛰기 if (!(i in a)) continue; }
  • 11. 배열 길이 [].length; //0 ['a'].length; //1 [1,2,3].length; //3 ! var a = [1,2,3,4,5]; a.length; //5 ! a.length = 4; //[1,2,3,4]
  • 12. 배열요소 추가/삭제 a = []; a[0] = 'a'; a.push('b'); ! //['a', 'b']; a = [1,2,3]; delete a[1]; ! //[1,undefined,3]; //희소배열 //length는 줄지 않는다.
  • 13. 다차원 배열 var a = [1, 2, 3, ['a', 'b', 'c'], 5]; ! a[3]; //['a', 'b', 'c'] a[3][1]; //'b';
  • 14. 배열 메소드 Array객체의 prototype의 속성들을 상속받은 것. https://developer.mozilla.org/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array#Methods
  • 15. join() 배열의 모든 요소를 문자열로 변환. toString() 배열의 모든 요소들을 쉼표(,)로 분리 후 문자열로 반환. join() 메서드를 써도 동일한 결과 반환. var a = [1, 2, 3]; ! a.toString(); //'1,2,3' ! a.join(); //'1,2,3' ! a.join('-'); //'1-2-3'
  • 16. reverse() 배열의 요소를 반대로 변환 var a = [1,2,3]; ! a.reverse(); //[3,2,1] ! a.reverse().join(); //"3,2,1"
  • 17. sort() 배열의 요소들을 전달인자 없이 반환하면 알파벳순으로 정렬 후 반환. var a = ['c', 'b', 'a']; ! a.sort(); //알파벳순 정렬 //['a', 'b', 'c'] ! a.sort().join('-'); //"a-b-c" 추가로 전달인자 두개를 받아서 다른 순서로 반환할 수 있다. a.sort(function(a, b){ //code });
  • 18. concat() 기존 배열요소에 concat() 전달인자로 새로운 배열로 반환. var a = [1, 2, 3]; ! a.concat(4, 5); //[1,2,3,4,5] a.concat([4, 5]); //[1,2,3,4,5] a.concat([4, 5], [6, 7]); //[1,2,3,4,5,6,7] a.concat([4, 5, [1, 2]]); //[1,2,3,4,5,[1,2]]; ! * 주의 a.push(4, 5); //length 값이 반환되며, 배열객체에 4, 5 추가. a.concat(4, 5); //length 값이 반환되지 않으며, 배열객체에 4, 5 추가.
  • 19. slice() 두개의 전달인자로 처음과 끝을 명시하여 배열요소 중 일부분을 반환. var a = [1,2,3,4,5,6,7,8]; ! a.slice(2, 4); //[3, 4, 5] ! a.slice(3); //[4, 5, 6, 7, 8] ! a.slice(-3, -2); //음수는 요소의 마지막부터 시작 //[6]
  • 20. splice() 처음 두개의 전달인자로 처음과 끝을 명시한 요소들을 반환 후 삭제. var a = [1,2,3,4,5,6,7,8]; ! a.splice(4); //[5, 6, 7, 8] 반환 //a = [1, 2, 3, 4] ! a.splice(1, 2); //[2, 3] 반환 //a = [1, 4]; ! a.splice(1, 1); a.splice(1); //[4] 반환 //a = [1];
  • 21. push() 한개 이상의 요소들을 배열 마지막에 이어 붙인 후 length 값으로 반환. pop() 배열의 마지막 요소를 제거 후 length 값 감소. 제거한 요소로 반환. var a = []; ! a.push('a', 'b'); //2 //['a', 'b'] ! a.pop(); //'b' //['a']
  • 22. unshift() 한개 이상의 요소들을 배열 앞부분에 이어 붙인 후 length 값으로 반환. shift() 배열의 첫번째 요소를 제거 후 length 값 감소. 제거한 요소로 반환. var a = []; ! a.unshift('a', 'b'); //2 //['a', 'b'] ! a.shift(); //'a' //['b']
  • 23. ECMAScript5 브라우저 호환 그래프 http://kangax.github.io/es5-compat-table/ forEach() 배열을 순회하는 메소드. 세개의 전달인자(값, 인덱스, 배열)로 넘기고 호출한다. data.forEach(value, index, array) { //code }
  • 24. map() 배열의 각 요소들을 첫 번째 전달인자로 함수에 전달하고 반환. var a = [1, 2, 3]; ! a.map(function(x){ return x * x; //[1, 4, 9] });
  • 25. filter() 배열의 모든 요소중 조건에 해당하는 요소들만 골라 반환. var a = [5, 4, 3, 2, 1]; ! a.filter(function(x){ return x < 3; //[2, 1] });
  • 26. every() var a = [5, 4, 3, 2, 1]; ! a.every(function(x){ return x < 3; //false }); ! a.every(function(x){ return x < 6; //true }); 배열의 모든 요소가 조건자에 해당되면 true 반환.
  • 27. some() every() 메소드와 반대로 배열의 요소들 중 한개라도 조건자에 해당되면 true 반환. var a = [5, 4, 3, 2, 1]; ! a.some(function(x){ return x < 3; //false });
  • 28. reduce() 배열에 두개의 전달인자를 함수에 전달하고 식에 맞는 결과값을 반환. var a = [1, 2, 3, 4, 5]; ! a.reduce(function(x, y){ //1+2 //3+3 //6+4 //10+5 return x + y; //15 });
  • 29. indexOf() / lastIndexOf() 배열의 요소들 중에서 특정한 값을 찾는다. 값이 존재하면 인덱스로 반환. 존재하지 않으면 -1로 반환한다. ! indexOf()는 배열의 처음부터 검색. lastIndexOf()는 배열의 끝에서부터 검색. var a = [1, 'e2goon', 3, 4, 5]; ! a.indexOf('e2goon'); //1
  • 30.