📝목차
- 배열
- 객체
1. 배열
자바의 배열은 ‘같은 자료형을 가진 변수’들의 집합이었다. 하지만 JS는 비명시적 자료형이기 때문에, 배열 역시 ‘모든 자료형을 담을 수 있는 변수’의 집합이라 할 수 있다.
이런 JS의 배열은 다음 두 가지 특징이 있다.
- 배열의 길이가 자유롭다.
배열의 길이를 따로 정하지 않는다. 요소 개수에 따라 크기가 정해진다. - 자료형의 제약을 받지 않는다.
같은 자료형이 아닌, 어떤 자료형이든 배열 안에 넣을 수 있다.
[ 배열 생성 ]
let arr1 = [1, 2, 3, 4,];
let arr2 = [1, 2,3, "Hello", 3.14, true, ['A', 'B', 'C']][ 배열을 다루는 함수 ]
let arr = ["Apple", "Orange", "Mango"];(1) indexOf
찾는 대상 값의 index를 반환, 대상이 없으면 음수를 반환let result = arr.indexOf("Orange");
console.log(result); // 1(2) join
배열 내부의 모든 요소를 특정 구분자를 이용해, 한 문자열로 결합하여 반환let result = arr.join("#");
console.log(result); // #Apple#Orange#Mango(3) reverse
원본 배열의 모든 요소의 순서를 반대로 뒤집는다.let result = arr.reverse();
console.log(result); // Mango, Orange, Apple(4) sort
원본 배열을 오름차순 정렬arr.sort();- 내림차순 사용시
//숫자 배열
function desc(a, b){
return b-a;
}
// 문자열
function desc(a, b){
if(a>b) return 1;
else if(b>a) return 1;
else return 0;
}
arr.sort(desc)[ 배열에 요소를 집어넣고 꺼내는 함수 ]
let arr = ["Java", "Python", "Ruby", "C#"](5) push(요소)
기존 배열의 맨 뒤에 넣는다.arr.push("perl");
console.log(arr); // ["Java", "Python", "Ruby", "C#", “perl”](6) pop()
배열의 맨 마지막 요소를 추출 후 반환한다.let pop = arr.pop(); // C#
console.log(arr); // "Java", "Python", "Ruby"(7) unshift(요소)
기존 배열의 맨 앞에 넣는다.arr.unshift("Perl") // “Perl”. "Java", "Python", "Ruby", "C#"(8) shift()
배열의 맨 처음 요소를 추출 후 반환한다.arr.shift(); // "Python", "Ruby", "C#"let arr = ["Apple", "Orange", "Mango", "Strawberry", "Grape", "Banana"](9) slice(index)
인자로 받은 값에 따라 새로운 배열을 반환한다.arr.slice(2) // [ "Mango", "Strawberry", "Grape", "Banana" ] - slice(start index, end index)
end index는 포함하지 않는다.
arr.slice(2,4) // [ "Mango", "Strawberry" ] (10) splice(index, int)
원본 배열의 중간에 삽입, 삭제가 가능한 함수// 인자값이 2개인 경우 – 기준부터 n개의 양쪽 벽을 잇는다.
arr.splice(2,4) // ["Apple", "Orange", "Banana"]
// 인자값이 3개인 경우 - 세 번째 인자는 입력값이다.
["Apple", "Orange", "Mango", "Strawberry", "Grape", "Banana"]
arr.splice(4,0, "가") // ["Apple", "Orange", "Mango", "Strawberry", “가” ,"Grape", "Banana"]
arr.splice(4,1, "가") // ["Apple", "Orange", "Mango", "Strawberry", “가”, "Banana"]
arr.splice(4,2, "가") // ["Apple", "Orange", "Mango", "Strawberry", “가” ]2. 객체(Object)
객체 개념은 자바와 유사하지만, 훨씬 범용성이 뛰어나고 자바스크립트 외의 다양한 언어에서 사용된다.
[ 객체 생성 ]
자바스크립트에서 객체를 생성하는 방법은 총 3가지가 있으며, 저마다 사용 빈도와 타이밍이 다르니 잘 이해하고 있어야 하며, 자바스크립트의 특징을 이해하고 있어야 한다.
[ 특징 ]
- 변수 선언을 안 해도 자바스크립트는 자동으로 변수를 생성한다.
- 모든 함수는 생성자가 될 수 있다.
{}는 객체를 의미한다.
1) Object 사용
자바스크립트에서 사용 빈도가 제일 낮고, 자바에서 생성하는 방식과 같다.
let obj = new Object();이렇게 만들어준 빈 객체에 변수 선언을 안한 변수를 붙이면, 멤버필드가 만들어진다(특징)
obj.id = 1001;2) 객체 Literal 사용(JSON)
사용 빈도가 높은 자바스크립트의 객체 생성 방식으로 흔히 JSON이라고 불린다.
먼저 이에 대해서 이해하려면 “직렬화”에 대해서 이해하여야 한다.
직렬화란?
데이터를 전송할 때, 각 프로그램의 언어가 다르다면 데이터를 전송할 수 없다. 정확히는 사용하는 언어의 방식으로 상대 프로그램에 데이터 전송이 불가능하다.
이는 서로 사용하는 자료형이 달라 데이터 간 호환이 안 되기 때문이다. 따라서 데이터를 하나의 양식으로 구조화시키는데, 이게 ‘직렬화’이다.
이 직렬화의 방식은 표준이 정해져 있지 않지만, 대게 XML 방식으로 데이터 구조를 직렬화 시켜 상대 프로그램으로 보내게 된다. 그럼 상대 프로그램은 사용 언어에 맞춰 역직렬화 하여 사용한다.
이런 직렬화 방식이 발전한 것이 “JSON(Java Script Object Notation) - 자바스크립트 객체 표기법” 이다. 즉, 객체 표기법인 {} 이 핵심이다.
JSON은 자바스크립트 내에서는 객체를 표기하는 방법이고, 다른 언어에서는 각 언어 간의 데이터 전송을 위한 직렬화 표기법으로 사용된다.
let obj = {
"id":1001, // int id = 1001;
"name":"Jack",
"kor":100,
"Hello":function() { // 멤버 메서드
console.log("Hello Json")
},
"10":"Ten"
}{}는 객체를 의미한다.“키” : “값”의 형태로 표현한다.- 똑같은 방식으로 멤버 메서드를 만들 수 있다.
- 키로 숫자로 넣을 수 있다. 다만 꺼내서 사용할 때는 표기법이 다르다.
.을 통해 꺼내거나obj[“id”]와 같이 괄호를 통해 꺼낼 수 있다.
obj.Hello(); // 메서드 호출
obj["10"] // Ten
obj.id // 10013) 생성자 사용
자바스크립트에서 모든 함수는 생성자가 될 수 있다. 다만 생성자로 쓰지 않을 뿐이다.
일단 생성자를 사용하기 위해선 다음을 알아야 한다.
- 관례상 생성자의 첫 글자는 대문자를 사용한다.
- 생성자는
new를 통해 객체를 생성해야 한다. - 라이브러리를 만들 때, 생성자 방식으로 만들고 배포한다.
- 멤버 필드와 메서드는
this를 사용해서 만든다.
[ 예시 ]
// 기본형
function MyObject(){}
// 응용
function MyObject(num1, num2) { // 매개변수 설정도 가능하다.
this.num1 = num1; // this를 사용하면 멤버필드가 된다.
this.num2 = num2;
this.plus = function(){
return parseInt(this.num1) + parseInt(this.num2)
}
}
// 객체 생성
let result = new MyObject(20,30);
console.log(result.plus()); // 50