객체기초 1) 객체 리터럴
객체란? 이름과 값은 한 쌍으로 묶은 데이터를 여러 개 모은 것
객체 리터럴과 생성자로 생성할 수 있다.
var card = { suit: "하트", rank: "A"}; // {...}이 객체 리터럴
var card = { "suit": "하트", 'rank': "A"}; //프로퍼티 이름은 문자열로도 가능
프로퍼티 값에 모든 데이터 타입의 값과 표현식을 대입할 수 있다.
- 마침표(.), 대괄호([ ])연산자를 통해 객체 안의 프로퍼티 값을 읽고 쓸 수 있다.
- 객체에 없는 프로퍼티 사용 시 undefined 를 반환한다.
- 객체 리터럴 안에 어떠한 프로퍼티도 작성하지 않으면 빈 객체가 생성된다.
card.suit //하트, 프로퍼티이름(식별자)만 사용
card["rank"] //A, 프로퍼티이름/문자열을 반환하는 표현식 사용
car.color // undefined
var obj={};
console.log(obj); // Object{}
프로퍼티 추가와 삭제
없는 프로퍼티 이름에 값을 대입하면 새로운 프로퍼티가 추가된다.
삭제시 delete 연산자 사용
card.value = 14;
console.log(card); // Object{suit: "하트", rank: "A", value: 14}
delete card.rank;
console.log(card); // Object{suit: "하트", value: 14}
프로퍼티 유무
프로퍼티 이름(문자열) in 객체명
프로퍼티가 객체에 포함되었을 때 true
포함되지 않았을 때 false
* 주의 : in 연산자의 조사대상이 그 객체가 가진 프로퍼티와 그 객체가 상속받은 모든 프로퍼티이다.
var tv = { color: "black", brand: "SAMSUNG"};
console.log("color" in tv); // true
console.log("size" in tv); // false
console.log("toString" in tv); // true, tv가 Object객체를 상속받음.
참조타입
객체 타입의 값을 변수에 대입하면 그 변수에는 객체의 참조(메모리에서의 위치 정보)가 저장된다. 이 때 변수 상태는 그 객체를 참고하고 있다.
var a = card; // 변수 a가 card 객체를 참조하게 되므로 a로 card객체를 읽거나 수정할 수 있다.
console.log(a.suit); // 하트
a.suit = "스페이드";
console.log(a.suit); // 스페이드
console.log(card.suit); // 스페이드
객체의 기초 2) 생성자
생성자를 사용하면 이름이 같은 메서드와 프로퍼티를 가진 객체 여러 개를 효율적으로 생성할 수 있다.
// tv를 표현하는 객체를 생성하는 생성자
function Tv(color, brand){
this.color = color;
this.brand = brand;
}
var tv = new Tv("black","SAMSUNG");
console.log(tv); // Tv {color:"black", brand:"SAMSUNG"}
// 해당 방법으로 출력시 생성자 이름 TV가 표시된다.
생성자의 역할
- 객체를 생성하고 초기화한다.
- 이름은 같지만 프로퍼티 값이 다른 객체(인스턴스) 여러 개를 생성할 수 있다.
var tv1 = new Tv("red", "LG");
var tv2 = new Tv("blue", "APPLE");
var tv3 = new Tv("white", "SONY");
console.log(tv1); // Tv {color: 'red', brand: 'LG'}
console.log(tv2); // Tv {color: 'blue', brand: 'APPLE'}
console.log(tv3); // Tv {color: 'white', brand: 'SONY'}객체의 기초 3) 내장객체
- 내장 생성자
사용자가 정의하는 생성자 외에도 자바스크립트에 처음부터 포함된 '내장 생성자'가 있다. 암기 X
1️⃣ Date 생성자 : 날짜와 시간을 표현하는 객체를 생성
Date 객체는 Date 생성자로 생성한다.
// Date 객체의 날짜와 시간 정보를 알 수 있다.
var now = new Date();
console.log(now); // {Wed Nov 30 2022 08:40:56 GMT+0900 (한국 표준시)}
// Date 생성자의 인수로 날짜와 시간을 전달할 수 있다.
var then = new Date(2022, 01, 01);
console.log(then); // {Tue Feb 01 2022 00:00:00 GMT+0900 (한국 표준시)}
// Date 객체의 주요 메서드
console.log(now.getFullYear()); // 연도 :2022
console.log(now.getMonth()+1); //월 : 11, 0부터 시작이므로 +1
console.log(now.getDate()); // 날짜 : 30
console.log(now.getDay()); // 요일(0~6) : 3, 0이 일요일부터 시작
console.log(now.getHours()); // 시간 : 8
console.log(now.getMinutes()); // 분 : 30
console.log(now.getSeconds()); // 초 : 55
console.log(now.getMilliseconds()); // 밀리초 : 403
console.log(now.toString()); // Wed Nov 30 2022 08:30:55 GMT+0900 (한국 표준시)
2️⃣ Function 생성자
var square = new Function("x", "return x*x");
인수가 n개 일 때
var 변수 이름 = new Function(첫번째 인수, ..., n번째 인수, 함수 몸통);
단점 : 전역변수와 자신의 지역변수만 읽고 쓸 수 있다.
3️⃣ 기타 내장 객체
| 내장객체 | 설명 |
|---|---|
| 전역 객체 | 프로그램 어디에서나 사용할 수 있는 객체 |
| JSON | JSON을 처리하는 기능을 제공 |
| Math | 수학적인 함수와 상수를 제공 |
| Reflect | 프로그램의 흐름을 가로채는 기능을 제공 |
✔️ 전역 객체
전역 객체의 프로퍼티는 프로그램의 어느 위치에서나 사용할 수 있다.
| 분류 | 프로퍼티 |
|---|---|
| 전역 프로퍼티 | undefined, NaN, Infinity |
| 생성자 | Object(), String(), Number() 등 |
| 전역 함수 | parseInt(), parseFloat(), isNaN() 등 |
| 내장 객체 | Math, JSON, Reflect |
배열의 기초
배열리터럴
✔️ 배열 리터럴은 쉼표로 구분한 값을 대괄호([ ])로 묶어서 표현한다.
[...]이 배열 리터럴, 배열 값 하나를 배열 요소라 한다.
배열 요소는 0부터 시작한다. 이를 요소 번호라 한다.
✔️ 배열 요소는 변수와 마찬가지로 모든 타입의 값이 올 수 있다.
var number = [ 1, 2, 3, 4 ];
// 빈 배열 생성
var empty = [];
console.log(empty); // []
// 배열 리터럴 요소의 값을 생략하면 그 요소는 생성되지 않는다.
var a = [2, , 4];
console.log(a);
// (3) [2, empty, 4]
// 0: 2
// 2: 4
// length: 3
length 프로퍼티
✔️ 배열의 length 프로퍼티는 배열 요소의 최대 인덱스 값 + 1
배열 길이는 length 프로퍼티 값을 말한다.
✔️ length 프로퍼티에 현재의 배열 요소 개수보다 작고 0보다 큰 정수 값을 대입하면 배열 길이가 줄어든다. 그 배열 길이를 넘는 인덱스 번호에 할당된 배열 요소는 삭제된다.
✔️ 특정 인덱스 요소는 대괄호를 사용해 읽거나 쓸 수 있다.
✔️ 배열은 객체이므로 배열의 요소 번호를 숫자 값 대신 문자열을 사용할 수 있다.
✔️ 없는 배열 요소를 읽으려하면 undefined가 반환된다.
var number2=[5, 6, 7, 8];
console.log(number2.length); // 4
var a = ["A", "B", "C", "D"];
a.length = 2;
console.log(a); // (2) ["A", "B"] // 배열 요소 삭제
console.log(a[1]); // B
console.log(a["1"]); // B
console.log(a[4]); // 없는 배열 요소 → undefined
Array 생성자로 생성
var num1 = new Array(7, 8, 9, 0); // [7, 8, 9, 0]을 생성
var empty2 = new Array(); // 빈 배열 []을 생성
var b = new Array(2, 4); // 배열 리터럴 [2,4]와 똑같은 배열 생성
// Array 생성자의 인수가 한 개로 그 값이 양의 정수면 배열 길이를 나타낸다.
var x = new Array(3);
console.log(x.length); // 3
// 인수가 한 개고 그 값이 양의 정수가 아니면 오류 발생
var x = new Array(-3); // 오류
배열 요소의 추가와 삭제
✔️ 없는 배열 요소에 값을 대입하면 새로운 요소가 추가된다.
✔️ push 메서드를 사용하면 요소를 배열 끝에 추가할 수 있다.
✔️ delete 연산자를 사용하면 특정 배열 요소를 삭제할 수 있다.
→ 배열 요소를 삭제해도 그 배열의 length 프로퍼티 값은 바뀌지 않고, 삭제한 요소만 사라진다.
var a = ["A", "B", "C"];
a[3] = "D";
console.log(a); // ["A","B","C","D"]
a.push("E");
console.log(a); // ["A","B","C","D","E"]
delete a[1];
console.log(a); // ["A", empty,"C","D","E"], length: 5
희소배열
✔️ 배열에 요소를 추가하거나 제거하면 인덱스가 0부터 시작되지 않는 배열이 만들어진다. 이러한 배열을 희소배열이라 한다.
✔️ 희소 배열의 길이 > 배열 요소의 개수
✔️ 일반 배열의 길이 = 배열 요소의 개수
var a = ["A", "B", "C"];
a[4] = "E";
console.log(a); // ["A", "B", "C", empty, "E"]
// 0: "A"
// 1: "B"
// 2: "C"
// 4: "E"
// length: 5
함수의 기초
자바스크립트 함수란? 일련의 처리를 하나로 모아 언제든 호출할 수 있도록 만들어 둔 것
입력 값(인수)을 받으면 출력 값(반환값)으로 함수 값을 반환한다.
함수 선언문
함수는 function 키워드를 사용해서 정의한다.
function square(x){ return x * x;};
// 소괄호 안에 x가 인수, 중괄호 안의 코드가 함수가 실행하는 작업이다.
함수 이름
변수이름과 마찬가지로 모든 식별자를 함수 이름으로 사용할 수 있다.
가독성과 유지보수성을 위해 동사/동사어휘를 사용하고 캐멀 표기법, 밑줄 표기법을 사용한다.
함수 호출
✔️ 함수를 호출하려면 함수 이름 뒤에 소괄호로 인수를 묶어 입력한다.
✔️ 인수를 받지 않는 함수도 정의할 수 있다.
console.log(square(3)); // 9
// 인수를 받지 않는 함수 정의, 호출
var bark = function(){ console.log("Bow-wow"); };
bark(); // "Bow-wow"
