티스토리 뷰
1. 객체에 대한 이해와 사용
객체는 프로그래밍에서 데이터와 그 데이터를 다루는 동작(메서드)을 함께 묶어서 표현하는 자료구조입니다.
내장 객체 (Built-in Objects)
내장 객체는 JavaScript 언어 자체에 내장되어 제공되는 객체들을 말합니다. 이러한 객체들은 JavaScript 프로그래밍에서 기본적인 기능을 제공하며, 모든 JavaScript 환경에서 사용할 수 있습니다. 몇 가지 주요 내장 객체에는 다음과 같은 것들이 있습니다.
- Object: 모든 객체의 기본이 되는 객체입니다. 다른 모든 객체는 이 객체를 상속 받습니다.
- Array: 배열을 다루는 데 사용되며, 순서가 있는 여러 값을 저장할 수 있습니다.
- String: 문자열을 다루는 데 사용되며, 텍스트 데이터를 처리하고 조작하는 데 유용합니다.
- Number: 숫자를 다루는 데 사용되며, 숫자 데이터를 처리하고 수학 연산을 수행하는 데 유용합니다.
- Function: 함수를 생성하고 관리하는 데 사용되며, JavaScript의 핵심 개념 중 하나입니다.
- Date: 날짜와 시간 정보를 다루는 데 사용되며, 날짜 및 시간 연산을 지원합니다.
- Math: 수학 함수 및 상수를 제공하여 수학적인 연산을 수행하는 데 유용합니다.
사용자 정의 객체 (User-defined Objects)
프로그래머가 직접 만들어서 사용하는 객체입니다.
JavaScript에서는 객체를 생성하고 속성과 메서드를 정의하는 데 매우 유연하고 강력한 방법을 제공합니다.
생성 방법
- new 키워드와 생성자 함수를 사용
- 객체 리터럴 표기법(Object Literal Notation) 사용
index4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>index4.html 파일입니다. </h1>
<script>
// 자바 스크립트에서 사용자 정의 객체와 생성자 함수 설계
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
// 객체 생성
const person1 = new Person("길동", "홍");
const person2 = new Person("순신", "이");
console.log(person1);
console.log(person2);
console.log("------------------------------");
// 객체 리터럴 표기법(사용자 정의 프로토타입 설계 및 생성)
const student = {
name:"John",
age: 30
};
console.log(student.name); // John 출력
console.log(student.age); // 30 출력
</script>
</body>
</html>
객체 리터럴 표기법(Object Literal Notation) 사용
JavaScript에서 객체를 생성하는 간단하고 직관적인 방법 중 하나입니다.
이 표기법을 사용하면 중괄호 {} 안에 키(key)와 값(value)의 쌍으로 객체를 정의할 수 있습니다.
각 키와 값은 콜론(:)으로 구분되며, 각 쌍은 쉼표(,)로 구분됩니다. 이를 통해 객체를 손쉽게 만들 수 있습니다.
index5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>index5.html 파일입니다. </h1>
<script>
// ES6 - 객체 리터럴 표기법
// 객체
const person = {
firstName:"길동",
lastName:"홍",
age:30,
// 중첩 객체(객체 안의 객체)
// 객체 리터럴 표기법
address:{
street:"연수로 123번길",
city:'부산',
zip:'33123'
},
// 배열 리터럴 표기법
hobbies:['독서', '등산', '요리','코딩'],
sayHello:function(){
// alert('안녕');
// 백틱 사용 - ES6 - 템플릿 리터럴 -> ${}
// ${} 에서 {} 생략 가능 -> 연산자 사용시 {} 필요
console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`);
}
};
// 객체 속성에 접근하기
console.log(person.firstName); // 길동
console.log(person.lastName); // 홍
// 중첩된 객체 속성에 접근하기
console.log(person.address.city); // 부산
// 배열 속성 0번째 인덱스에 접근
console.log(person.hobbies[0]); // 독서
// 객체의 메서드 호출
console.log(person.sayHello); // function(){} (중괄호) 내 코드 자체 출력
person.sayHello(); // function() 메서드 내 코드 만 출력
console.log("----------------------------------");
// 해당하는 객체에 새로운 속성을 추가하고 싶다면?
// 객체에 속성 추가
person.email = 'a@nate.com';
console.log(person.email);
// 객체의 상태값 변경
person.age = 100;
console.log(person.age);
// 객체 속성 삭제
delete person.hobbies;
console.log(person.hobbies); // undefined
</script>
</body>
</html>
2. 배열에 대한 이해와 사용
배열은 JavaScript에서 데이터를 보관하고 관리하는 데 사용되는 자료 구조입니다.
배열은 여러 값을 순서대로 저장할 수 있으며, 각 값은 인덱스를 사용하여 접근할 수 있습니다.
index6.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>index6.html 파일입니다. </h1>
<script>
// 배열을 사용하는 방법 2가지
// new 키워드와 생성자를 사용하여 배열을 생성할 수 있다.
const numbers = new Array(1, 2, 3, 4, 5);
Object.freeze(numbers); // 상태값 변경 못 하게 얼려버림. (1 에서 10000로 변경 안 됨.)
console.log(numbers[0]); // 1
numbers[0] = 10000;
console.log(numbers[0]); // 1 출력됨.
// 배열 리터럴 : 대괄호 []를 사용하여 배열을 생성할 수 있다.
const fruits = ['apple', 'banana', 'cherry'];
// 배열 요소에 접근하기
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
// 배열의 길이 확인하기
console.log(fruits.length); // 3 (apple, banana, cherry)
// 배열에 요소 추가하기 - push() 메서드를 사용하여 배열의 끝에 요소를 추가할 수 있다.
fruits.push('peach');
console.log(fruits); // 4 (apple, banana, cherry, peach)
console.log('----------------------------');
// 배열의 요소 제거하기 - pop() 메서드를 사용하여 배열의 끝의 요소를 삭제할 수 있다.
fruits.pop();
console.log(fruits);
// for 문 사용
// 배열의 요소를 순회(JS라서 데이터 타입 생략) (var 대신 블록변수인 let 사용 가능)
for(let i = 0; i < numbers.length; i++){
console.log(numbers[i]); // 1,2,3,4,5
}
console.log('----------------------------');
// forEach 문 사용
// numbers 안의 요소를 반복할 때마다 function()가 반복됨.
numbers.forEach(function(num){
console.log(num); // 1,2,3,4,5
});
</script>
</body>
</html>'JS' 카테고리의 다른 글
| JavaScript(Browser Object Model) (0) | 2024.07.23 |
|---|---|
| JavaScript(Document Object Model; DOM) (0) | 2024.07.22 |
| JavaScript(함수의 이해와 활용) (0) | 2024.07.19 |
| JavaScript(데이터 타입 및 연산) (0) | 2024.07.18 |
| JavaScript 사전 기반 지식 (0) | 2024.07.18 |