> For the complete documentation index, see [llms.txt](https://wlrma-study.gitbook.io/js-study/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wlrma-study.gitbook.io/js-study/do-it-javascript/07.-array.md). # 07. Array 객체 with 조나현 ### 배열이란? * js에서 자주 사용되는 자료형이다. * 자바스크립트 안에 프로토타입 객체로 이미 만들어져 있다 * Array 객체의 인스턴스로 배열을 만들면 Array 객체 안의 함수를 사용할 수 있다. ### 배열 만들기 1.Array 객체를 사용한 배열 `var myArray = new Array( );` * 빈 괄호 사용시 배열의 개수 고정 X * Only 선언 2\. Array 객체를 사용한 배열 (선언 + 할당) `var numbers = new Array(“one’, “two”, “three”);` 3\. 리터럴(선언과 동시에 값을 지정해주는 표기법) `var numbers = [“one”, “two”, “three”];` * 선언 + 할당 ### 배열의 갯수 가져오기 `var numbers = new Array(“one’, “two”, “three”);` `numbers.length` `< 3` numbers 배열에는 3개의 요소가 있다 #### FOR 문 활용하기 `for (var i = 0; i < numbers.length; i++) {` `console.log(numbers[ i ]);` `}` `< one` `< two` `< three` * 배열의 인덱스를 통해 접근 * Index는 0 부터 length-1 ### Array 객체의 함수 활용 둘 이상의 배열을 연결 -> concat() 배열의 요소 연결 -> join() 배열에 요소 추가 -> push(), unshift() 배열에 요소 추출 및 삭제 -> pop(), shift() 배열에 요소 추가 및 삭제 -> splice() 배열에 요소 추출 -> slice() #### concat( ) : 둘 이상의 배열을 연결 `var nums = [“1”, “2”, “3”];` `var chars = [“a”, “b”, “c”];` `nums.concat(chars)` `< [“1”, “2”, “3”, “a”, “b”, “c”]` `chars.concat(nums)` `< [“a”, “b”, “c”, “1”, “2”, “3”]` * 순서가 영향을 준다 * 기존의 두 배열에는 영향 X #### join( ) : 배열 요소를 연결 `var nums = [“1”, “2”, “3”];` `nums.join()` `< “1, 2, 3”` `nums.join(“-”) // 구분기호 O` `< “1-2-3”` * 기존의 배열에는 영향 X * ( ) 안에 구분기호X -> default ‘ , ’ #### push( ) : 배열의 맨 끝에 새로운 요소 추가 `var nums = [“1”, “2”, “3”];` `nums.push(“4”, “5”)` `< 5 // push 후의 배열의 개수 반환` `nums` `< [“1”, “2”, “3”, “4”, “5”]` * return 값 : push 후의 배열의 개수 반환 #### unshift( ) : 배열의 맨 앞에 새로운 요소 추가 `var nums = [“1”, “2”, “3”];` `nums.unshift(“0”) // nums[0] = “0”` `< 4 // unshift 후의 배열의 개수 반환` `nums` `< [“0”, “1”, “2”, “3”]` * return 값 : unshift 후의 배열의 개수 반환 #### pop( ) : 배열의 맨 뒤의 요소를 추출 `var nums = [“1”, “2”, “3”];` `nums.pop( ) // nums[length-1] 추출` `< “3” // 추출되는 요소 반환` `nums` `< [ “1”, “2”]` * return 값 : 추출되는 요소 반 #### shift( ) : 배열의 맨 앞의 요소를 추출 `var nums = [“1”, “2”, “3”];` `nums.shift( ) // nums[0] 추출` `< “1” // 추출되는 요소 반환` `nums` `< [ “2”, “3”]` * return 값 : 추출되는 요소 반환 #### splice( ) : 원하는 위치의 요소를 삭제/추 1. 인수가 1개 일때 - only 삭제기능 `var nums = [“0”, “1”, “2”, “3” , “4” , “5”];` `nums.splice(3) // nums[3] 부터 nums[length-1]까지 삭제` `< [“3” , “4” , “5”] //추출되는 요소 반환` `nums` `< [“0”, “1”, “2”]` 2\. 인수가 2개일 때 – only 삭제기능 `var nums = [“0”, “1”, “2”, “3” , “4” , “5”];` `nums.splice(3, 1) // nums[3] 부터 1개의 요소 삭제` `< [“3”] // 추출되는 요소 반환` `nums` `< [“0”, “1”, “2”, “4” , “5”];` 3\. 인수가 3개일 때 – 삭제 + 추가 기능 `var nums = [“0”, “1”, “2”, “3” , “4” , “5”];` `nums.splice(3, 1, “7”) // nums[3] 부터 1개의 요소 삭제 및 “7” 추가` `< [“3”] //추출되는 요소 반환` `nums` `< [“0”, “1”, “2”, “7” , “4” , “5”]` 4\. 인수가 3개일 때 – only 추가 기능만 고자 할때 `var nums = [“0”, “1”, “2”, “3” , “4” , “5”];` `nums.splice(3, 0, “7”) //nums[3] 에 “7” 추가` `< [ ] //추출되는 요소 반환-only추가이니 추출요소 없` `nums < [“0”, “1”, “2”, “7” , “3”, “4” , “5”]` 5\. 인수가 3개일 때 – only 추가 기능(여러 개) `var nums = [“0”, “1”, “2”, “3” , “4” , “5”];` `nums.splice(3, 0, “7”, “8”) //nums[3] 에 “7” “8” 추가` `< [ ] //추출되는 요소 반환` `nums` `< [“0”, “1”, “2”, “7” , “8”, “3”, “4” , “5”]` #### slice( ) : 원하는 위치의 요소들을 추출 1\. slice(n) => n부터 마지막 요소까지 추출 `var nums = [“0”, “1”, “2”, “3” , “4” , “5”];` `nums.slice(3) //nums[3] 부터 nums[length-1]까지 추출` `< [“3” , “4” , “5”] //추출되는 요소 반환` `nums` `< [“0”, “1”, “2”, “3” , “4” , “5”] //기존 배열은 변경 X` 2\. slice(n) => n부터 마지막 요소까지 추출 `var nums = [“0”, “1”, “2”, “3” , “4” , “5”];` `nums.slice(3, 5) //nums[3] 부터 nums[4]까지 추출` `< [ “3” , “4” ] //추출되는 요소 반환` `nums` `< [“0”, “1”, “2”, “3” , “4” , “5”] //기존 배열은 변경 X` ### 배열 활용하여 여행 준비물 점검 프로그램 만들기 ![](https://2868230302-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LthQK17hYR8d496L5F2%2F-Lu_9Dhp4umgPbkrWcNw%2F-Lu_9P5bl36aT-nxL6rb%2F20191120.PNG?alt=media\&token=cac43ee7-d2d2-41b0-9798-a92f1d3abb25) 1\. 배열 만들기 2\. 챙길 물건 배열에 추가하기(push()) 3\. 추가한 내용 화면에 표시하기(생략) 4\. 챙긴 물건 목록에서 삭제하기(splice())