JS) 36번째 회고

---

1. 객체

자바스크립트에서 객체는 Key-Value 쌍으로 구성된 데이터 구조이다.
객체는 속성과 메소드를 가질 수 있다.

 

💡 객체 생성

 

1️⃣ 객체 리터럴 사용

let person = {
    name: "John",
    age: 30,
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

// 객체 속성 접근
console.log(person.name); // "John"
console.log(person.age); // 30
person.greet(); // "Hello, John"

 

2️⃣ new Object() 사용

let person = new Object();
person.name = "John";
person.age = 30;
person.greet = function() {
    console.log("Hello, " + this.name);
};

console.log(person.name); // "John"
console.log(person.age); // 30
person.greet(); // "Hello, John"

 

3️⃣ 생성자 함수 사용

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        console.log("Hello, " + this.name);
    };
}

let john = new Person("John", 30);
console.log(john.name); // "John"
console.log(john.age); // 30
john.greet(); // "Hello, John"

 

📍 JS에서 THIS

1. this는 바인딩이 객체가 생성되는 시점에 결정된다.
2. 일반 함수 호출 시 this가 최상위 객체(global 또는 window)를 가리킨다.
3. 메소드를 호출 시 호출된 객체를 가리킨다.
4. new 키워드를 사용해 객체를 생성했을 때 해당 객체를 가리킨다.

---

2. Property 단축 구문

객체 리터럴(Object literal)을 정의할 때 객체의 속성과 값을 더 간결하게 작성할 수 있게 해주는 기능이다.
이는 ES6에서 도입된 문법으로, 변수의 이름과 객체의 속성 이름이 같을 때 유용하게 사용할 수 있다.

 

💡 Property 단축 구문 예시

 

1️⃣ 기본 객체 리터럴 구문

let name = "John";
let age = 30;

let person = {
    name: name,
    age: age
};

console.log(person); // { name: "John", age: 30 }

 

2️⃣ Property 단축 구문을 사용한 객체 리터럴 구문

let name = "John";
let age = 30;

let person = {
    name,
    age
};

console.log(person); // { name: "John", age: 30 }

 

🚀 Property 단축 구문을 사용할 때의 장점

 

1. 가독성 향상
   코드를 더 간결하고 읽기 쉽게 만든다.
2. 코드 양 감소
   중복된 코드 작성을 줄여준다.

Enhanced Object property | PoiemaWeb

- 출처 : poiemaweb

[JavaScript] 단축 표기법 Shorthand notation

- 출처 : noritersand

---

3. JSON (JavaScript Object Notation)

JSON은 데이터를 저장하고 전송하기 위한 경량 데이터 교환 형식이다.
인간이 읽고 쓸 수 있으며, 기계가 쉽게 분석하고 생성할 수 있다.
자바스크립트 객체 표기법을 기반으로 한다.

 

💻 JSON 예시 코드

{
    "name": "John",
    "age": 30,
    "isStudent": false,
    "courses": ["Math", "Science", "History"],
    "address": {
        "street": "123 Main St",
        "city": "Anytown",
        "zipcode": "12345"
    }
}

 

💡 JSON 파싱 및 문자열화

 

1️⃣ JSON 문자열을 자바스크립트 객체로 변환 (파싱)

let jsonString = '{"name": "John", "age": 30, "isStudent": false}';
let jsonObject = JSON.parse(jsonString);

console.log(jsonObject.name); // "John"
console.log(jsonObject.age); // 30
console.log(jsonObject.isStudent); // false

 

2️⃣ 자바스크립트 객체를 JSON 문자열로 변환 (문자열화)

let jsObject = { name: "John", age: 30, isStudent: false };
let jsonString = JSON.stringify(jsObject);

console.log(jsonString); // '{"name":"John","age":30,"isStudent":false}'

 

[N/W] JSON이란? - JSON 구조, JSON 데이터 타입, JSON Array

- 출처 : lxxyeon

---

4. Closure

클로저는 함수와 그 함수가 선언될 당시의 렉시컬 환경(주변 상태)을 기억하는 기능이다.
클로저는 외부 함수의 변수에 접근할 수 있는 내부 함수를 만들 때 유용하며,
내부 함수에서 외부 함수의 범위에 대한 접근을 제공한다.
상위함수보다 하위함수가 더 오래 살아있는 경우를 말한다.

 

💻 클로저 예시 코드

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log("Outer Variable: " + outerVariable);
        console.log("Inner Variable: " + innerVariable);
    };
}

const newFunction = outerFunction("outside");
newFunction("inside");

// Output:
// Outer Variable: outside
// Inner Variable: inside

위 예시에서 innerFunction은 outerFunction의 outerVariable에 접근할 수 있다.
outerFunction이 종료된 후에도 innerFunction은 outerVariable을 기억하고 있다.
이것이 클로저이다.

클로저 - JavaScript | MDN

- 출처 : developer.mozilla

---

5. Class

ES6에서 도입된 클래스는 객체 지향 프로그래밍(OOP) 스타일로 객체를 생성할 수 있게 해 준다.
클래스는 생성자 함수와 프로토타입 기반의 상속을 보다 직관적으로 사용할 수 있게 해 준다.

 

💡 클래스 예시

 

1️⃣ 클래스 정의 및 인스턴스 생성

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log("Hello, " + this.name);
    }
}

let john = new Person("John", 30);
console.log(john.name); // "John"
console.log(john.age); // 30
john.greet(); // "Hello, John"

 

2️⃣ 상속

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log("Hello, " + this.name);
    }
}

class Student extends Person {
    constructor(name, age, grade) {
        super(name, age); // 부모 클래스의 생성자를 호출
        this.grade = grade;
    }

    study() {
        console.log(this.name + " is studying.");
    }
}

let student = new Student("Jane", 20, "A");
console.log(student.name); // "Jane"
console.log(student.age); // 20
console.log(student.grade); // "A"
student.greet(); // "Hello, Jane"
student.study(); // "Jane is studying."

Classes - JavaScript | MDN

- 출처 : developer.mozilla