[렛츠기릿 자바스크립트] 객체

EOH·2023년 5월 14일

렛츠기릿 자바스크립트

목록 보기

3/8

1️⃣ 객체(object)

자바스크립트는 객체기반의 스크립트언어라고 소개했었다. 자바스크립트의 대부분은 객체로 이루어져있으며, 원시값을 제외한 모든 것들은 객체이다.
객체는 자료형의 일종으로 이름(name)과 값(value)으로 구성된 프로퍼티(property) 의 정렬되지 않은 집합이다. 프로퍼티의 값으로 함수가 오는데 이를 메서드라고한다. 객체는 배열, 함수, 배열과 함수가 아닌 값으로 나뉜다.

원시값
: 객체가 아니면서 메서드도 아닌 데이터로 {String, Number, Boolean, Biginit, undefined, null, Symbol(ES6)}이 원시값에 속하며 변경이 불가하다.

2️⃣ 배열

배열의 선언과 접근
[ ]를 이용해서 선언할 수 있고, 인덱스로 접근할 수 있다.

	const fruits = ['apple', 'orange', 'banana'];
	//배열의 이름은 fruits, 요소는 apple, orange, banana이다.

	const arrayOfArray = [[1, 2, 3], [4, 5]];
	//배열안에 배열을 넣거나 변수를 넣을 수 있다.

	const fruits[0]
	//fruits의 0번째 요소를 출력한다.

배열에 이용할 수 있는 함수
array.length : 배열의 길이를 나타냄
array.unshift : 배열의 맨 앞에 요소 추가
array.push : 배열의 맨 뒤에 요소 추가
array.pop : 배열의 마지막 요소 제거
array.shift : 배열의 맨 앞 요소 제거
array.splice(index, n, ...) : 인덱스로부터 n개의 요소 제거 후 다른 요소 추가
array.indexOf : 앞에서부터 처음 나오는 타겟 요소의 인덱스 알려줌
array.lastIndexOf : 뒤에서부터 처음 나오는 타겟 요소의 인덱스 알려줌
사용예시

const alphabet = ['a', 'b', 'c', 'a', 'b', 'z'];

alphabet.length
//반환값 6

alphabet.unshift('d');
//alphabet = ['d', 'a', 'b', 'c', 'a', 'b', 'z']

alphabet.push('a');
//alphabet = ['d', 'a', 'b', 'c', 'a', 'b', 'z', 'a']

alphabet.pop();
//alphabet = ['d', 'a', 'b', 'c', 'a', 'b', 'z']

alphabet.shift();
//alphabet = ['a', 'b', 'c', 'a', 'b', 'z']

alphabet.splice(2, 2);
//alphabet = ['a', 'b', 'b', 'z']
//인덱스 2부터 2개 지움

alphabet.splice(2);
//alphabet = ['a', 'b']
//인덱스 2부터 모두 다 지움

alphabet.splice(1, 0, 'c', 'c');
//alphabet = ['a', 'c', 'c', 'b']
//인덱스 0부터 0개 지우고 'c'와 'c'를 삽입

alphabet.indexOf('c');
//반환값 : 1

alphabet.lastIndexOf('c');
//반환값 : 2

3️⃣ 함수

하나의 특별한 목적의 작업을 수행하도록 설계된 별도의 블록으로 선언방법은 세가지가 있다. 각각 동작하는게 조금씩 다른데 자세한건 강의 뒤쪽에서 알아본다고 한다.

함수 선언문

	function 함수이름(parameter) {실행문}

함수 표현식

	const 변수이름 = function(parameter) {실행문};

화살표 함수

	const 변수이름 = (parameter) => {실행문};

함수에는 매개변수(parameter)와 인수(argument)가 있다. 함수를 선언할 때는 필요한 데이터를 매개변수, 호출할 때 필요한 데이터를 인수라고 한다.

4️⃣ 객체 리터럴

객체리터럴의 생성
객체리터럴은 {}안에 0개 이상의 프로퍼티를 정의하는 객체 생성 표기법이다.
아래 예시에서 student는 객체 리터럴,
name = 'eoh', age = 10, gender = 'female'은 프로퍼티,
name, age, gender는 속성 이름,
'eoh', 10, 'female'은 각각의 속성 값이다.

	const student = {
		name = 'eoh',
  		age = 10,
  		gender = 'female'
	};

객체 리터럴의 접근
student.name 으로 접근하거나
student['name'] 처럼 속성이름을 ''로 감싸서 접근할 수 있다.
객체의 수정 및 삭제

	student.name = 'ejay'
	//속성값에 접근하여 수정
	
	delete student.name;
	//속성의 삭제

5️⃣ 객체의 비교

객체끼리의 비교는 다 false가 된다. {} === {} 는 항상 false이다.
객체는 참조형이기 때문에 항상 메모리에 복사해서 사용하기 때문이다. 객체를 변수에 넣어서 비교하면 true를 내보낼 수 있다.

예시)

const a = {
  name : eoh
};

const array = [1, 2, a];

console.log(a === array[2]);
//true를 출력함

6️⃣ 배열과 함수의 객체로서의 특징

배열과 함수는 객체를 배열모양, 함수모양으로 만든 것이고 목적에 따라 다르게 이용하는 것이다. 배열과 함수도 객체처럼 속성의 추가가 가능하다

예시)

function hello() {};
hello.a = 'really?';
const array = [];
array.b = 'wow';

console.log(hello.a);
//'really'를 출력함
conseole.log(array.b);
//'wow'를 출력함
}

EOH

에-오

이전 포스트

[렛츠기릿 자바스크립트] 자바스크립트 기본 문법

다음 포스트

[렛츠기릿 자바스크립트] 객체