배열

배열 Array

 

 

length를 사용하면 배열에 담긴 요소가 몇 개인지 알아낼 수 있습니다.

let fruits = ["사과", "오렌지", "자두"];

alert( fruits.length ); // 3

 

 

배열 요소의 자료형엔 제약이 없습니다.

// 요소에 여러 가지 자료형이 섞여 있습니다.
let arr = [ '사과', { name: '이보라' }, true, function() { alert('안녕하세요.'); } ];

// 인덱스가 1인 요소(객체)의 name 프로퍼티를 출력합니다.
alert( arr[1].name ); // 이보라

// 인덱스가 3인 요소(함수)를 실행합니다.
arr[3](); // 안녕하세요.

 

 

배열요소에 접근하기

const numbers = [273,52,103,32]
undefined
numbers[0]
273
numbers[1]
52
numbers[1+1]
103
numbers[1* 3]
32

 

배열요소 개수 확인하기

const fruits = ['배','사과','키위','바나나']
    

fruits.length
4     // 배열 fruits 4개의 요소가 들어있으므로 4를출력
fruits[fruits.length-1]
'바나나'   //fruits[4-1], 배열의 3번째 요소인 "바나나" 출력

 

 

배열 뒷부분에 요소 추가하기

const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']

todos
(3) ['우유 구매', '업무 메일 확인하기', '필라테스 수업']

todos.push('저녁식사 준비하기')
4   //push()메소드로 요소가 추가되어 기존요소의 갯수인 3에서 늘어난 갯수인 4가 출력됨
todos.push('밥먹기')
5 //push()메소드로 요소가 추가되어 기존요소의 갯수인 3에서 늘어난 갯수인 5가 출력됨

todos
(5) ['우유 구매', '업무 메일 확인하기', '필라테스 수업', '저녁식사 준비하기', '밥먹기']
//push()메소드로 추가한 '저녁식사 준비하기','밥먹기'가 추가되어서 출력됨

 

인덱스를 사용해 배열 뒷부분에 요소 추가하기

const fruitA = ['사과','배','바나나']
    
fruitA[10] = '귤' 배열10번째에 '귤'요소를 추가
'귤'
fruitA
(11) ['사과', '배', '바나나', empty × 7, '귤']

//4번부터 9번요소까지 아무것도 없는 empty 가됨

const fruisB = ['사과','배','바나나']

fruisB[fruisB.length] = '귤' //fruitsB의 요소는 3개이므로 fruitsB[3]에 '귤'을 추가
'귤'
fruisB
(4) ['사과', '배', '바나나', '귤']

 

pop() 배열의 맨뒤에 있는 요소를제거

const fruits = ["사과", "오렌지", "배"];

console.log( fruits.pop() ); // 배열에서 "배"를 제거하고 제거된 요소를 얼럿창에 띄웁니다.
배
console.log( fruits ); // 사과,오렌지

 

shift() 배열의 맨앞에 있는 요소를제거

const fruits = ["사과", "오렌지", "배"];

console.log( fruits.shift() ); // 배열에서 "사과"를 제거하고 제거된 요소를 출력
사과

console.log( fruits ); 
// 오렌지,배

 

unshift 배열앞에 요소추가

let fruits = ["오렌지", "배"];

fruits.unshift('사과');
//3

console.log( fruits ); 
// 사과,오렌지,배

 

push(), unshift 요소 여러개를 한번에 더해주는것도 가능

let fruits = ["사과"];
undefined
fruits.push('배','귤')
fruits.unshift('키위','낑깡')
// 5 변경된 배열의 갯수 표시

console.log(fruits)
//['키위', '낑깡', '사과', '배', '귤']

 

배열의 본질은 객체

let fruits = ["바나나"]

let arr = fruits

console.log(arr===fruits)
//true

arr.push("배");
//2

console.log(fruits)
//['바나나', '배']

 

splice

const itemsA = ['사과','배','바나나']

itemsA.splice(2,1) //배열의 2번째 인덱스('바나나')로 부터 1개의 요소를 제거
['바나나']  //제거된 요소가 리턴

itemsA  //배열 값을 출력해보면 '바나나' 삭제
(2) ['사과', '배']

 

 

문자열의 indexOf()메소드는 특정 문자열의 위치를 찾음 "마르고"의 "마"가 배열의 10번째에 위치해 있으므로 "마"의 배열값 10을 출력

const stringA = "동해물과 백두산이 마르고 닳도록"
undefined
stringA.indexOf("마르고")
10

 

const str ="안녕하세요"
str[2]
'하'
str[str.length-1]
'요'
const array = [273, 'string

const array = [273, 'string',true, function(),{ },{},[273,103]]

//Array

const array = [273, 'string',true, function(){ },{},[273,103]]
undefined

array
(6) [273, 'string', true, ƒ, {…}, Array(2)]0: 2731: "string"2: true3: ƒ ()4: [[Prototype]]: Object5: (2) [273, 103]length: 6[[Prototype]]: Array(0)
array[3,4]
{}

배열을 배열답게 만들어주는 것은 특수 내부 표현방식입니다. 

 

그런데 개발자가 배열을 '순서가 있는 자료의 컬렉션’처럼 다루지 않고 일반 객체처럼 다루면 이런 기법들이 제대로 동작하지 않습니다.

let fruits = []; // 빈 배열을 하나 만듭니다.

fruits[99999] = 5; // 배열의 길이보다 훨씬 큰 숫자를 사용해 프로퍼티를 만듭니다.

fruits.age = 25; // 임의의 이름을 사용해 프로퍼티를 만듭니다.

배열은 객체이므로 예시처럼 원하는 프로퍼티를 추가해도 문제가 발생하지 않습니다.

 

 

 

https://www.codecademy.com/resources/docs/javascript/arrays

JavaScript | Arrays | Codecademy

https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Arrays

배열(Arrays) - Web 개발 학습하기 | MDN