코딩토닉

자바스크립트 배열 추가,삭제 방법

배열 추가 : Array.push(),  Array.unshift(),  Array.splice()
배열 삭제 : Array.pop(),  Array.shift(),  Array.splice()

배열 추가

1. Array.push() - 배열의 끝에 추가

var arr = ['A', 'B', 'C'];

arr.push('D'); // 배열의 끝에 추가
// arr = ['A', 'B', 'C', 'D']

2. Array.unshift() - 배열 앞쪽에 추가

var arr = ['A', 'B', 'C'];

// 배열의 앞쪽에 추가
arr.unshift('D');
// arr = ['D', 'A', 'B', 'C']

3. Array.splice("위치",0,["요소1","요소2" …])

var arr = ['A', 'B', 'C'];

// index 2 ('C')의 위치에 요소를 추가
arr.splice(2, 0, 'D'); 
// arr = ['A', 'B', 'D', 'C']

// index 4의 위치에 2개의 요소를 추가
arr.splice(4, 0, 'E', 'F'); 
// arr = ['A', 'B', 'D', 'C', 'E', 'F']

배열 삭제

1. Array.pop() - 배열의 마지막 삭제

var arr = ['A', 'B', 'C', 'E', 'F'];

// 배열의 마지막 제거
arr.pop(); 
// arr = ['A', 'B', 'C', 'E']

// 제거한 요소를 반환 받을 수 있음
var delPop = arr.pop();
// arr = ['A', 'B', 'C']

console(delPop)
// delPop = 'E'

2. Array.shift() - 배열의 첫번째 요소 제거

var arr = ['A', 'B', 'C', 'E', 'F'];

// 배열의 첫번째 요소를 제거
arr.shift(); 
// arr = ['B', 'C', 'E', 'F']

// 제거한 요소를 반환 받을 수 있음
var delShift = arr.shift();
// arr = ['C', 'E', 'F']

console(delShift)
// delShift = 'B'

3.Array.splice - ("시작위치","제거개수")

var arr = ['A', 'B', 'C', 'E', 'F'];

// index 2 부터 1개의 요소('C')를 제거
arr.splice(2, 1); 
// arr = ['A', 'B', 'E', 'F']

// index 1 부터 2개의 요소('B', 'E')를 제거
arr.splice(1, 2); 
// arr = ['A', 'F']

// 제거한 요소를 반환 받을 수 있음
var delRemoved = arr.splice(1, 1);
// arr = ['A']

console.log(delRemoved)
// delRemoved = 'F'

자바스크립트 배열 생성 방법

1. [ ]를 사용하여 만드는 방법

2. Array() 생성자를 이용하여 배열을 생성하는 방법

1. [ ]를 사용하여 만드는 방법

//배열 생성(비어있는 배열)

let arr = [];

arr[0] = 'A';
arr[1] = 'B';
arr[2] = 'C';

for(let i = 0; i <arr.length; i++){
    console.log(arr[i]);
}

//배열 생성 (초기 값 할당)
let arr = ['A', 'B', 'C'];

for(let i = 0; i <arr.length; i++){
    console.log(arr[i]);
}

// 배열 생성 (배열 크기 지정)
// 쉼표 개수만큼 크기 지정

let arr = [,,,,];

for(let i = 0; i < arr.length; i++){
    console.log(arr[i]);
}

//값이 할당되어 있지 않아서 undefined로 출력

2. Array() 생성자를 이용하여 배열을 생성하는 방법

//배열 생성 (비어있는 배열)

let arr = new Array();

arr[0] = 'A';
arr[1] = 'B';
arr[2] = 'C';

for(let i = 0; i <arr.length; i++){
    console.log(arr[i]);
}​

//배열 생성 (초기 값 할당)
let arr = new Array('A', 'B', 'C');

for(let i = 0; i <arr.length; i++){
    console.log(arr[i]);
}

// 배열 생성 (배열 크기 지정)

let arr = new Array(4);

for(let i = 0; i < arr.length; i++){
    console.log(arr[i]);
}

//값이 할당되어 있지 않아서 undefined로 출력

자바스크립트 배열만의 특징

배열 내부의 데이터 타입이 서로 다를 수 있다.

배열의 크기는 동적으로 변경될 수 있다.

//배열 내부의 데이터 타입이 서로 다를 수 있다.
var arr = [1234, 'text', true];

//배열의 크기는 동적으로 변경될 수 있다.
var arr = [1234, 'text', true];

//배열의 길이를 변경하여 크기 변경(3->4)
//값이 할당되지 않고 길이만 추가되었기때문에 undefind로 추가
arr.length = 4;

//새로운 배열을 추가하면 자동으로 변경(4->5)
arr[4] = 'sky';

//새로운 배열을 추가하여 크기 변경(5->6)
arr.push('sea');

for(let i = 0; i<arr.length; i++){
    console.log(arr[i]);
}

//출력 결과
1234
text
true
undefined
sky
sea

자바스크립트의 배열은 변수 외에도 객체와 함수도 담을 수 있고, 배열이 생성 되어도 임의로 크기가 변경이 가능하기때문에 자유롭게 사용할 수 있지만 사용 시 많은 주의를 기울여야할 필요가 있습니다.

Position

HTML에서는 static 포지션이 기본값으로 되어있습니다.

static 포지션은 HTML이 작성된 순서대로 나열이 되어 있는 형태를 의미하며,

포지션의 종류에는 크게 static,relative,absolute,fixed 4개의 값이 있습니다.

relative

relatives는 별도의 위치값을 지정하지 않으면 static과 다르지 않은 결과를 보여줍니다.

해당 요소가 기본적으로 표시된 위치에서 top,rigth,bottom,left를 지정하면 표시된 위치에서 좌표가 변경됩니다.

해당 요소가 붕 떠서 독립적으로 자유롭게 이동하는 것처럼 보입니다.

absolute

absolute는 기본적으로 표시된 위치에서 이동하는 것이 아니라, 가장 가까운 부모 엘리먼트를 기준으로 위치가 지정된다고 보면된다. 일반적으로 부모는 relatives 속성값을 부여하며, 기준으로 삼을만한 부모 엘리먼트가 없다면 document body를 기준을로 잡습니다. 부모 중에 position이 static으로 지정되지 않은 엘리먼트를 기준으로 지정된다고 보면 됩니다.

absolute 속성을 부여한 요소는 가운데 정렬이 풀리기 때문에 가운데 정렬을 하고 싶다면 아래와 같은 속성을 추가해주면 됩니다.

.button {
  position : absolute; 
  width : 자신이 원하는 크기
  left : 0;
  right : 0; 
  margin : 0 auto;
}

fixed

fixed는 브라우저기준으로 위치가 지정됩니다. 페이지가 스크롤이 되더라도 항상 그 위치에 고정이 되어있으며,

스크롤을 하더라도 어느 한 위치에 고정을 하고 싶을때 사용합니다.