배열&객체의 전반적인 개념

- 자바스크립트 배열, 객체

→ 대량의 데이터를 다루기에 적합하게 제작된 데이터 타입인 배열과 객체를 참조 타입(reference type) 데이터라고 한다.

→ 원시 타입(숫자, 문자열, boolean, undefined 등) 데이터와 다른 성격을 가집니다

→ 대량의 정보를 보관하고 관리

----------------------------------------------------------------------------------------------------------------

→ 배열 : 순서가 있는 값  /  배열에서 값은 element  /  순서는 index, index는 0부터 시작

→ 배열 선언 : let 배열명 = [원소, 원소, ...];  /  ‘[]’를 이용해서 배열 생성, 각각의 element는 ‘,’를 이용하여 구분한다.

→ 배열의 element를 조회할 경우 index를 이용한다 : 배열명[index값]; 

→ 배열명[index값] = 임의의 값;  /  해당 index에 임의의 값을 할당한다.

→ 배열의 크기를 넘어선 index값으로 배열 element를 조회할 경우 undefined가 조회되게 된다.

→ 2차원 배열 -> 배열명 = [ [0,0의 element, 0,1의 element] , 

        [1,0의 element , 1,1의 element]]

→ 2차원 배열인 경우 [ ]내부에 [ ]가 또 있음 -> 배열안에 배열이 있음

→ 만약 2차원 배열의 1번째 index값을 구한다면 [1,0의 element , 1,1의 element]

인 배열이 값으로 나옴  /  배열의 element가 배열인 경우이다.

→ 2차원 배열의 element를 접근할 경우 : 배열명[index1][index2] / 행렬표현

→ .(온점)을 이용해서 변수의 속성(property)에 접근할 수 있음

→ .(온점)을 이용해서 관련된 명령(method)을 사용할 수 있음

→ 배열의 길이 : length(속성)를 이용해서 알 수 있음  /  배열명.length = 배열 길이

→ 배열에 새로운 원소를 추가 : push()  /  배열명.push(입력 값);

/  입력한 값이 새로운 원소로 추가되며 가장 우측에 할당된다

→ 배열에 원소 제거 : pop()  /  배열명.pop();

/  가장 우측의 element가 자동으로 제거된다.

- 반복문과 배열을 같이 사용

→ 배열의 원소를 한번씩 출력하기 위해서는 index는 0 ~ 배열.length까지

→ 증감연산자 : 변수++ (1씩증가)

→ 변수는 초기화 필요 (undefined가 할당되어 계산이 안될수 있음)

→ typeof 배열명 -> object가 결과로 나옴(배열과 객체의 구분이 안된다)

→ Array.isArray(input) -> true,false로 나옴 : 배열일 경우에만 true

/  ‘[]’ 빈 배열도 true 

→ console.table(배열명) : index와 value가 한번에 보이면서 가독성이 좋게 출력됨(배열의 경우)

[추가, 제거]  → 이 메소드들은 원본 배열을 변화시킨다.

→ 배열명.push(추가할 element) : 가장 마지막에 새로 할당됨

/추가된 값만 return을한다.  /  추가되어서 확장된 배열을 반환하지 않는다(주의!)

→ 배열명.pop() : 가장 마지막 element가 제거한다. 

/  제거된 값만 return을한다.

→ 배열명.shift() : 가장 앞에 element가 제거된다(가장 좌측 element)

/  추가된 값만 return을한다.

→ 배열명.unshift(추가할 element) : 가장 앞에 새로 할당됨 (가장 좌측 element, index는 0) : unshift 가 리턴하는 값은 배열의 length 를 리턴/  추가되어서 확장된 배열을 반환하지 않는다(주의!)

[원소 포함 여부]

→ 배열명.indexOf(찾으려는 element) : 찾는 element의 index값 출력

/  만약 없는 element를 찾을 경우 index값으로 -1을 반환한다

/  만약 element가 있으면 해당 index값 반환, 없으면 -1반환

  /  배열명.indexOf(특정 element) !== -1  :  특정 값이 있는지 없는지 여부 확인

/  대소문자를 구분하기 때문에 정확히 구분해서 검사를 해야한다.

→ 배열명.includes(찾으려는 element) : 찾는 element가 배열에 있는 경우 true반환, 없는 경우 false반환

/ 단 브라우저 호환성에 의해서 includes는 internet explorer에서 사용할 수 없다(실행 안됨), 호환성 측면에서 indexOf가 좋음

 

→ 배열1.concat(배열2) -> [배열1원소,...,배열2원소] (배열 원소 끼리 합쳐짐)

/  [1, 2], [3, 4] -> [1, 2, 3, 4] 합쳐짐

 

→ slice() : 배열을 자르는 메소드(mdn참고) 

→ slice()를 사용할 경우 배열값을 그대로복사, 깊은 복사가 일어남

/  ex) let newArr = arr.slice(); 

/  이 경우 arr의 element를 그대로 가져오면서 주소값은 arr과 newArr이 서로 다르다.(깊은 복사가 일어남)

 

→ splice()

/  array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

/  array.splice(시작인덱스, 삭제할 갯수, 교체할 element);

/  삭제할 갯수가 0인 경우 추가만 된다.

/  교체할 element는 생략가능, 삭제할 갯수를 생략한 경우 시작인덱스 부터 배열의 끝까지 모든 element를 삭제한다.

→ 객체에서 key를 property라고 한다(key가 값의 의미를 의미한다)  

→ 객체에서 value로 key를 조회할 수는 없다.
→ typeof를 사용해서 자료의 type구분시 배열,객체,null모두 object로 구분됨

/  array는 Array.isArray()를 이용, null은 변수명 === null로 구분

/  primitive형의 자료형은 === 으로 구분가능

→ for (let element(아무거나 변수명을 사용할 수 있음) of 배열명,문자열 변수명) {... 내부에서 element로 배열내부의 요소/문자열을 접근할 수 있음,반복문}

→ ``(백틱)을 이용해서 출력할 경우 string으로 출력된다.

→ slice(시작인덱스) : 시작인덱스 ~ 배열 끝 인덱스까지 element복사

→ break, continue

/ break : 반복문이 수행되는 도중에 반복문 수행을 종료한다. 

 

→ join() : 배열의 원소들을 하나로 합치는 메소드  /  concat() : join()과 유사

 

- 참고사항

→ 배열[n] = 배열[n-1] + 배열[n-2];

/ 이 식은 n번째 index의 element에 값을 할당하는것(배열의 element에 값이 할당되는 과정이다. 여기서 또 push를 사용할 경우 2중으로 값이 들어가게 된다!) 

/  그냥 값을 저장하는 변수가 아니라 배열의 element를 나타냄

→ Math.max.apply(null,배열); -> 배열의 element중 최대값 반환

→  Math.min.apply(null,배열); -> 배열의 element중 최소값 반환

→  배열 join메소드 

→ join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

→ const elements = ['Fire', 'Air', 'Water'];

 

console.log(elements.join());

// expected output: "Fire,Air,Water"

 

console.log(elements.join(''));

// expected output: "FireAirWater"

 

console.log(elements.join('-'));

// expected output: "Fire-Air-Water"

→ arr.join([separator]) // 작성방식

 

→ 배열에서 최대값을 구하는 식

let maxNum = arr[0];

for(let i=0;i<arr.length;i++) {

   // 배열의 element중 maxNum보다 클 경우

   if(maxNum < arr[i]) {

     maxNum = arr[i];

   }

 }

 

→ null의 typeof값은 object로 뜬다  /  null구분시 ‘=== null’를 이용하여 구분한다.

→ 빈 배열 여부를 파악하는 것은 ‘배열명.length === 0’ 으로 구분

----------------------------------------------------------------------------------------------------------------

- 객체

→ 하나의 객체에 여러가지 정보가 저장됨

→ 서로 관계성이 없는 정보를 연관성이 있게 만든다

→ 만약 배열을 사용하여 여러정보를 저장활 경우 관계성을 가지고 있지만 각 index가 어떤 의미를 가지고 있는지 미리 알고 있어야 하고 가독성이 떨어진다

/ 각 정보가 무엇을 의미하는지 파악하기 어렵다

→ 객체를 통해 여러 정보를 연관성있게 만든다

→ 객체는 {}로 시작, key-value 쌍으로 여러개의 정보가 있으며 ‘,’를 이용하여 key-value쌍을 구별한다.  /  key는 변수명과 유사하다고 보면된다(key값에 따로 ‘ ‘를 붙이지 않는다.)

→ 객체의 값을 접근하여 사용하는 방법1 : ‘.’으로 객체의 속성을 가져옴(property)

→ 객체명.key값에서 key값은 지정되어 있음(조회할수 있는 key값이 동적으로 변할수 없음)

 

→ 객체에 값을 접근하여 사용하는 방법2: ‘[]’을 사용하여 객체의 속성을 가져옴

→ ‘[ ]’ 내부에는 key값을 string으로 작성(‘ ‘를 이용하여 작성)한다.

/  ex) 객체명[‘key값'] -> [ ], ‘ ‘를 이용하여 속성접근, key는 ‘’를 이용하여 string형태로 작성

→ 만약 ‘[ ]’내부에 ‘’로 key값을 적지않고 그냥 key값만 적는 경우 해당 key값으로 정의하는 것이 아니라 변수로 취급하여 해당 값이 정의된적이 없다고 오류가 발생한다.

/  ex) let tweet = {name : ‘tom’, age : 30, gender : ‘male’};

/  tweet[‘name’] === ‘tom’

/  tweet[name] -> 오류 발생  / name이라는 값을 key값이라고 생각하지 않고 변수로 생각하였기 때문에 해당 변수가 선언되어 있지 않는 경우 정의가 되어있지 않다고 하면서 오류발생

/  만약 name = ‘age’라고 변수가 선언되어 있는 경우 tweet[name] === tweet[‘age’]와 같은 의미를 가지게 된다(name이라는 변수의 값인 ‘age’가 key값으로 사용된다.

/  braket notation에서 [ ]내부에 값이 ‘ ‘이 있나 없나에 따라 큰차이를 보이기 때문에 반드시 주의해서 값을 사용할 것

/ [ ]내부에 변수명이 사용되는 경우는 key값을 동적으로 사용하려는 경우 변수명으로 사용한다(key값이 항상 변하는 경우)

/ ex) 객체명.변수값(x) -> ‘.’으로 객체의 속성을 접근하는 경우 ‘.’뒤에는 반드시 객체의 key값이어야 해당 value를 접근할 수 있다.

-> 만약 dot notation에서 key값 자리에 변수값으로 접근할 경우 undefined 출력

 

*** 객체명[‘key값'] === 객체명.key값, 객체명[변수명] !== 객체명[‘key값’]

객체명[변수명] !== 객체명.key값

→ [ ] 내부에 ‘ ‘를 안쓸경우 변수 취급

→ [ ]내부에 ‘ ‘를 쓸 경우 key값으로 취급

→ dot notation과 braket notation을 이용하여 객체에 새로운 key-value를 추가할 수 있다.

→ value에는 배열,객체등 여러가지 타입의 자료가 들어갈 수 있다.

→ delete 키워드를 이용하여 삭제가 가능(notation을 이용하여 존재하는 key-value삭제)

→ ‘key값' in 객체명  /  해당하는 key-value쌍이 있을경우 true, 없을경우 false 반환

 

- 추가사항

→ 배열에서 arr = [ ]인 경우 arr === [ ]의 결과는 false이다

→ 자바스크립트 상에서는 두 배열을 "주소가 다른 두 개의 빈 배열"이라고 생각하기 때문입니다.(두 배열의 주소가 다르다고 생각함, 자바스크립트에서 배열명이 같은 것은 같은 주소를 가지고 있을 경우에만 true를 반환한다)

→ 배열의 주소가 같을 경우 변동사항을 공유하기 때문에 반드시 주소가 같아야 같은 배열로 취급한다.

→ split 메소드는 전달인자로 들어가는 string을 기준으로 끊어 배열에 담아주고 그 배열을 리턴하는 메소드입니다

/  ex) let kimcoding = "010-1234-6767"

let codingArr = kimcoding.split("-")

console.log(codingArr) // ["010", "1234", "6767"]

→ splice는 배열을 특정 인덱스부터 일정 구간 만큼을 제거하고, 원하면 요소를 그 자리에 더 추가할 수 있음  /  기존 배열을 변경하는 메소드(mutable method)

→ slice는 원본 배열을 변경하지 않고 새로운 배열을 복사 혹은 지정 범위 만큼 "잘라서(slice)" 원하는 만큼 집어서 사용할 수 있습니다  /  배열명.slice(시작index,끝index)

→ function addPropertyAndValue(obj, property, value) {

   obj[property] = value;

}

/ obj[property] = value; 는 매개변수 property의 값을 key로 가지고, value는 매개변수 value의 값으로 가지는 속성이 할당(객체)

- for in : for( key in object) { 1번 : key(key값 조회) 2번 : object[key](value값 조회) }

→ 여기서 key는 변수기 때문에 꼭 key 라고 적어주지 않고 props 혹은 아무거나 적어주어도 됩니다.

→ for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다

→ const object = { a: 1, b: 2, c: 3 };

 

for (const property in object) {

  console.log(`${property}: ${object[property]}`);

}

 

// expected output:

// "a: 1"

// "b: 2"

// "c: 3"

→ for(key값을 지칭하는 변수명 in 객체명) {

1) key값을 지칭하는 변수명만 사용 : 객체내 모든 key값을 반복수행하면서 출력

2) 객체명[key값을 지칭하는 변수명] : 객체내 존재하는 key값에 해당하는 value값을 모두 출력

}

/  ex)

var obj = {a: 1, b: 2, c: 3};

 

for (const prop in obj) {

  console.log(`obj.${prop} = ${obj[prop]}`);

}

 

// Output:

// "obj.a = 1"

// "obj.b = 2"

// "obj.c = 3"

 

- for of : for of는 string과 array, 유사배열 등에서 사용이 가능한 반복문입니다. 

ex) const array1 = ['a', 'b', 'c'];

 

for (const element of array1) {

   console.log(element);

}

 

// expected output: "a"

// expected output: "b"

// expected output: "c"

→ function extend(obj1, obj2) {

   for (let key in obj2) {

    if (!(key in obj1)) {

      obj1[key] = obj2[key];

    }

  }

}

→ 여기서 obj2인 객체를 for in 반복문을 이용하여 obj2객체의 모든 key값에 접근하여 만약 해당 key값이 obj1의 객체에 없는 경우 해당 키값을 obj1객체에 새로 선언하고 obj2의 해당 key값에 해당하는 value값을 할당해준다.

 

→ 배열내부에서 최대값을 구하는 경우 최대값 변수를 선언시 배열의 0번째 값을 초기값으로 할당하지 않고 만약 0으로 할당하는 경우 배열의 요소들이 전부 음수일 경우 0이 반환되기 때문에 반드시 배열의 0번째 값을 초기값으로 설정한다.

 

→ Object.keys(obj).length : 객체 내부에 있는 속성의 개수를 반환

/  속성 개수를 알고 싶은 객체를 obj자리에 대입한다.

 

→ reverse() 메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다.

/  a.reverse()

→ join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

/  arr.join([separator])  

/  arr.join(‘’) -> 공백없이 배열의 모든 element를 합쳐서 1개의 문자열을 반환