[JavaScript] 객체 - 배열

 

• 객체
• 배열
• 배열에 요소 추가하기 - unshift, push
• 배열 요소 제거하기 - pop, shift, splice
• 배열에서 요소 찾기 - includes, indexOf

 

 

객체(object)

객체

• 배열
• 함수
• 배열이나 함수가 아닌 객체

 

 

배열

 

• 배열 내부에 든 값을 요소라고 한다.
• 변수도 배열의 요소가 될 수 있다.
• 배열의 요소는 자료형이 일치하지 않거나 값이 중복될 수 있다.
• 배열의 length 데이터 속성은 요소의 개수를 반환한다.  

const a = 10
const b = 20
const variableArray = [a, b, 30]
variableArray[0]                 // 10 (a의 값)
                                 // 변수도 배열에 넣을 수 있다. 
                                 
const everyting = ['한글', 1, undefined, null, true]

everyting.length                 // 5

 

 

배열에 요소 추가하기 - unshift, push

 

1. 인덱스값 사용

배열에 인덱스에 값을 대입하면 해당 위치에 요소가 추가된다. 

const target = ['a','b','c'];   
target[3] = 'd';                 // d
console.log(target)              // (4) ["a", "b", "c", "d"]

target[5] = 'f'                  // f
console.log(target)              // (6) ["a", "b", "c", "d",  empty × 2, 'f']

const target = ['가', '나', '다']
target[target.length] = '라'
console.log(target)              // (4) ["가", "니", "다", "라"]
                                 // 배열.length를 사용해 배열의 맨 마지막 자리에 요소를 추가할 수 있다.
                                 
const target = ['a','b','c']; 
target[0] = 'd';                 // 배열의 맨 앞에 요소를 추가하고 싶은 경우 이 방법을 사용하면 첫번째 요소의 값이 바뀌게 된다. 
console.log(target)              // (3) ["d", "b", "c"]

 

 

2. unshift

unshift 를 사용하면 배열의 맨 앞에 요소를 추가할 수 있다.

const target = ['a','b','c']; 
target.unshift('d');
console.log(target)              // (4) ["d", "a", "b", "c"]

 

 

3. push

push를 사용하면 배열의 맨 뒤에 요소를 추가할 수 있다. 

const target = ['a','b','c']; 
target.push('d');
console.log(target)              // (4) ["a", "b", "c", "d"]

 

 

 

배열 요소 제거하기 - pop, shift, splice

 

1. pop

pop 을 사용하면 배열의 마지막 요소를 제거할 수 있다.

const target = ['a','b','c'];    // (3) ["a", "b", "c"]
target.pop();                    // c
console.log(target)              // (2) ["a", "b"]

 

2. shift

shift를 사용하면 배열의 첫 번째 요소를 제거할 수 있다.

const target = ['a','b','c'];    // (3) ["a", "b", "c"]
target.shift();                  // a
console.log(target)              // (2) ["b", "c"]

 

3. splice

splice 를 사용해 배열의 중간 요소를 제거할 수 있다.

 

방법 1)

splice(item1, item2)

• 첫 번째 인자는 인덱스, 두 번째 인자는 지울 요소의 개수이다. 
• 인덱스가 item1 인 요소부터, item2개의 요소를 제거한다. 
• item2가 주어지지 않았을 경우 인덱스가 item1 인 요소부터 마지막까지 모든 요소를 제거한다. 

const target = ['a','b','c'];    // (3) ["a", "b", "c"]
target.splice(1,1)
console.log(target)              // (3) ["a", "c"]
    
const target = ['a','b','c','d'];// (4) ["a", "b", "c", "d"]
target.splice(2,2)
console.log(target)              // (2) ["a", "b"]

const target = ['a','b','c'];    
target.splice(1)
console.log(target)              // (1) ["a"]

 

 

 

방법 2)

splice(item1, item2, item3, ..., itemN)

• item3부터는 해당 위치에 넣을 요소이다. 
• 인덱스가 item1 인 요소부터, item2개의 요소를 제거한 후 item3부터 모든 인자들을 삽입한다. 

const target = ['a','b','c','d','e']; 
target.splice(1,3,'f','g')
console.log(target)              // (4) ["a", "f", "g", "e"]
                                 // splice(1,3,'f','g')

const target = ['a','b','c'];  
target.splice(2,0,'d')
console.log(target)              // (4) ["a", "b", "d", "c"]
                                 // splice를 이용해 배열에 요소를 넣을 수 있다.
                                 // target.splice(2,0,'d')
                                 // 인덱스 2 자리에 'd'를 채워넣는다.

 

 

배열에서 요소 찾기 - includes, indexOf

 

배열에 특정 요소가 있는지 찾을 수 있다.

 

1. includes

includes는 주어진 값이 배열에 존재하면 true, 존재하지 않으면 false를 반환한다. 

const target = ['a','b','c'];   
const result1 = target.includes('a')
const result2 = target.includes('d')
console.log(result1)                 // target에 'a'요소가 존재하므로 true
console.log(result2)                 // target에 'd' 요소는 존재하지 않으므로 false

 

2. indexOf

• 찾으려는 요소의 인덱스를 반환한다.
• indexOf는 배열의 앞에서부터 해당 요소가 있는지 찾는다.
• lastIndexOf는 배열의 뒤에서부터 해당 요소가 있는지 찾는다.
• 존재하지 않는 값의 인덱스를 찾을 경우 -1을 반환한다. 

const target = ['a','b','c']; 
const result = target.indexOf('b')        // 해당 요소의 index값을 반환한다.
const result1 = target.lastIndexOf('b')   // 요소의 index를 배열의 뒤에서부터 찾는다.
const result3 = target.indexOf('f')       // 해당 요소가 존재하지 않으면 -1 를 반환한다. 
console.log(result)                       // 1
console.log(result1)                      // 1
console.log(result2)                      // -1


const target = ['a','b','c','a']; 
const result = target.indexOf('a')        // 0
                                          // indexOf는 요소를 앞에서부터 찾기 때문에 0을 반환
const result1 = target.lastIndexOf('a')   // 3
                                          // lastIndexOf는 요소를 앞에서부터 찾기 때문에 3을 반환

 

 

 

 

+ 

 

 

const 배열

• 위를 통해 배열은 const로 선언해도 수정할 수 있음을 알 수 있다.
• const는 새로운 값을 대입(=)하는 것을 할 수 없다.
  즉, 재대입 재할당이 불가능하다.
• const에 객체가 대입되면, 객체 내부의 속성이나 배열의 요소는 수정할 수 있다.

 

배열의 요소가 null

배열의 요소를 null로 변경할 경우, 값이 null로 바뀔 뿐 해당 요소가 사라지지 않는다. 

const target = ['a','b','c'];    // (3) ["a", "b", "c"]
target[target.length-1] = null   // null
console.log(target)              // (3) ["a", "b", null]
                                 // 배열의 마지막 요소를 null로 바꾼다고 사라지지 않는다.
                                 // 해당 요소의 값이 null이 될 뿐이다.