[JS] 배열(Array)

데이터 구조 → array(배열)

const friend1 = "Michael";
const friend2 = "Steve";
const friend3 = "Peter";

친구 3명을 적기 위해 변수를 3번 적었다. 만일 친구 10명을 적기 원하면 변수를 총 10변을 적어야 할까? 그렇다.

그렇다면 이것을 더욱 간단하게 할 수 없을까? 간단하게 작성할 수 있다. 

어떻게?  이 모든 값을 한데 묶어서 더 큰 컨테이너에 넣는것이다. 

위와 같은 과정을 하기 위해 JS에는 데이터 구조가 있는 거다.

 

Array(배열)은 데이터 구조이다. Array는 큰 컨테이너같다. 거기에 변수를 입력했다가 나중에 참조할 수 있다.

과연 중요할까? 중요하다. 프로그래밍은 대부분의 시간 데이터 위주이니까 저장하고 처리하는 어딘가에서 데이터를 받아 다시 돌려주는 것이다. 그 데이터는 어딘가로 가야한다. 어딘가에 저장해야한다. 이를 위해 배열처럼 데이터 구조를 이용한다. 

 

★ JS에서 가장 중요한 데이터 구조는 배열과 개체이다.

 

const friends = ["Michael", "Steve", "Peter"];

1.  const friends

변수를 생성한다.

2. ["Michael", "Steve", "Peter"]

대괄호를 이용해 새 배열을 생성한다. 그런 다음 쉼표로 나뉘어 다른 값들을 넣는다. 

※ 쉼표가 문자열 밖에 있어야 한다. → "Michael" , 

"Michael" → 이건 1개의 문자열이다. 위의 코드에서 보면 총 3개의 문자열이 있다. 

 

const friends = ["Michael", "Steve", "Peter"];
console.log(friends);

기본적으로 작성한 코드대로 출력되었다. 이것은 배열의 기본이다. 

---

 

또 다른 방법이 있다. 연도 배열의 원한다고 가정을 해보겠다. 

const years = new Array(1991, 1984, 2008, 2020);

대괄호 대신 new Araay를 작성한다. 그 뒤 소괄호를 작성한다.  

---

기본적으로 요소들을 배열에 넣는 방법

console.log(friends[0]);
console.log(friends[2]);

배열은 0에 기반을 둔다. 첫번째 요소가 요소 번호 0이란 뜻이다. 

0번은 Michael, 1번은 Steve, 2번은 Peter

---

배열 안에 있는 요소의 실제 개수도 알 수 있다.

console.log(friends.length);

friends.length 이다. .length는 속성이라고 한다. 

.length

배열내의 요소의 속성을 알려준다. 

자동적으로 배열의 마지막 요소를 얻을 수 있다. 

즉 배열 안에 몇개의 요소가 있는지 세지 않아도 된다. 

 

배열에서 마지막 요소의 인덱스를 얻으려면? 즉 peter를 얻고 싶다. (🔹 배열에서 요소를 불러오는 걸 기억해야 한다.)

console.log(friends[friend.length - 1]);

friends 그리고 대괄호를 적어야 한다. friends[ ] 그 안에 friends.length를 적는다.

friend.length는 3개이다. 거기서 -1을 빼야한다. 왜냐하면 peter는 3이 아니라 2를 나타내기 때문이다.

 

그렇다면 만일 console.log(friends[friends.length - 1])이 아닌  console.log(friends.length - 1)을 적고 출력하면 값이 어떻게 될까? 값은 2가 나온다.

---

console.log(friends[0]);
console.log(friends[2]);

friends[2]에서 대괄호 구문은 배열에서 요소를 검색할 뿐 아니라 배열에서 요소를 추가하도록 바꿀 수 있다. 

 

어떤 이유에서 인지 peter가 아닌 다른 친구로 peter를 대체하고 싶다. 같은 방식으로 array를 변경 할 수 있다.

friends[2] = "Jay";
console.log(friends);
console.log(friends[2]);

friends[2] = "Jay"를 입력하니 2번위치에서 Jay로 바뀐것을 알 수 있다. 즉 배열이 바뀌었다.  

 

※ 변수는 변경할 수 없다. 

 

위에서 friends를 const로 선언했다. 하지만 array의 한 요소는 peter에서 jay로 바뀌었다. 뭔가 이상하다..

변수는 변경할 수 없다. 이 말의 의미는 원초적인 값만 불변한다는 뜻이다. 하지만 배열은 원초적인 값이 아니다. 언제든 변경할 수 있다. 변형을 줄 수 있다.

 

WHY? JS는 메모리에 저장하는 방식이기때문이다. 

 

변경을 통해 선언했지만 배열은 변경할 수 있다. 전체 배열을 대체할 수는 없다. 

// 전체 배열을 대체할 수 없다. 
friends = ["Bob, Alice"];

---

동시에 여러 유형의 값을 모두 담을 수 있는 Array

const jonas = ["Jonas", "Schmedtman", 2037 - 1991];

성, 이름, 나이 순으로 배열을 해봤다. JS는 각 위치에서 식을 기대한다. 2037 - 1991은 두번째 위치에 저장될 값이다. 변수에도 적용된다. 

const fristName = "Jonas";
const jonas = [fristName, "Schmedtman", 2037 - 1991, "teacher", friends];

● Jonas문자 그대로 대신에 변수에 값을 저장했다. 그러면 이제 firstName이 jonas를 대체한다.

● Jonas와 관련된 모든 데이터가 하나의 편리한 데이터 구조에 있다. 각각의 데이터 포인트에 대해 하나의 변수를 만들 필요가 없어졌다.

console.log(jonas);

 

 

 

 

 

---

const calcAge = function (birthYear) {
  return 2037 - birthYear;
};

const years = [1990, 1967, 2002, 2010, 2018];

console.log(calcAge(years));

calcAge(yeaers)를 입력하면 값이 출력이 안된다.

return 2037 - brithYear은 단일 값을 예상하기 때문이다. 

값을 실행했더니 NaN이 나왔다.

 

 

 years의 배열은 기본적으로 문자열이다. + 10을 해도 아무 의미가 없다. - 10역시 숫자는 안나온다. 이를 통해 배열로는 연산을 할 수 없다.

 

 

 

  첫번째, 두번째, 마지막 배열 요소의 나이를 계산하고 싶다고 가정해보겠다. 

const calcAge = function (birthYear) {
  return 2037 - birthYear;
};

const years = [1990, 1967, 2002, 2010, 2018];

const age1 = calcAge(years[0]);
const age2 = calcAge(years[1]);
const age3 = calcAge(years[years.length - 1]);

변수에 결과를 저장하기 이해 console.log는 지웠다. 

이변엔 배열을 이용해 값 출력하기

const fristName = "Jonas";
const jonas = [fristName, "Schmedtman", 2037 - 1991, "teacher", friends];
console.log(jonas);

//Exercise
const calcAge = function (birthYear) {
  return 2037 - birthYear;
};

const years = [1990, 1967, 2002, 2010, 2018];

const age1 = calcAge(years[0]);
const age2 = calcAge(years[1]);
const age3 = calcAge(years[years.length - 1]);

console.log(age1, age2, age3);

const ages = [
  calcAge(years[0]),
  calcAge(years[1]),
  calcAge(years[years.length - 1]),
];
console.log(ages);

배열 위치는 모두 식이 있어야 한다. (→ 값을 창출한다.) 

2번째 줄의 2037 - 1991의 값을 calcAge(years[0])의 위치로 간단하게 입력할 수 있다. 그럼 JS가 값을 계산해 배열 안에 둘것이다. 기본적으로 함수 호출을 배열에 배치할 수 있다. 

const ages = [
  calcAge(years[0]),
  calcAge(years[1]),
  calcAge(years[years.length - 1]),
];

 

그래서 코드를 위에와 같이 적었다. 그러면 결과가 위의 오른쪽 사진처럼 출력된다.