[한입챌린지] 4일차 - JS 객체, 배열, 단락평가

 

객체

---

원시 타입이 아닌 객체 타입이며, 여러가지 값을 동시에 저장할 수 있는 자료형을 의미한다.

객체를 이용하면 현실 세계에 존재하는 어떤 삼루이나 개념을 표현하기 용이함

객체 자료형

 

객체의 생성과 프로퍼티

- JavaScript에서는 객체를 두 가지 방식으로 생성할 수 있다.

- 첫번째 방법은 객체 생성자라고 불리는 new Object() 내장함수를 이용하는 방식이고, 두번째 방법은 빈 중괄호를 하나 열어서 객체를 생성해주는 객체 리터럴 방식이다. 두가지 방식 모두 동일한 객체를 생성한다.

객체 리터럴 방식이 훨씬 더 간겨하기 때문에 대부분은 이 방식을 사용한다.

- 객체를 작성하는 방법은 key-value 쌍을 콤마(,)로 구분해서 중괄호 안에 작성한다. 이때 key-value 쌍들을 객체의 프로퍼티라고 부르며, 프로퍼티는 키의 이름으로 불리고 접근할 수 있다.

- 프로퍼티의 개수는 제한이 없어 자유롭게 추가할 수 있며, value에 들어올 수 있는 자료형의 타입도 제한이 없다. 하지만 프로퍼티의 key의 경우에는 문자열이나 숫자만 사용할 수 있다.

- 객체의 key 이름을 작성할 때는 문자열에 따옴표를 붙이지 않아도 된다. 예외적으로 띄어쓰기가 포함된 문자열을 키로 사용하고자 하는 경우에는 예외적으로 따옴표로 감싸주어야 한다.

// 1. 객체 생성
let obj1 = new Object(); // 객체 생성자
let obj2 = {}; // 객체 리터럴 (대부분 사용)

// 2. 객체 프로퍼티 (객체 속성)
let person = {
    name: "홍길동",      // name 프로퍼티
    age: 32,             // age 프로퍼티
    hobby: "복싱",  	 // hobby 프로퍼티
    job: "FE Developer", // job 프로퍼티
    extra: {},           // extra 프로퍼티
    10: 20,              // 10 프로퍼티
    "like cat": true,    // like cat 프로퍼티
};

 

 

객체 프로퍼티를 다루는 방법

 

(1) 특정 프로퍼티에 접근 (점 표기법, 괄호 표기법)

- 점 표기법이란 객체 이름 뒤에 점을 찍은 뒤 접근하는 프로퍼티의 키를 적어주는 방식이다.

- 아래 코드를 VSCode에서 넣고 실행을 시킬 때 name 변수에 취소 라인이 그어질 수 있다. 이는 현재 공부하고 있는 내용과 관계 없는 VSCode의 기본 기능인 타입스크립트 컴파일러의 경고사항으로 무시해도 된다.

- 점 표기법을 이용하면 객체에서 특정 프로퍼티의 값을 꺼내올 수 있다.

- 객체의 없는 프로퍼티 값을 꺼내오려고 시도하면 Error는 발생하지 않고 대신에 undefined가 반환된다.

- 괄호 표기법은 객체 이름 뒤에 대괄호를 쓰고, 대괄호 안에 따옴표로 감싼 문자열로 프로퍼티 키를 써준다.

- 괄호 표기법은 접근하고자 하는 프로퍼티의 키를 문자열로 명시하여 프로퍼티의 값을 꺼내올 수 있다.

- 주의할 점은 프로퍼티의 키를 꼭 쌍 따옴표와 함께 문자열로 작성해야 한다. 쌍따옴표 없이 그냥 쓰면 JavaScript 엔진은 변수로 인식하게 되고 오류가 발생한다. 프로퍼티의 키를 저장한 변수를 대괄호 안에 써준다면 문제 없이 프로퍼티에 접근하여 값을 가져올 수 있다.

- 동적으로 프로퍼티를 변화시키며 값을 꺼내와야 한다면 괄호 표기법을 이용하는 것이 좋다. 그렇지 않다면 문법이 훨씬 간결한 점 표기법을 이용하는 것이 좋다.

// 3. 객체 프로퍼티를 다루는 방법
// 3.1 특정 프로퍼티에 접근 (점 표기법, 괄호 표기법)
let name = person.name;
console.log(name); // 홍길동
let age = person["age2"];
console.log(age); // undefined

let property = "hobby";
let hobby = person[property];
console.log(hobby); // 복싱

 

(2) 새로운 프로퍼티를 추가하는 방법

- 점 표기법을 사용하는 경우, 객체명 뒤에 점표기법으로 새로운 프로퍼티를 추가하고 값을 할당하면 된다.

- 괄호표기법의 경우에도 괄호 안에 새로운 프로퍼티 명을 쌍따옴표로 감싸서 넣어주고, 없던 프로퍼티의 값을 할당해주면 된다.

// 3.2 새로운 프로퍼티를 추가하는 방법
person.job = "FE Developer";
person["favoriteFood"] = "떡볶이";

 

(3) 프로퍼티를 수정하는 방법

- 점 표기법으로 person.job 프로퍼티를 수정할 거라면, 할당할 값만 변경해서 재할당해주면 된다.

- 괄호 표기법도 똑같이, 괄호안에 수정하고자 하는 프로퍼티의 문자열을 써주고 재할당해준다.

- 추가나 수정이나 거의 비슷한 방식으로 할 수 있다.

// 3.2 프로퍼티를 수정하는 방법 
person.job = "Educator";
person['favoriteFood'] = "초콜릿";
console.log(person);

 

(4) 프로퍼티를 삭제하는 방법

- 프로퍼티를 삭제하는 방법은 delete라는 특별한 연산자를 사용한다. delete 연산자를 쓰고 삭제하고자하는 프로퍼티를 써주면 된다.

- delete 연산자 뒤에는 삭제하고자 하는 프로퍼티는 점 표기법 또는 괄호 표기법 모두 사용할 수 있다.

// 3.4 프로퍼티를 삭제하는 방법 (delete 연산자)
delete person.job;
delete person["favoriteFood"];
console.log(person); // person 객체

 

(5) 프로퍼티의 존재 유무를 확인하는 방법

- 객체에서 어떤 프로퍼티의 존재 유무를 확인할 때에는 in 연산자를 사용한다.

- in 연산자는 왼쪽에 문자열이 오른쪽에 있는 객체 안에 존재하는 프로퍼티인지 여부를 boolean 타입으로 반환한다.

- 그렇기 때문에 in 연산자의 결과값은 true 또는 false가 반환된다.

- in 연산자를 활용하면 특정 객체에 특정 프로퍼티가 존재하는지 그 유무를 확인할 수 있다.

// 3.5 프로퍼티의 존재 유무를 확인하는 방법 (in 연산자)
let result1 = "name" in person;
let result2 = "cat" in person;
console.log(result1); // true
console.log(result2); // false

 

객체 심화

---

상수 객체

- 상수 객체란 말 그대로 상수에 저장된 객체를 의미한다.

- 앞서 변수와 상수 파트에서 상수를 선언하게 되면 저장된 값을 다시는 바꿀 수 없다고 배웠다.

- 그렇기 때문에 상수로 선언한 객체에 또 다른 객체를 생성해서 할당하는 건 당연히 오류가 발생하게 된다.

- 그런데 상수에 객체를 보관한다고 하더라도 프로퍼티를 추가/수정/삭제하는 조작은 얼마든지 가능하다.

- 상수 객체의 추가/수정/삭제가 가능한 이유는 다음과 같다.

   > 상수란 기본적으로 새로운 값을 할당하지 못하는 변수를 말한다.

   > 상수에 아에 새로운 '123' 같은 값을 재할당하면 오류가 발생한다.

   > 기존 저장되어 있는 객체 값의 프로퍼티를 수정하는 것은 아무런 문제가 되지 않는다.

// 1. 상수 객체
const animal = {
    type: "고양이",
    name: "나비",
    color: "black",
};

animal.age = 2; // 추가
animal.name = "까망이"; // 수정
delete animal.color; // 삭제

console.log(animal);

 

메서드

- 메서드라는 건 객체 프로퍼티들 중에 값이 함수인 프로퍼티를 말한다.

- 메서드는 함수이기 때문에 호출도 가능하다.

- 메서드는 익명 함수와 화살표 함수의 형태로 그리고 더 축약된 형태로도 메서드 선언을 할 수 있다.

- 메서드들은 어떤 선언이 되든 점 표기법이나 괄호 표기법을 이용해서 호출을 할 수 있다.

- 객체에 함수가 아닌 프로퍼티들이 객체의 정보를 가지고 있고, 함수 프로퍼티들은 메서드로써 객체의 동작을 정의한다.

// 2. 메서드
const person = {
    name: "홍길동",
    // 메서드
    // sayHi: function () { // 익명함수 형태
    //     console.log("안녕!");
    // },
    // sayHi: () => { // 화살표 함수 형태
    //     console.log("안녕!");
    // },
    sayHi() { // 단축 형태. (메서드 선언)
        console.log("안녕!");
    },
};

person.sayHi(); // 안녕!
person["sayHi"](); // 안녕!

배열 (Array)

---

배열의 생성

- 여러개의 값을 순차적으로 담을 수 있는 자료형이다.

- 객체와의 차이점은 순차적으로 값을 저장할 수 있다.

- 배열을 생성하는 방식은 두 가지 방식이 있다. 하나는 배열 생성자 new Array() 내장함수를 사용하는 것이고, 다른 방법은 배열 리터럴을 이용해서 생성하는 방식이다. 두 가지 모두 동일한 배열을 생성하기 때문에 좀 더 문법이 간결한 배열 리터럴 방식을 많이 사용한다.

- 배열을 생성하면서 값을 동시에 넣고 싶다면, 대괄호 안에 콤마로 구분해서 값을 넣어주면 된다.

- 배열 안에는 어떤 타입의 값이든 자유롭게 다 넣을 수 있다. boolean, string, null, undefined, 화살표 함수든 객체든 아니면 새로운 배열이든 저장할 수 있다. 그리고 길이의 한계도 없다. 얼마든지 저장하고 싶은 데이터를 순차적으로 보관할 수 있다.

JavaScript 최대 배열의 최대 길이는?
: 2^32 - 1
허용되는 최대 배열 길이는 플랫폼, 브라우저 및 브라우저 버전에 따라 다릅니다. Array의 경우 최대 길이는 2^32-1입니다. ArrayBuffer의 경우 32비트 시스템에서 최대값은 2^31-1(2GiB-1)입니다. Firefox 버전 89부터 64비트 시스템에서 ArrayBuffer의 최대값은 2^33(8GiB)입니다.
- 출처: mdn Web Docs

 

// 1. 배열 생성
let arrA = new Array(); // 배열 생성자
let arrB = []; // 배열 리터럴 (대부분 사용)

let arrC = [ // 어떤 타입의 값이든 자유롭게 다 넣을 수 있다.
    1, 2, 3,
    true,
    "hello",
    null,
    undefined,
    () => {},
    {},
    [],
];

 

배열 요소의 접근

- 배열이라는 자료형은 순서대로 값을 저장하기 때문에 각각의 원소에 번호로 접근이 가능하다.

- 주의해야 할 점은 배열의 원소 번호는 0부터 시작한다.

- 배열의 몇 번째 원소인지 의미하는 번호는 특별히 인덱스(index)라고 표현한다.

- 인덱스를 이용해서 특정 원소의 값을 수정하는 것도 가능하다.

- 객체처럼 delete 연산자는 없지만, 배열에는 pop(), shift(), splice(), filter() 등 다양한 메서드를 활용해서 배열의 원소를 제거할 수 있다. (참고자료)

- 아래 코드에서는 특정 인덱스의 요소를 제거하는 splice() 메서드 사용 예시를 볼 수 있다. splice는 3 개 이상의 인수를 받는데 순서대로 시작 인덱스, 제거할 요소의 수, 제거한 요소 대신 추가할 요소를 받을 수 있습니다. 이때 제거한 요소 대신 추가할 요소로 아무것도 지정하지 않으면 splice()는 단지 요소를 제거하기만 한다.

// 2. 배열 요소 접근
let item1 = arrC[0];
let item2 = arrC[1];

arrC[0] = "bye bye";
console.log(arrC);
arrC.splice(1, 1); // 인덱스 1부터, 1개 원소 제거
console.log(arrC);
arrC.splice(1, 1, "change element"); // 인덱스 1부터, 1개 원소 제거 후 "change element" 추가
console.log(arrC);

 

 

 

출처

---

(강의) 한 입 크기로 잘라 먹는 리액트