[’가’, ‘나’, ‘가’, ‘마’, ‘가’, ‘라’]

위의 배열에서 indexOf와 splice를 사용하여 ‘가’를 제거할 때

const arr = ['가', '나', '가', '마', '가', '라'];

while (arr.indexOf('가') > - 1) {
    arr.splice(arr.indexOf('가'), 1); }

['가'] arr

(3) ['나', '마', '라']

와 같이 나타낼 수 있으며, 반복하는 구간을 찾아서 함수를 사용한다.

여기서 나아가자면 코드를 더 클린하게 만들기 위해서

let index = arr.indexOf('가') 등을 사용하여 줄일 수 있다.

배열은 값들을 나열한 것 이므로 반복문과 같이 사용하는 경우가 많다.

while 문과 for 문을 이용하여 모든 배열을 console.log 할 경우

const target = ['가', '나', '다', '라', '마']; let i = 0; while (i < target.length) { console.log(target[i]); i++; } 가 나 다 라 마 4

와 같이 나타나며

const target = ['가', '나', '다', '라', '마']; for(let i = 0; i < target.length; i++) { console.log(target[i]); } 가 나 다 라 마

와 같이 나타낼 수 있다.

배열에서 특정 요소가 있는지 찾아보고 싶을 때, ‘includes’ 기능을 사용할 수 있는데

예를 들어,

const target = ['가', '나', '다', '라', '마'];

const result = target.includes('나');

const result1 = target.includes('바');

console.log(result);

console.log(result1);

true

false

와 같이 나타나며 주어진 값이 배열 내부에 존재하면 ‘true’가 되고, 존재하지 않으면 ‘false’로 나타난다.

‘indexof’와 ‘lastIndexOf’ 기능을 사용하여 찾고자 하는 요소가 몇 번째 인덱스에 위치하는지도 알 수 있으며

이는

const target = ['나', '다', '라', '다', '라'];

const result0 = target.indexOf('다');

const result1 = target.lastIndexOf('라');

const result2 = target.indexOf('가');

console.log(result0);

console.log(result1);

console.log(result2);

1

4

-1

와 같이 나타날 수 있으며

‘const result0 = target.indexOf('다');’의 경우, ‘다’ 요소가 인덱스 1번에 위치하므로 값이 ‘1’로 나타나였고

‘const result1 = target.lastIndexOf('라');’의 경우 ‘라’ 요소가 2개 있지만, 뒤에서부터 검색하여 ‘4’의 값이 나타났으며

‘const result2 = target.indexOf('가');’ 의 경우 ‘가’ 요소가 존재하지 않으므로 ‘-1’로 값이 나타났다.

배열의 요소를 수정하기 위해서는 요소에 해당하는 인덱스를 수정할 수 있으며

예를 들면,

const target = ['가', '나', '다', '라'];

target[0] = 'a'; console.log(target);

(4) ['a', '나', '다', '라']

의 반환값으로 나타난다. 이는, 인덱스 0에 위치해있던 ‘가’ 값이 ‘a’로 변한 것이다.

마지막에 위치한 요소를 제거하고 싶다면 ‘pop’을 사용할 수 있으며

예를 들면,

const target = ['가', '나', '다', '라', '마'];

target.pop();

console.log(target);

(4) ['가', '나', '다', '라']

로 나타낼 수 있다.

처음에 위치한 요소를 제거하고 싶다면 ‘shift’를 사용하여

예를 들면,

const target = ['가', '나', '다', '라']

target.shift();

console.log(target); (3) ['나', '다', '라']

와 같이 나타날 수 있다.

중간의 요소를 제거하고 싶다면 ‘splice’ 기능을 사용할 수 있으며

이는

const target = ['가', '나', '다', '라', '마'];

target.splice(1, 1);

['나'] target

(4) ['가', '다', '라', '마']

와 같이 나타날 수 있는데, ‘(1, 1)의 첫번째 1 부분은 인덱스 넘버 1을 말하며 뒤의 1은 인덱스 넘버 위치로부터 1개 만을 뜻한다.

예를 들어, (4) ['가', '다', '라', '마']의 ‘다’와 ‘라’ 요소를 제거하고 싶다면 target.splice(2, 2); console.log(target); (2) ['가', '다']

와 같이 나타날 수 있다.

만약, 뒷부분에 숫자를 적지 않는다면 해당 위치로부터의 요소들은 전부 제거된다.

예를 들어,

const target = ['가', '나', '다', '라', '마']; target.splice(1); console.log(target); ['가']

와 같이 나타난다.

또한 배열의 요소를 변경할 수 있으며

예를 들어,

const target = ['가', '나', '다', '라', '마'];

target.splice(1, 2, 'B' ,'C');

console.log(target);

(5) ['가', 'B', 'C', '라', '마']

와 같이 나타낼 수 있다. 이는 인덱스 넘버의 1 뒤의 요소를 2개 제거하고 2개의 요소를 새로 추가한 모습이다.

또한 배열을 제거하지 않고 중간에 요소만 추가하고 싶을 때는

const target = ['가', 'B', 'C', '라', '마'];

target.splice(1, 0, 'A');

console.log(target);

(6) ['가', 'A', 'B', 'C', '라', '마']

와 같이 표현할 수 있으며, 이는 인덱스 넘버 1번 뒤에 아무 요소도 제거하지 않고 새로운 요소를 추가한 모습이다.

모든 합수명과 값을 하나하나 선언하지 않고 일률을 높이기 위해 '배열'을 사용할 수 있다.

배열

하나의 선언에 다양한 값을 입력할 수 있다.

예를 들면,

let hobbies = ['Sports', 'Cooking', 'Reading'];
alert(hobbies[0]);

와 같이 나타낼 수 있으며, 이는 변수를 선언한 후에 여러 값을 순서대로 저장하는 자료구조이다.  

배열들을 지정한 후 해당하는 배열의 인덱스 넘버를 출력한 것 이고 인덱스 넘버는 0에서부터 시작한다.

또한 배열 안에 배열을 넣을 수 있으며 이러한 배열을 ‘이차원배열’ 이라 한다.

예를 들면,

const arrayofarray = [[1, 2, 3,], [4,5,6]];

arrayofarray [0]

[1, 2, 3]

의 반환값을 나타내고

이 배열에 다른 배합이나 변수 역시 추가할 수 있다.

예를 들면,

const a = 10;

const b = 20;

const variableofarray = [a, b, 30]; variableofarray[1];

20

으로 반환값이 표시된다.

이러한 배열 값의 안에는 아무 값이 없는 것도 넣을 수 있으며, 중복 또한 가능하다.

또한 배열이 너무 많아 갯수를 셀 수 없다면 ‘.length’를 이용할 수 있는데,

이는

const manythings = [1, 2, 3, 4, 5, 'a' ,'b' ,'c' ,'d' ,'e' ,'eyes' ,'nose' ,'mouth', null, NaN, undefined]; console.log(manythings.length);

16 의 반환값이 표시된다.

 즉, 배열은 16개가 있으며 마지막 인덱스는 0부터 시작하므로 15의 번호를 갖게 된다.

이는 배열의 요소 개수에서 1을 빼면 마지막 요소의 인덱스가 되므로 이를 활용해 마지막 요소의 값을 찾을 수 있다.

예를 들면,

const whatIsLastElement = ['a', 'b', 'c', 'd', 'e'];

console.log(whatIsLastElement [whatIsLastElement.length - 1]);

e

로 표현할 수 있다.

이를 응용한 예시는

const array = ['1', 'a', '2', 'b', '3', 'c', 100, 'f'];

console.log(array[array.length - 3]);

c

이며 마지막 배열에서 3번째 값을 출력해준다.

 이러한 배열에 새로운 요소를 더하거나 뺄 수도 있으며

예를 들면,

const target = [1, 2, 3, 4, 5];

target[5] = 6

console.log(target);

(6) [1, 2, 3, 4, 5, 6]

이는 인덱스 5번 자리에 6의 값을 입력한 것이며, 입력한 콘솔로그에 6까지 나타나게 된다.

앞의 (6)의 경우에는 6개의 값이 있다는 것을 알려준다.

 하지만, 숫자의 위치를 모르는 배열의 마지막에 새로운 값을 넣고 싶을 때는

const target = ['가', '나', '다', '라', '마'];

target[target.length] = '바';

console.log(target);

(6) ['가', '나', '다', '라', '마', '바']

처럼 입력할 수 있으며, 넣고 싶은 위치를 바꾸고 싶은 경우에는 ‘length’ 대신에 ‘length - 1’, ‘length - 2’등을 입력하여 위치변경이 가능하다.

배열의 맨 앞에 값을 추가하고 싶은 경우에는 ‘unshift’를 이용하며

예를 들면,

const target = ['나', '다', '라', '마', '바'];

target.unshift('가');

console.log(target);

(6) ['가', '나', '다', '라', '마', '바']

로 나타낼 수 있다.

 이는 [‘나’, ‘다’, ‘라’, ‘마’, ‘바’] 앞에 ‘가’ 객체를 배열 안에 추가한 모습이며 뒤의 요소들은 인덱스 번호가 하나씩 뒤로 밀려나게 된다.

또한 배열의 맨 뒤에 새로운 요소를 추가하고 싶을 경우에는 ‘push’를 사용 할 수 있는데

예를 들면,

const target = ['가', '나', '다', '라', '마'];

target.push('바');

console.log(target);

(6) ['가', '나', '다', '라', '마', '바']

로 나타낼 수 있다.

일반적으로 const 는 상수이며 변경이 불가능하다고 배웠지만, 해당 경우에 배열을 추가, 제거, 변경 등이 가능하며 const 자체를 변경하는 새로운 대입은 불가능하다.

객체

객체는 키=값 쌍으로 데이터를 지정할 수 있다.

예를 들면,

let job = {
title: 'Developer',
place: 'Seoul'
salary: 30000,
};
alert(job.title);

와 같이 나타낼 수 있으며, 이는 선언한 객체의 여러가지 속성을 포함한다. 객체의 속성에는 점 표기법(.)을 사용하여 접근할 수 있고

 'job.title'은 'Developer'를 반환한다.

<참고>

배열과 함수가 객체인 이유 배열과 함수는 속성을 추가하고 수정 및 제거하는 등 객체의 성질을 모두 사용할 수 있다.

따라서, 객체는 함수와 배열을 모두 포함하는 개념으로 {}를 사용해 만든 객체를 ‘객체 리터럴’이라 칭하여 따로 부른다.