[자바스크립트] 가장 중요한 자바스크립트 객체 생성과 조작, JSON, 메서드 개념과 사용법

 

 

 

 

🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기

---

 

 

배열 reduce() 함수 사용법에 대해 알아보기

https://cometruedream.tistory.com/259

[자바스크립트] 배열(array) filter 함수의 개념및 사용법

 

배열 reduce() 함수 사용법에 대해 알아보기

https://cometruedream.tistory.com/256

[자바스크립트] 배열(array) reduce 함수의 개념및 활용도 높은 사용법

 

 

배열 join() 함수 사용법에 대해 알아보기

https://cometruedream.tistory.com/254

[자바스크립트] 배열(array)을 유용하게 활용할 수 있는 join 함수 개념 및 사용법

 

 

배열 map(), forEach() 인기 있는 메서드 사용법에 대해 알아보기

https://cometruedream.tistory.com/253

[자바스크립트] 배열(array)을 처리하는 인기있는 메소드 map(), forEach() 개념과 차이점

 

 

활용가치가 좋은 every(), some() 함수 사용법에 대해 알아보기

https://cometruedream.tistory.com/250

[자바스크립트] 활용가치가 좋은 내장함수와 every(), some() 함수의 개념 및 활용법

 

 

🤷‍♂️ 자바스크립트 객체란?

---

자바스크립트는 객체 지향 프로그래밍 언어입니다.

객체 지향 말 그대로 객체를 사용하여 데이터를 저장, 조회, 수정, 삭제의 코드를 구성합니다.

객체또는 object라고도 부릅니다. 객체는 다른 데이터 유형과 달리 동적으로 속성을 추가, 삭제, 수정을 할 수 있습니다.

자바스크립트 전문성을 높이기 위해서 객체의 개념과 사용방법에 대해 알아보겠습니다.

 

자바스크립트 객체는 무엇인가?

💡 자바스크립트 객체는 데이터를 저장하고 데이터를 사용하는 방법을 모두 포함하는 데이터 유형입니다. 객체는 {}로 표시되며 객체는 속성이라고 하는 변수와 함수가 포함됩니다. 속성은 객체의 상태를 저장하고 함수는 객체의 동작을 결정합니다.

 

 

🤷‍♂️ 객체(object)를 생성하는 방법?

---

자바스크립트 객체를 생성하는 다양한 방법들이 있습니다.

다음은 객체를 만드는 방법 중 몇 가지 예시입니다.

 

리터럴 표기법(Literal Notation)

const person = {
    firstName: "국현",
    lastName: "유",
    age: 28,
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}

 

객체 리터럴 방식은 자바스크립트의 유연함과 강력함을 대표하는 객체 생성 방식이다.

객채를 생성하기 위해서 클래스를 정의하거나 인스턴스를 선언하지 않고도 쉽게 객체를 생성할 수 있습니다.

 

생성자 함수(Constructor Function)

function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.fullName = function() {
        return this.firstName + " " + this.lastName;
    }
}

const person = new Person("국현", "유", 28);

 

 

🤷‍♂️ 객체(object)를 접근하는 방법?

---

자바스크립트에서 객체의 속성에 접근하는 다양한 방법이 존재합니다.

객체의 속성에는 점(dot)과 대괄호(bracket)를 사용하여 접근할 수 있습니다.

 

점(dot) 객체 접근법

const person = {
    firstName: "국현",
    lastName: "유",
    age: 32,
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}

console.log(person.firstName); // 결과값: 국현

 

 

대괄호(bracket) 객체 접근법

const person = {
 firstName: "국현",
    lastName: "유",
    age: 32,
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}

console.log(person["firstName"]); // 결과값: 국현

 

대표적으로 사용하는 점(dot)과 대괄호(bracket) 활용해서 객체의 속성에 접근하는 방법을 알아보았습니다.

 

🤷‍♂️ 객체(object) 다루기?

---

자바스크립트에서 객체를 다루는 여러가지 방법이 있습니다.

객체의 값을 변경하고 새로운 속성을 추가하는 방법을 알아보겠습니다.

 

 

공부하면 좋은 immer를 사용해서 불변성을 지켜야하는 이유와 얕은 복사의 개념

https://cometruedream.tistory.com/223

immer를 사용해서 불변성을 지켜야하는 이유와 얕은 복사의 개념

 

 

객체 수정하는 방법

const person = {
    firstName: "국현",
    lastName: "유",
    age: 32,
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}

person.firstName = "장현";
person.age = 29;

console.log(person.firstName) //결과값: 장현

 

 

 

객체 추가하는 방법

const person = {
    firstName: "국현",
    lastName: "유",
    age: 32,
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}

pserson.area = '서울'

console.log(pserson.area) //결과값: 서울

 

 

객체 삭제하는 방법

const person = {
    firstName: "국현",
    lastName: "유",
    age: 32,
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}

delete person.age

console.log(pserson.age) //undefined

 

 

객체 병합하는 방법

const person = {
    firstName: "국현",
    lastName: "유",
    age: 32,
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}

const coiedPerson = Object.assign({}, person)

console.log(coiedPerson) 

//결과값:  
{
    "firstName": "국현",
    "lastName": "유",
    "age": 32
}

 

 

객체를 분해하는 방법

구조분해할당이며 많이 사용하는 방법입니다.

const person = {
    firstName: "국현",
    lastName: "유",
    age: 32,
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}

const {firstName, lastName, age} = person;

console.log(firstName) //국현
console.log(lastName) //유
console.log(age) //32

 

 

자바스크립트는 객체지향 프로그래밍이며 객체는 key와 value 속성을 가지고 있으면 위에서 추가, 삭제, 수정, 병합, 구조분해할당에 대해서 알아보았습니다.

 

 

🤷‍♂️ 자바스크립트 객체와 JSON?

---

JSON은 자바스크립트 객체를 전송하기 위한 경량 데이터 교환 방식입니다.

자바스크립트에서는 객체를 JSON으로 JSON을 객체로 변환하여 다른 시스템에 전송할 수 있습니다.

 

JSON 문자열 특징

💡 JSON 문자열에 특징은 key와 value 쌍다운표에 감싸져 있습니다.

 

 

객체를 분해하는 방법

const person = {
    firstName: "국현",
    lastName: "유",
    age: 32,
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}

console.log(JSON.stringify(person))
//결과값: {"firstName":"국현","lastName":"유","age":32}

 

자바스크립트 객체를 JSON 문자열로 변환하는 방법

const json = '{"firstName":"국현","lastName":"유","age":32}'
const person = JSON.parse(json);
console.log(person);

 

🤷‍♂️ 마지막으로

---

자바스크립트 객체는 데이터를 조작하는 메소드를 모두 포함한 key와 value의 데이터 유형입니다.

객체를 생성, 수정, 삭제, 병합, 조회 하는 방법을 알아보았으며 객체와 JSON 변환하는 방법도 알아보았습니다.

객체를 다루는 것은 자바스크립트 프로그램에서 중요한 기술이며 지금은 기본적인 부분만 다뤘지만 더 전문성을 높이기 위해서 계속해서 공부를 해야겠습니다.

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리