[JS] 배열과 객체

14 Jan 2023 in Study on Study, JavaScript

배열
객체

배열

배열만들기

배열은 순서가 있는 값이다.
순서는 ==인덱스==라고 부르며 ==1이 아닌 0부터== 번호를 매긴다.

각각의 엘리먼트는 쉼포로 구분하고, 대괄호를 이용해 배열을 만든다.
let order = [a, b, c, d, e]
order라는 배열의 0번째 인덱스 값은 a이다.

배열의 값에 접근하기

값은 인덱스를 이용해 접근한다.

위의 예시를 참고하여 order라는 배열의 0번째 인덱스를 ==조회==하려면
order[0] //a

배열의 값을 변경하려면

order[3] = 321;
console.log(order) // [a, b, c, 321, e]

배열 활용하기

길이 알아내기 (.length)
order길이 알아내려면 => ==order.length== //5

(.(dot)을 이용해 변수가 갖고 있는 속성(property)에 접근할 수 있다.)

요소 추가하고 삭제하기 (.push, .pop, .unshift, .shift)
1. order 맨 뒤에 요소 추가하기(.push)
```
 order.push(3) // [a, b, c, 321, e, 3]
```
2. order 맨 뒤에 요소 삭제하기(.pop)
```
 order.pop() // [a, b, c, 321, e]
```
3. order 맨 앞에 요소 추가하기(.unshift)
```
 order.unshift(1) // [1, a, b, c, 321, e]
```
4. order 맨 앞에 요소 삭제하기(.shift)
```
 order.shift() // [a, b, c, 321, e]
```

배열 + 반복문 = 배열 반복하기

배열의 요소를 한 번씩 출력하자

let myNum = [5, 4, 3, 2, 1]

//배열 myNum의 n번째 인덱스를 출력하자 === 배열의 요소를 한번씩 모두 출력하자.
//1. n은 0부터 시작한다
//2. n을 배열의 길이보다 작을 때까지 반복한다 (index가 0부터이므로)
//3. n은 반복문이 실행될 때마다 1씩 증가한다.

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

그 외 배열 메서드들

Array.isArray() 이 값이 배열인지 아닌지 판별할 수 있다.

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

indexOf() 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 리턴한다.
존재하지 않으면 -1을 리턴한다.

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// Expected output: 1

// Start from index 2
console.log(beasts.indexOf('bison', 2));
// Expected output: 4

console.log(beasts.indexOf('giraffe'));
// Expected output: -1

includes() 배열이 특정 요소를 포함하고 있는지 판별한다.

  const array1 = [1, 2, 3];

  console.log(array1.includes(2));
  // Expected output: true

  const pets = ['cat', 'dog', 'bat'];

  console.log(pets.includes('cat'));
  // Expected output: true

  console.log(pets.includes('at'));
  // Expected output: false

객체

키와 값으로 구성된 프로퍼티들의 집합.
원시타입을 제외한 나머지 값(함수, 배열, 정규표현식 등)은 모두 객체.

객체만들기

객체 리터럴

가장 일반적인 객체 생성 방식.
중괄호를 사용하여 객체를 생성하는데 {}내에 1개 이상의 프로퍼티를 작성하면 해당 프로퍼티가 추기된 객체를 생성할 수 있다.
{}내에 아무 것도 작성하지 않으면 빈 객체가 생성된다.

  let me = {};

  let you = {
    name: 'Lee',
    gender: 'male',
    hi: function(){
      console.log('Hi!, How are you ' + this.name)
    }
  }

Object 생성자 함수

new연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성할 수 있다.
빈 객체 생성 이후 프로퍼티 또는 메소드를 추가해 객체를 완성하는 방법. (사용빈도수는 낮다.)

빈 객체를 만든다
객체가 소유하고 있지 않은 프로퍼티 키에 값을 할당한다
이미 존재하는 프로퍼티 키에 새로운 값을 할당하면 프로퍼티 값은 할당한 값으로 변경된다. (덮어쓰기)

생성자 함수란 new키워드와 함께 객체를 생성하고 초기화하는 함수.
생성자 함수를 통해 생성된 객체를 인스턴스라고 함.
생성자 함수의 이름은 파스칼 케이스를 사용하는 것이 일반적이다 (구분하기 위해서)

  let person = new Object();

  person.name = 'Jaw';
  person.gender = 'female';
  person.hi = function(){
    console.log('say it ' + this.name);
  }

  console.log(person)
  //{name: 'Jaw', gender: 'female', hi: f} 
  //f -> function

생성자 함수

위의 방식들은 프로퍼티 값만 다른 여러 개의객체를 생성할 때 불편하다.
동일한 프로퍼티를 갖는 객체임에도 매번 같은 프로퍼티를 작성해야하기 때문이다. (노가다)
생성자 함수를 사용하면 객체 생성 템플릿마냥 뚝딱 찍어낼 수 있다.

  function Person(name, gender){
    this.name = name;
    this.gender = gender;
    this.hi = function(){
      console.log('say it ' + this.name);
    };
  }

  let person1 = ('Jaw', 'female');
  let person2 = ('Yang', 'male');

생성자 함수 이름은 일반적으로 대문자로 시작한다.
프로퍼티 또는 메소드명 앞에 작성한 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
this에 연결(바인딩)되어 있는 프로퍼티와 메소드는 외부에서 참조 가능하다. (public)
생성자 함수 내에서 선언된 일반 변수는 외부에서 참조 불가하다. (private)

객체의 키와 값에 접근하기

프로퍼티 키는 일반적으로 문자열(빈 문자열 포함)을 지정함. (따옴표 사용함)
(그 외 값을 지정하면 암묵적으로 타입변환되어 문자열이 된다.)
(자바스크립트에 사용 가능한 이름인 경우 따옴표 생략 가능 그 외에는 따옴표 붙이기)
(표현식을 키로 사용하려면 대괄호로 묶어야 함.)
(예약어는 쓰지 프로퍼티 키로 쓰지 말자.)
프로퍼티 값은 모든 값과 표현식이 올 수 있으며 함수인 경우 메소드라 한다.

키 (in 연산자 사용해 확인하기, keys 사용해 접근하기)

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

  //person이라는 객체가 있다고 치고

  'content' in person; //트루나 폴스 하나 중에 나올 것임

.keys()

  //person이라는 객체가 있다고 치고

  Object.keys(person)
  // (4) ['1', 'first-name', 'last-name', 'gender']

  let name = Object.keys(person)[1] // first-name

값 (마침표(.), 대괄호([])표기법, .values())

  let person = {
    'first-name': 'bean',
    'last-name': 'Jaws',
    gender: 'female',
    1: 10
  }

  console.log(person.first-name); //NaN: undefined-undefined
  console.log(person[first-name]); //ReferenceError: first is not defined
  console.log(person['first-name']); //'bean'

  console.log(person.gender); //'female'
  console.log(person[gender]);   // ReferenceError: gender is not defined
  console.log(person['gender']); // 'female'

  console.log(person['1']); // 10
  console.log(person[1]);   // 10 : person[1] -> person['1']
  console.log(person.1);  //SyntaxError

프로퍼티키 : 유효한 자바스크립트 이름 && 예약어가 아닌 경우 => 마침표, 대괄호 표기법 모두 이용 가능
프로퍼티키 : 유효한 자바스크립트 이름이 아니거나 예약어라면 => 대괄호 표기법 이용 (프로퍼티 키는 반드시 문자열이어야 함)
객체에 존재하지 않는 프로퍼티를 참조하면 undefined
.values()

  Object.values(person)
  // (4) ['1', 'first-name', 'last-name', 'gender']

객체의 키와 값을 변경하려면

  let person = {
    name: 'lee',
    gender: 'male',
    age: 49,
  }

객체가 소유하고 있는 프로퍼티에 새로운 값 할당하기
```
  person.name = 'Jaws';
```
객체가 소유하고 있지 않은 프로퍼티 키에 값 할당하기 (객체에 추가하기)
```
  person.hobby = 'sleep'  
```
프로퍼티를 삭제하려면 - delete연산자 사용
```
  delete.person.hobby;
```

배열