5. 참조 타입

· ☕ 3 min read · 👀... views

다루는 내용

  1. 객체로 작업하기
  2. 배열 생성하고 조작하기
  3. 자바스크립트의 데이터 타입 이해
  4. 원시 데이터 및 원시 래퍼로 작업하기

1. 객체로 작업하기

  • 객체란 참조 타입이며 클래스와는 다르다.

1-1. Object 타입

  • 가장 많이 사용하는 타입으로 new 연산자 혹은 객체 리터럴로 생성할 수 있다.
1
2
3
4

1)
var person = new Person();
2)
var person = {};
  • 객체 리터럴 표기법을 사용하면 Object 생성자를 호출하지 않으며, 프로퍼티가 여러개 일 때 가독성을 위해 사용하길 권함.

1-2. Array 타입

  • 배열의 크기는 동적으로 할당되며, 배열 element 에 어떤 데이터 타입도 가능
  • Object 와 비슷하게 new 연산자 혹은 배열 리터럴로 생성 가능
1
2
3
4
5

1)
var colors1 = new Array(20);
var colors2 = new Array("green", "dark");
2)
var color = ["red", "blue"];
  • Array.isArray(value) 를 통해 배열을 판단할 수 있음
  • join() 을 통해 배열을 문자열로 나타낼 수 있음
1
2

var color = ["red", "green", "black"];
console.log(color.join(",")); // red,green,black
  • push() 와 pop() 을 통해 LIFO 인 스택 처럼 동작이 가능
  • 배열 순서를 조작하는 매서드는 sort(), reverse() 가 있음.
1
2
3
4
5
6
7

var values = [1,3,2,4];
console.log(values.reverse()); // 4,2,3,1 - 단순 순서 조작
console.log(values.sort()); // 1,2,3,4 

// sort 의 경우
var val = [1,5,10];
val.sort() // 1,10,5 - 문자열로 비교한 결과가 나오므로 보통 비교함수를 넘겨서 처리함
  • concat() 의 경우 현재 배열 데이터를 기반으로 매개변수를 더한 새로운 배열을 생성
  • slice() 의 경우 데이터의 일부를 가진 새 배열을 생성
  • splice() 의 경우 중간에 데이터를 삽입하고자 할 때 사용하며 삭제한 데이터의 배열을 반환함
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


var sliceNumber = [1,2,3,4,5,6]
sliceNumber(1); // 2,3,4,5,6
sliceNumber(1,4); // 2,3,4

---------------------------------
var color = ["red", "blue"];
var removed = color.splice(0,1);

color // blue
removed // red

removed = color.splice(1,0,"yellow");

color // blue, yellow
remove // ""

removed = color.splice(1,1,"green")

color // blue, green
removed // yellow
  • 위치를 검색할 때는 indexOf() 와 lastIndexOf() 가 있으며, 2개의 매개변수 (검색할 데이터, 검색을 시작할 인덱스) 이다.
  • 반복 메소드로는 every(), filter(), forEach(), map(), some() 5가지가 있음
    • every : 배열의 모든 데이터가 true 면 true 반환
    • filter : 반환값이 true 인 것만 새 배열에 저장하여 반환
    • forEach : for 문과 같으며 반환값이 없음
    • map : forEach 와 비슷하지만, 결과를 반환함
    • some : 배열의 반환 값 중 하나라도 true 면 true 반환
  • 감소메소드 reduce(), reduceRight() 가 있으며, 배열을 모두 순회하며 값을 하나 만들어 반환

1-3 Date 타입

1
2

var now = new Date();
var someDate = new Date("November 11, 2019");

1-4 RegExp 타입

  • 정규표현식
1

var expression = /pattern/flags;
  • g : 전역모드, i : 대소문자 비구분, m : 여러줄 모드
1
2
3
4
5
6

var pattern1 = /[bc]at/i;
var pattern2 = new RegExp("[bc]at", "i");
// pattern1과 pattern2 는 같은 표현

var text = "Cat is bat"
pattern1.test(text) // 정규표현식 테스트

1-5 Function 타입

  • 함수는 사실 객체이다. (함수 이름은 단순히 함수 객체를 가리키는 포인터일 뿐)
1
2
3

var sum = function(num1, num2) {
	return num1 + num2;
}
  • 함수 선언과 함수 표현식은 약간 차이점이 있는데, 함수 선언은 불러오기 전에 실행이 가능하고, 함수 표현식은 해당 코드가 실행이 되야 사용할 수 있다. 이는 호이스팅 때문
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

sum(10,10) // 정상
function sum(num1, num2) {
	return num1 + num2;
}

-----------------------------
sum(10,10) // error
var sum = function(num1, num2) {
	return num1 + num2;
}
  • 함수 이름은 단순히 객체일 뿐이므로, 다른 함수의 매개변수로 가능
1
2
3
4
5
6
7
8
9

function callSomeFunction(someFunction, someArg) {
	return someFUnction(someArg);
}

function add10(num) {
	return num + 10;
}

var ret = callSomeFunction(add10, 10); // ret = 20

1-6 원시 래퍼 타입

  • Boolean, Number, String 이 있으며 각 원시타입에 대응
  • 읽기 모드로 접근할 때 원시 래퍼 객체의 인스턴스가 만들어지며, 이를 통해 데이터 조작
  • 래퍼 객체는 원시 값을 조작하는 문장이 실행되는 즉시 파괴

1-7 내장된 싱글톤 객체

  • Global, window, Math
  • Global 객체는 모든 전역 변수와 함수를 프로퍼티 형태로 포함하며, 접근할 수 있는 방법이 없기에 웹브라우저에서는 window 를 통해 가능
Share on
snack
WRITTEN BY
snack
Web Programmer
Total visitors ...
Total views ...

©2021, All Rights Reserved

Powered by Hugo and the Zzo theme

What's on this Page