배열

순서가 있는 값을 의미한다.

배열에 대하여

1. 순서는 인덱스(Index)라고 부르며, 1이 아닌 0부터 번호를 매긴다.

ex) 배열 myNumber가
[0] [1] [2] [3] [4] <- 인덱스(index)
73  98  86  61  96 <- 요소(element)

라고 할 때 배열을 가져오면
let myNumber = [73, 98, 86, 61, 96];

이 때 대괄호(square bracket)를 이요하여 배열을 만들고, 배열 안에 각각의 원소(element)는 쉼표(comma)로 구분해준다.

값은 인덱스를 이용해 접근한다.
ex) myNumber라는 배열의 3번째 인덱스를 조회하려면 myNumber[3]; // 61
ex) myNumber라는 배열의 3번째 인덱스의 값을 변경하려면 myNumber[3] = 200; 을 입력한다.
그 후 myNumber;를 입력하면
myNumber; // [73, 98, 86, 200, 96];이 된다.

(연습문제1)
let fruits = [
'banana',
'apple',
'pineapple'
]; 이라고 할 때
fruits의 2번째 인덱스의 값은 "pineapple"이다.
fruits의 3번째 인덱스의 값은 undefined이다.

(연습문제2)
let myNumber = [[13, 30], [73, 8], [44, 17]]; 이라고 할 때
myNumber의 1번째 인덱스의 값은 [73, 8] 이다.
myNumber의 1번째 인덱스값의 0번째 인덱스의 값은 73이다.

2. 배열로 길이를 알아낼 수도 있다.

ex) let myNumber = [73, 98, 86, 61]; 이라고 할 때
myNumber라는 배열의 길이를 알아내려면
myNumber.length; // 4

이 때 온점(dot)을 이용해서 변수가 가지고 있는 속성(property)에 접근할 수 있다.
그리고 길이같은 경우는 인덱스를 찾으라는 뜻이 아니므로 0부터 시작하는게 아니라 1부터 시작한다.
myNumber.length는 myNumber라는 배열의 길이 라는 뜻이다.

.length

배열의 이름 앞에 .length를 사용하며, 인덱스를 찾으라는 뜻이 아니므로 0부터 시작하는게 아니라 1부터 시작한다.

3. 배열로 요소(element)를 추가할 수 있다.

ex) let myNumber = [73, 98, 86, 61]; 이라고 할 때
myNumber라는 배열 끝에 96이라는 값을 추가하려면
myNumber.push(96); // 5 가 나온다. 5번째에 추가되었다는 뜻이다.
그리고 myNumber;를 실행해보면 [73, 98, 86, 61, 96] 이 나온다.

이 때, 온점(dot)을 이용해서 관련된 명령(method)도 실행할 수 있다. 명령을 실행할 때는 함수를 실행하듯 괄호를 열고 닫는 형태로 실행한다.

.push()

배열 끝에 요소를 추가할 때 사용하며, 괄호안에 추가할 요소를 넣는다.

4. 배열로 요소(element)를 삭제할 수 있다.

ex) let myNumber = [73, 98, 86, 61]; 이라고 할 때
myNumber라는 배열 마지막 값을 삭제하려면
myNumber.pop(); // 61 이 나온다. 배열의 마지막 값이 61이라는 뜻이다.
그리고 myNumber;를 실행해보면 [73, 98, 86] 이 나온다.

.pop()

배열 끝에 요소를 삭제할 때 사용하며, 괄호안에는 아무것도 넣지 않는다.

배열의 반복

배열과 반복문을 조합하는 경우는 매우 많다!

ex) let myNum = [73, 98, 86, 61]; 이라고 할 때,
"배열 myNum의 n번째 인덱스"를 출력하자. // console.log(myNum[n]);

조건:
1. 숫자(n)는 0부터 시작한다. // let n = 0;
2. 숫자(n)를 배열의 길이보다 작을 때까지 반복한다. // n < myNum.length;
3. 숫자(n)는 1씩 증가한다. // n++ <- n = n + 1 대신 n++라고 쓸 수 있다.

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

(연습문제)
let myNum = [10, 20, 40, 10];
let sum = 0;

for( ; ; ) {
// 반복할 구문
}

console.log(sum); //80
이라고 할때, myNum의 모든 element를 누적해서 더하기 위해 필요한 조건과 반복할 구문은?

필요한 조건 : let n = 0; n < myNum.length; n++
반복할 구문 : sum = sum + myNum[n];

for(let n = 0; n < myNum.length; n++) {
sum = sum + myNum[n];
}

반복할 구문의 흐름을 주석표시로 해놓았다.
n이 0부터 시작하고, sum도 0이라고 선언했다.
그러면 0+10은 sum에 myNum배열의 0번째 인덱스의 값을 더한것이다. 그러면 sum은 10이된다.
그리고 10에 myNum배열의 1번째 인덱스의 값을 더해 10+20 이 된다.
이런식으로 30+40, 70+10 이되어 총 80의 값이 나와야 한다.
식을 정리하면 아래와 같다.

만약 sum의 값을 할당하지 않는다면 sum은 undefined가 되고, undefined에 number값을 더하면 NaN, 즉 Not a Number의 값이 나오게 된다.
그러므로 초기에 sum의 값을 할당해야 한다!

배열 기초 메소드

1. 배열인지 아닌지 확인하기

Array.isArray()

특정 값이 배열인지 아닌지 판별할 때 쓴다. 괄호안에 검사하고싶은 객체를 쓴다.

ex) let words = ['피', '땀', '눈물'];
이라고 할 때,
typeof words를 검색하면 "object"가 나온다.
typeof 같은 경우는 string인지 number인지 구분할 수 있으나 배열인지 객체인지까지는 구분할 수 없다. 그래서 Array.isArray를 쓴다.
Array.isArray(words); // true
Array.isArray(['피', '땀', '눈물']); // true

2. 배열 요소 추가 및 삭제하기

ex) let arr = ['code', 'states'];
이라고 할 때,
console.table(arr)을 개발자도구에 입력해보면 각 인덱스에 매치된 Value 들을 알 수 있다.
여기서 arr.push('pre')를 입력한 뒤 console.table(arr)을 실행해보면 'pre'값이 'states' 뒤에 추가되어있음을 알 수 있다.

그럼 반대로 뒤의 요소를 삭제해보자.
push의 반댓말은 pop이다.
arr.pop()을 입력한 뒤 console.table(arr)을 실행해보면 'pre'값이 삭제되어 있음을 알 수 있다.

push와 pop은 뒤의 요소를 추가하고 삭제하는 기능이다.
뒤의 요소를 추가하고 삭제하는 기능이 있다면 필히 앞의 요소를 추가하고 삭제하는 기능도 있을 것이다.

.shift()

배열 앞의 요소를 삭제할 때 쓴다.

.unshift()

배열 앞의 요소를 추가할 때 쓰며 괄호 안에 추가할 요소를 입력한다.

배열 기초 메소드 최종 정리

뒤에 element 추가 : push
뒤에 element 삭제 : pop
앞의 element 추가 : unshift
앞의 element 삭제 : shift

3. 배열 요소 포함 여부 확인하기

.indexOf()

배열 안에 특정한 값을 존재하는지 확인할때 쓰며, 괄호안에 찾고자하는 요소를 쓴다.
결과값은 배열의 인덱스 값이 나온다.

ex)let words = ['Radagast', 'the', 'Brown'];
이라고 할 때,
만일 찾고자하는 값이 없으면 -1이 나온다.

존재 여부를 확인하고자 할때는
!== -1 을 입력하여 true가 나오면 존재하고, false가 나오면 존재하지 않음을 알 수 있다.
ex)
words.indexOf('Brown') !== -1 // true
words.indexOf('없는것') !== -1 // false

함수로 반환하면
function hasElememt(arr, element)
값은 true or false가 나온다.

.includes()

배열 안에 특정한 값을 존재여부를 확인할때 쓰며, 괄호안에 찾고자하는 요소를 쓴다.
결과값은 true of false가 나온다.

ex)let words = ['Radagast', 'the', 'Brown'];
이라고 할 때,
words.includes('Brown') // true
words.includes('없는값') // false

객체

1. 변수를 이용

ex) 회원 주소록을 만든다고 가정하자.
let userFirstName = 'Steve';
let userLastName = 'Lee';
let userEmail = 'steve@codestates.com';
let userCity = 'Seoul';
이라고 하면, 주소록에는 이름, 이메일, 사는 지역이 필요하다.

다른 사용자를 추가해보자.
let userFirstName = 'Steve';
let userLastName = 'Lee';
let userEmail = 'steve@codestates.com';
let userCity = 'Seoul';

let user2FirstName = 'Jason';
let user2LastName = 'Jeong';
let user2Email = 'jason@codestates.com';
let user2City = 'Busan';
매번 이런 식으로 여러 개의 변수를 선언하면 매우 번거롭고 불편하다.

2. 배열을 이용

이 때 배열을 써보자.
ex)
let user = [
'Steve';
'Lee';
'steve@codestates.com';
'Seoul';
];

let user2 = [
'Jason';
'Jeong';
'jason@codestates.com';
'Busan';
];
이때도 문제가 생긴다. 각 값이 하나의 변수로 묶여있긴 하지만, 이 경우에는 각 index가 어떤 정보를 갖고 있는지 미리 알고 있어야 할 뿐만 아니라, index로 접근할 경우 가독성도 떨어진다.

3. 객체를 이용

이럴 때 객체를 쓴다. 객체는 이러한 주소록에 적합한 자료 구조이다.

1. 객체는 중괄호(Curly Bracket)를 사용한다.

ex)
let user = {
firstName: 'Steve',
lastName: 'Lee',
email: 'steve@codestates.com',
city: 'Seoul'
};

2. 객체는 키와 값 쌍(key-value pair)로 이루어져 있다.

키(key) : 값(value)
키, 값 사이는 콜론(:)으로 구분한다.

ex)
let user = {
firstName: 'Steve',
lastName: 'Lee',
email: 'steve@codestates.com',
city: 'Seoul'
};

3. 키-값 쌍(key-value pair)은 쉼표(comma)로 구분해준다.

ex)
let user = {
firstName: 'Steve',
lastName: 'Lee',
email: 'steve@codestates.com',
city: 'Seoul'
};

이처럼 다양한 정보를 묶을 때는 객체를 사용하면 매우 편리하다.

객체의 값을 사용하는 방법

1. Dot notation

객체의 속성을 가져온다.

ex)
let user = {
firstName: 'Steve',
lastName: 'Lee',
email: 'steve@codestates.com',
city: 'Seoul'
};

user.firstName; // 'Steve'
user.city; // 'Seoul'

2. Bracket notation

대괄호를 이용하며, 대괄호 안에는 문자열 타입을 입력한다.

ex)
let user = {
firstName: 'Steve',
lastName: 'Lee',
email: 'steve@codestates.com',
city: 'Seoul'
};

user['firstName']; // 'Steve'
user['city']; // 'Seoul'

(연습문제)
let tweet = {
writer: 'stevelee',
createdAt: '2019-09-10 12:03:33',
content: '프리코스 재밌어요!'
};

stevelee라는 아이디를 가진 유저가 SNS에 새로운 글을 올렸다.
그가 작성한 글 "프리코스 재밌어요!"라는 내용을 bracket notation으로 어떻게 가져올 수 있을까?

tweet['content']; // '프리코스 재밌어요!'
tweet['content'] === tweet.content; // true

객체에 값을 추가하는 방법

dot/bracket notation을 이용해 값을 추가할 수 있다.

ex)
let tweet = {
writer: 'stevelee',
createdAt: '2019-09-10 12:03:33',
content: '프리코스 재밌어요!'
};

tweet['category'] = '잡담';
tweet.isPublic = true;
tweet.tags = ['#코드스테이츠', '#프리코스'];

객체에 값을 삭제하는 방법

delete 키워드를 이용해 삭제할 수 있다.

ex)
let tweet = {
writer: 'stevelee',
createdAt: '2019-09-10 12:03:33',
content: '프리코스 재밌어요!'
};

delete tweet.createAt;

객체에 값을 확인하는 방법

in 연산자를 이용해 해당하는 키가 있는지 확인할 수 있다.

ex)
let tweet = {
writer: 'stevelee',
createdAt: '2019-09-10 12:03:33',
content: '프리코스 재밌어요!'
};

'content' in tweet; // true
'updatedAt' in tweet; // false