JavaScript - 3

---

 

 

 

 

1 . 객체 기초

 

 

 

 

 

 

1 - 1 . 절차 지향 프로그래밍

 

 

• 코드를 순서대로 실행하는 절차로 구성하는 방식
• C언어

 

ex) const names = ['김사과', '반하나', '오렌지', '이메론']

               for(let i = 0; i < names.lenth; i++) {

                    if(names[i].startswitch("김")) {

                            console.log("안녕하세요, " + names[i] + " 님!"

                     }

                 }

 

 

 

 

 

 

1 - 2 . 객체 지향 프로그래밍

 

 

• 프로그램을 구성할 때 현실 세계의 사물들을 객체로 모델링하여, 객체 간의 상호작용을 통해 문제를 해결하는 방식

 

 

ex) const greeter = {

            names: ['김사과', '반하나', '오렌지', '이메론'],

             greetKim: function() {

                  for(let i = 0; i < names.lenth; i++) {

                       if(names[i].startswitch("김")) {

                            console.log("안녕하세요, " + names[i] + " 님!")

                       }

                   }

              }

          }

 

 

 

 

 

 

1 - 3 . 함수형 프로그래밍

 

 

• 함수 자체를 중심에 두는 프로그래밍 패러다임
• 데이터를 변경하지 않고 순수 함수를 조합하여 문제를 해결

 

 

const names = ['김사과', '반하나', '오렌지', '이메론']
names
           .filter(name => name.startswith ("김"))
           .forEach(name => console.log("안녕하세요, " + name + " 님!" ))

 

 

 

 

 

 

1 - 4 . 객체 

 

 

 

• 하나의 값에 여러 데이터를 담을 수 있는 자료형
• 속성(프로퍼티), 동작(메서드)을 함께 표현할 수 있는 구조
• 키-값 쌍의 형태로 데이터를 저장

 

 

 

 

객체 리터럴

 

 

• 중괄호 {} 안에 직접 속성과 메서드 정의

 

• ex)

 

 

 

 

 

new Object() 생성자 사용

 

 

• 객체를 빈 상태로 만들고 나중에 속성 추가
• 실제로 많이 사용되지는 않음

 

• ex)

 

 

 

 

 

 

 

• 객체 리터럴과 new Object()의 단점 : 똑같은 형태의 객체를 다시 만들고 싶다면 코드를 일일이 다 작성해야 함

 

 

 

 

 

 

생성자 함수 사용

 

 

 

• 객체를 여러 개 찍어낼 수 있는 템플릿 역할
• new 키워드와 함께 사용

 

• ex)

 

 

 

 

 

 

 

클래스(Class)

 

 

 

• 원래 자바에 존재하지 않던 문법 -> ES6부터 가능
• 구조가 명확하고 객체 지향 언어와 유사

 

• ex)

 

 

 

 

 

 

 

1 - 5 . 객체 복사

 

 

 

 

얕은 복사

 

 

• 객체의 1단계 속성만 복사하고 속성 값이 또 다른 객체나 배열이면 참조만 복사
• 스프레드 (. . .) 사용 시 얕은 복사라 생각하면 편함

 

 

• ex)

=> obj4의 address: {city: "서울"}은 값이 아닌 주소가 동일해짐 => city를 변경하면 원본도 변경됨

 

 

 

 

 

깊은 복사

 

 

• 객체 내부의 모든 중첩된 값들까지 복사하는 방법 즉 완전히 새로운 객체를 만드는 것
• structuredClone 사용 시 깊은 복사

 

 

• ex)

=> structuredClone 사용으로 깊은 복사가 되어 새로운 객체가 만들어짐 => 값 변경해도 원본은 바뀌지 않음

 

 

 

 

 

 

 

 

1 - 6 . 스프레드 문법

 

 

 

• 점 3개를 사용해 배열이나 객체의 값을 펼쳐서 복사하거나 전달할 수 있는 문법
• 배열이나 객체 안의 요소들을 하나하나 꺼내서 다른 배열, 객체, 함수 등으로 옮겨줄 수 있음
• 배열 펼치기, 배열 합치기, 배열에 요소 추가, 객체 복사, 객체 병합, 객체 속성 덮어쓰기, 함수 인자 전달 등을 함

 

 

 

• ex)

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

2 . 클래스

 

 

 

 

 

 

 

2 - 1 . 클래스 상속

 

 

 

 

• 다른 클래스의 속성과 메서드를 물려받을 수 있음

 

• ex)

 

 

 

 

 

 

2 - 2 . 정적 메서드

 

 

 

 

• static
• 클래스 이름으로 직접 불러서 호출하는 메서드

 

• ex)

 

 

 

 

 

 

 

2 - 3 . 클래스 필드

 

 

 

 

• constructor 없이 속성을 바로 정의 가능
• 클래스 레벨 속성, 비공개 속성 정의에 유리

 

• ex)

 

 

 

 

 

 

 

 

2 - 4 . get/set

 

 

 

 

• get과 set은 같은 이름을 공유해야 함
• get: 값을 읽을 때 호출
• set: 값을 할당할 때 호출
• 내부에서 값을 저장할 땐 보통 _name처럼 언더스코어를 붙여서 구분함
• get만 정의하면 읽기 전용 속성이 됨 -> 쓸 수 없음
• set만 정의하면 쓰기 전용 속성이 됨 -> 읽을 수 없음
• 속성처럼 사용 가능

 

 

• ex)

=> 변수처럼 사용 가능하기에 user.name으로 사용

 

 

 

 

 

 

 

2 - 5 . private 필드

 

 

 

• 클래스 내부에서만 접근 가능한 비공개 속성
• #을 붙이면 반드시 동일한 클래스 안에서만 접근 가능
• 상속에서도 접근 불가

 

 

• ex 1)

 

 

 

 

• ex 2)

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

3 . 프로토타입

 

 

 

 

 

 

• 자바에만 존재
• 자바스크립트에서 객체가 공통된 속성과 메서드를 공유하도록 해주는 메커니즘
• 모든 객체는 내부에 prototype이라는 숨겨진 연결을 가지며 자신에게 없는 속성이나 메서드를 요청받으면 이 연결을 따라 프로토타입 객체에서 찾아옴
• 여러 객체가 동일한 메서드를 각각 따로 가지지 않고 하나의 원본을 공유할 수 있어 메모리를 절약하고 구조적인 코드 작성이 가능함

 

 

• ex)

=> Person 생성자로 만든 객체 p1, p2는 study라는 메서드를 직접 가지고 있지 않았음
=> Person.prototype이라는 공용 객체에 저장된 메서드를 참조해서 사용
=> p1 -> Person.prototype -> Object.prototype -> null(프로토타입 체인)

 

 

 

 

 

 

 

 

3 - 1 . Object 객체

 

 

 

 

 

 

• 자바스크립트의 내장 객체인 Object는 모든 객체의 최상위 부모(프로토타입 기반)
• 객체를 생성하고 조작하기 위한 기본 도구
• Object는 객체를 만들 수 있는 생성자이면서 객체의 속성을 다루기 위한 다양한 메서드를 제공함
• 모든 객체는 Object에서 출발하며 공통 기능은 Object.protorype에 정의

 

 

 

 

Object의 주요 메서드

 

 

 

• Object.keys(obj) : 객체의 모든 키(속성 이름)를 배열로 반환
       => const user = { name: "김사과", age: 20 }
            console.log(Object.keys(user)) //['name', 'age']

 

• Object.values(obj) : 객체의 모든 값(속성 값)을 배열로 반환
        => console.log(Object.values(user)) //['김사과', '20']
              Object.entries(obj) : 객체의 키와 값 쌍을 [key, value] 형태의 배열로 반환
               console.log(Object.entries(user)) //[ [name: "김사과"], [age: 20]]

 

• Object.assign(obj) : 객체를 복사하거나 병합할 때 사용
         => Object.hasOwn(obj, key) : 객체가 특정 속성을 직접 가지고 있는지 확인
               console.log(Object.hasOwn(user, "job")) //false
                console.log(Object.hasOwn(user, "name")) //true

 

• Object.freeze(obj) : 객체를 동결시켜 속성을 변경, 추가, 삭제할 수 없게 만듦
           => const config = { debug: true }
                 Object.freeze(config)
                 config.debug = false
                  console.log(config.debug) // true(변경 안 됨)
      

 

 

 

 

 

 

 

 

 

 

---