[JS] 04. 참조형 데이터

[JS] 04. 참조형 데이터

 

 

 

 

📚 Table of Contents

 

 

 

 

01. 참조형 데이터

자바스크립트의 참조형 데이터는 다음과 같습니다:

1. 객체 (Object):
   • 키-값 쌍으로 구성된 데이터 구조입니다.
   • 중괄호 {}로 선언합니다.
2. 배열 (Array):
   • 순서가 있는 데이터 집합입니다.
   • 대괄호 []로 선언합니다.
3. 함수 (Function):
   • 재사용 가능한 코드 블록입니다.
   • function 키워드나 화살표 함수로 선언합니다.
4. 날짜 (Date):
   • 날짜와 시간 정보를 다루는 객체입니다.
5. 정규표현식 (RegExp):
   • 문자열 패턴을 표현하는 객체입니다.

참조형 데이터는 메모리에 참조 주소가 저장되며, 가변성을 가집니다. 즉, 데이터의 내용을 변경할 수 있습니다.

02. Array

배열(Array)은 JavaScript에서 여러 개의 값을 순차적으로 나열한 자료구조입니다. 주요 특징은 다음과 같습니다:

1. 선언 방법:
   • 대괄호 []를 사용하여 선언합니다.
   • new Array() 생성자를 사용할 수도 있습니다.
2. 인덱스:
   • 0부터 시작하는 인덱스를 사용하여 각 요소에 접근합니다.
3. 길이:
   • length 속성을 통해 배열의 길이를 알 수 있습니다.
4. 다양한 데이터 타입:
   • 하나의 배열에 여러 타입의 데이터를 저장할 수 있습니다.
5. 동적 크기:
   • 배열의 크기를 동적으로 조절할 수 있습니다.
6. 메서드:
   • push(), pop(), shift(), unshift(), splice() 등 다양한 내장 메서드를 제공합니다.

// 선언 방법
const fruits1 = new Array('')
const fruits2 = ['Apple', 'Banana', 'Cherry']

console.log(fruits2)

//* 인덱싱
console.log(fruits2[1])

console.log(fruits2.length)

03. Object

객체(Object)는 JavaScript에서 키-값 쌍의 집합을 나타내는 자료구조입니다. 주요 특징은 다음과 같습니다:

1. 선언 방법:
   • 중괄호 {}를 사용하여 선언합니다.
   • new Object() 생성자를 사용할 수도 있습니다.
2. 속성(Property):
   • 키와 값으로 구성됩니다.
   • 키는 문자열 또는 Symbol이 될 수 있습니다.
3. 메서드(Method):
   • 객체의 속성으로 함수를 할당할 수 있습니다.
4. 동적 속성 추가/삭제:
   • 객체 생성 후에도 속성을 추가하거나 삭제할 수 있습니다.
5. 프로토타입(Prototype):
   • 객체는 프로토타입을 통해 다른 객체로부터 속성과 메서드를 상속받을 수 있습니다.
6. this 키워드:
   • 메서드 내에서 this를 사용하여 해당 객체를 참조할 수 있습니다.

01) 생성자 함수 방식

const user = new Object()
user.name = 'Neu'
user.age = 11

console.log(user)

 

function User() {
  this.name = 'Lyeo'
  this.age = 13
}

const user = new User()
console.log(user)

 

02) 리터럴 방식

const user = {
  name: 'NeuLyeo',
  age: 17
}

console.log(user)

 

04. Function

함수(Function)는 JavaScript에서 중요한 참조형 데이터 타입 중 하나입니다. 함수는 특정 작업을 수행하는 코드 블록을 정의하고 재사용할 수 있게 해줍니다. 다음은 JavaScript 함수의 주요 특징입니다:

1. 함수 선언:
   • 함수 선언문: function 함수명(매개변수) { ... }
   • 함수 표현식: const 함수명 = function(매개변수) { ... }
   • 화살표 함수: const 함수명 = (매개변수) => { ... }

   // 함수 선언문
   function greet(name) {
     console.log(`안녕하세요, ${name}님!`);
   }
   
   // 함수 표현식
   const sayHello = function(name) {
     console.log(`안녕하세요, ${name}님!`);
   };
   
   // 화살표 함수
   const welcome = (name) => {
     console.log(`환영합니다, ${name}님!`);
   };
   
   // 함수 호출
   greet('철수');
   sayHello('영희');
   welcome('민수');

   
   이 예시들은 각각 다른 방식으로 함수를 선언하고 있습니다.
   
   모두 같은 기능을 수행하지만, 선언 방식에 따라 사용 context가 달라질 수 있습니다.
   
   
2. 매개변수와 반환값:
   • 함수는 매개변수를 받아 처리하고 결과를 반환할 수 있습니다.
   • return 문을 사용하여 값을 반환합니다.

   function getNumber() {
  return 123
}
console.log(getNumber()) //* 함수 리턴값을 출력

3. 호이스팅:
   • 함수 선언문은 호이스팅되어 코드의 최상단으로 끌어올려집니다.
   • 함수 표현식은 호이스팅되지 않습니다.
4. 스코프:
   • 함수는 자신만의 스코프를 생성합니다.
   • 외부 스코프의 변수에 접근할 수 있습니다(클로저).
5. 일급 객체:
   • 함수는 변수에 할당할 수 있습니다.
   • 다른 함수의 인자로 전달할 수 있습니다.
   • 함수의 반환값으로 사용할 수 있습니다.
6. 메서드:
   • 객체의 속성으로 할당된 함수를 메서드라고 합니다.
7. this 키워드:
   • 함수 내에서 this는 함수가 호출되는 방식에 따라 다르게 바인딩됩니다.

함수는 하나의 자바스크립트 데이터로서
그 함수 자체와 함수를 호출하여 실행하는 것은 다른 개념이다.

// 함수 a를 선언하고 'A'를 출력합니다.
const a = function () {
  console.log('A')
}

// 함수 b를 선언하고 매개변수 c를 출력하고 c를 실행합니다.
const b = function(c) {
  console.log(c)
  c()
}

// 함수 b에 함수 a를 전달하여 실행합니다.
b(a)