💙 들어가며
JavaScript의 데이터 구조는 어떤 것들이 있을까?
그리고 사용하는 방법은 어떻게 될까?
✏️ 학습내용 정리
#Array
우리는 자바언어를 통해 데이터구조를 다양하게 함으로써
코드를 훨씬 더 효율적으로 짤 수 있다는 것을 배웠다.
자바 스크립트에서는 어떻게 데이터들을 엮어낼 수 있을까?
그 중에 하나인 Array 객체가 있는데, 자바와 마찬가지로 배열을 의미한다.
Array 객체가 가지는 기능은 아래와 같다. 하나씩 살펴보자.
#인덱스를 이용한 데이터 관리: List
자바스크립트는 가변길이의 공간을 가지고 있다.
그래서 자바처럼 처음부터 배열의 길이를 정할 필요도 없고,
그때그때 필요한 데이터를 입력할 수 있다.
✅ Array
var nums = new Array();
nums[3] = 4;
console.log(nums);
console.log(nums[0]);
console.log(typeof nums[0]);
console.log(nums.length);⭕ 실행결과:
그리고 중간에만 값을 넣어도 앞에 부분이 비워져서 채워진다. (비워진 부분은 당연히 undefined)
총 배열의 갯수는 비어있다고 해도 undefined가 채워진 상태이기 때문에
배열의 길이는 4이다.
#배열 객체 초기화
Array()의 소괄호안에 들어가는 값의 개수가 1개이면 초기 배열의 크기를 나타낸다.
(EX)
new Array(5);
길이가 5, 값은 다 undefined
Array()의 소괄호안에 들어가는 값의 개수가 2개이상이면 배열의 초기값으로 들어간다.
(EX)
new Array(5, 10, 21);
길이는 3, 값은 5, 10, 21
Array는 자료형이 없기 때문에 숫자와 문자등이 혼용되어서 들어갈 수 있고,
2차원 배열처럼 배열안에 배열이 들어갈 수도 있다.
이렇게 여러 자료형이 하나의 배열 안에서 혼용될 수 있기 때문에
꺼내 쓸 때 늘 타입을 확인해야 하는데, 그러면 2차원 배열의 경우에는 자료형을 어떻게 확인할까?
Java와 같이 인덱스를 이용하여 확인한다.
한 번 콘솔화면에서도 출력해보자.
✅ Array
var nums = new Array();
nums[3] = 4;
console.log(nums);
console.log(nums[0]);
console.log(typeof nums[0]);
console.log(nums.length);
console.log("---------------------------------------");
var nums = new Array(5, 10, 21, "hello", new Array(2, 3, 4));
console.log(nums[4][1]);
console.log(typeof nums[4][1]);
console.log(nums[4]);
console.log(typeof nums[4]);
console.log(nums);
console.log(typeof nums);⭕ 실행결과:
#Stack [LIFO(Last In First Out)]
💡 사용함수: push, pop
⭕ 예시: 페이지 뒤로가기
그런데 자바 스크립트에서 Array는 인덱스가 꼭 필요한 것은 아니다. 무슨 소리일까?
바로 자료구조 때문인데 가장 첫번째 녀석인 stack형태에 대해서 먼저 배워보자.
stack형태란 위로 적재된다는 뜻이고 LIFO의 형태를 띈다. (수직적 저장 개념)
(마지막에 들어온 녀석이 가장 먼저 나온다.)
다행인것은.. 이 구조를 우리가 구현할 필요 없이 이미 Array가 구현하고 있어서
바로 push(넣기) 혹은 빼기(pop)을 사용하면 된다!
✅ Array data structure
stack : LIFO(Last In First Out)
var nums = new Array();
nums.push(1);
nums.push(21);
nums.push(30);
nums.push(19);
console.log(nums);
var outNum = nums.pop();
console.log(outNum);
console.log(nums);
console.log("---------------------------------------");⭕ 실행결과:
#Queue [FIFO(First In First Out)], buffer
💡 사용함수: push, shift
⭕ 예시: 냉장고 선입선출
stack과 달리 queue는 먼저 들어간 녀석을 먼저 뺀다. (수평적 저장 개념)
때문에 이것을 buffer라고 부르기도 한다.
값을 넣을 때는 (push) 뺄 때는 밀려나간다는 뜻으로 (shift)를 사용하면 된다.
✅ Array data structure
queue : FIFO(First In First Out)
var nums = new Array();
nums.push("그저께 바나나");
console.log(nums);
nums.push("어제 바나나");
console.log(nums);
nums.push("오늘 바나나");
console.log(nums);
var banana = nums.shift();
console.log(banana);
console.log(nums);
console.log("---------------------------------------");⭕ 실행결과:
#DeQueue [Double-Ended Queue], buffer
💡 사용함수: push, pop, shift, unshift
⭕ 예시: 페이지 앞으로 가기, 뒤로 가기
수평적 저장개념인 buffer가 있기 때문에 Queue에서 좀 더 나아간
양 방향으로 데이터를 출입시킬 수 있는 Dequeue라는 것이 있다.
즉, 기본적으로 queue는 buffer이다. (수평적 저장 개념)
그런데 방향이 양쪽이 되는 것이다.(값을 양쪽에서 꺼낼 수 있는 buffer)
먼저 넣은 것을 먼저 빼거나(FIFO) 나중에 넣은 것을 먼저 빼는 것(LIFO) 둘 다 가능하다.
#배열 객체에서 데이터 삭제/수정
💡 사용함수: splice(어떤 인덱스부터(포함), 삭제희망개수, 추가1, 추가2, ..., 추가n)
인덱스 뒤에 "삭제희망개수"을 안 적으면 그 인덱스포함 맨 뒤에 까지 다 날려버린다.
값을 넣고 꺼내는 것 말고 삭제하거나 수정은 어떻게 해야 할까?
배열에서는 delete나 remove가 아니라 splice라는 특이한 이름의 함수를 사용한다.
splice는 두개의 끈을 가지고 꼰다는 의미를 가지고 있는데,
때문에 이 함수로 끊어진 것을 이어붙이지만 끊어내기도 할 수 있다. (2가지의 기능이 다 있는 것)
✅ Array manipulation
데이터를 삭제해보자.
var nums = new Array(1,2,3,4,5,6);
console.log(nums);
nums.splice(3, 1);
console.log(nums);⭕ 실행결과:
3번 인덱스부터 1개만 지워졌으니 4만 지워진다.
이어붙이기도 가능하다. 이때 인자를 3개 이상 써야 하는데
splice(조정할 인덱스, 삭제할 개수, 추가할내용 1, 추가할내용2, ....., 추가할내용n)과 같이 작성한다.
만약 삭제하지 않고 추가만 한다면 2번째 인자를 0으로 하면 된다.
✅ Array manipulation
데이터를 수정/추가해보자.
var nums = new Array(1,2,3,4,5,6);
console.log(nums);
nums.splice(3, 0, 7, 8 ,9, 10);
console.log(nums);⭕ 실행결과:
3번 인덱스부터 0개를 지우고 중간에 7, 8, 9, 10을 추가한다.
첫번째와 두번째 인자는 무조건 인덱스와 몇 개 지울지를 나타낸다는 것을 명심!
중간에 배열을 넣을 수도 있다.
✅ Array manipulation
배열 데이터를 추가해보자.
var nums = new Array(1,2,3,4,5,6);
console.log(nums);
nums.splice(3, 0, new Array(7, 8, 9, 10));
console.log(nums);⭕ 실행결과:
splice(3, 0, 뒤에는 추가하는 내용)
항상 기억할 것은 인자의 앞에 2개는 시작 인덱스와 삭제할 개수이다.
그러면 2를 지우고 100을 넣는 코드는 어떻게 작성하면 좋을까?
인자를 잘 활용해서 아래 기능도 처리해보자.
✅ Array manipulation
2를 삭제하고 100을 추가해보자.
var nums = new Array(1,2,3,4,5,6);
console.log(nums);
nums.splice(3, 0, new Array(7, 8, 9, 10));
console.log(nums);
// 숫자 2를 100으로 수정
// 수정코드
nums.splice(1, 1, 100);
console.log(nums);⭕ 출력결과:
#Object 객체(Expand 확장)
💡자바스크립트 ES5에서는 객체를 동적으로 정의한다. 실행되면서(동적) 정의된다.
자바스크립트에서는 우리가 객체를 정의하지 못한다.
왜냐하면 객체를 정의하는 class라는 녀석이 존재하지 않기 때문이다.
때문에 지금 설명할 Object는
객체지향처럼 데이터를 정의하고 속성을 붙여서 동적으로 뺐다 붙였다 할 수 있는 도구는 맞지만,
완전히 객체지향의 개념을 가지고 있지는 않다.
(EX)
다음과 같이 exam이라는 변수를 지정하고 다음과 같이 사용하고 싶다.
var exam = new Object();
exam.kor =
exam.eng =
exam.math =
그렇다면 어딘가에 (kor, eng, math라는 속성을 가진) Object라는 객체의
데이터구조가 정의되어 있다는 뜻(?)으로 느껴지는데
따로 Object객체의 데이터 구조를 정의하지 않았는데 이렇게 사용이 가능할까?
대입해보면 다음과 같은 결과가 나온다.
var exam = new Object();
console.log(exam);
exam.kor = 30;
console.log(exam);
exam.eng = 40;
console.log(exam);
exam.math = 50;
console.log(exam);
console.log(exam.kor);⭕ 실행결과:
kor, eng, math라는 속성과 함께 값이 들어갔고
kor를 호출하면 30이라는 값이 나온다!
출력한 결과와 화살표를 눌러서 나오는 밑의 내용은 왜 다를까?
{}, {kor: 30}, {kor: 30, eng: 40}, {kor: 30, eng:40, math: 50}의 화살표를 열어보면 안에 내용이 다 똑같다.
화살표 밑에 나오는 내용은 현재 참조하고 있는 것을 나타내는 것이다.
Object는 동적이기 때문에 출력당시에는 {}, {kor: 30}, {kor: 30, eng: 40}, {kor: 30, eng:40, math: 50}이지만
현재는 참조하고 있는 것의 최종버전을 인식해서 참조하기 때문이다.
결국 최종 버전을 참조하는 형태로 나오기 때문에 다 똑같은 것!
혹시라도 대/소문자를 잘못 기입하면 다른 값으로 들어가니 주의하기ㅋㅋㅋㅋ
#Object 속성 사용하기
데이터구조를 미리 만들어두지 않았어도 생성하면서 동적으로 만들 수 있는 자바 스크립트.
생성방식에는 어떤 것들이 있을까?
앞서 했던 것처럼 쩜(. )을 찍어서 연산을 할 수도 있고,
혹은 대괄호[] 를 통해서 원하는 구조를 만들 수도 있다.
특히, 대괄호를 통해서 넣으면
자바에서 인덱스처럼 대괄호 안에서 연산을 하거나 값을 지정해서 넣을수도 있기 때문에 활용도가 높아진다.
그러면 다음과 같이 3가지 방법으로 속성을 추가할 수 있겠다!
var exam = new Object();
①번 방법
exam.kor = 30;
②번 방법
exam["eng"] = 40;
③번 방법
var colName = "math";
exam[colName] = 50;
//출력해보기
console.log(exam["kor"]);
console.log(exam.eng);
console.log(exam.math);⭕ 출력결과:
어떻게 속성을 추가하든 혹은 어떤 방법으로 속성을 출력하든 상관없이
모두 동일하게 값을 추가하고 출력할 수 있다!
#속성을 삭제하는 delete
아까는 splice라는 함수를 이용해서 배열의 데이터를 조정하고 삭제하는 방법을 실습했는데,
Object에는 delete라는 함수가 있다.
그런데 특이한 점은 이 delete라는 녀석으로 Object안에 있는 데이터를 삭제했다고 해도,
값을 확인하고 싶어서 다시 그 데이터를 호출하면 undefined가 나온다.
undefined가 나온다는 것은 값만 없을 뿐 형식이 있다는 뜻인데 잉? 뭔가 이상하다.
(EX)
exam.eng를 삭제하고 exam.eng를 출력하면 undefined가 나온다??
그런데 출력해보면 eng라는 속성이 나오지는 않는다.
(만약 실무에서 이런 일을 발견한다면... delete를 찾기 위해 삼만리를 떠날수도...)
ES5는 정말 주의하면서 사용해야겠다.
💙 마치며
1.
자바에 비해서 자바 스크립트는
자유도가 굉장히 높은 것 같다.
처음에는 마냥 좋게 느껴졌는데,
모호해지는 경계가 확실하지 않으니
불안한 마음이 커진다..ㅎ
왜 고슬링이 C++에서의 기능을 줄이고
보수적인 형태로 자바를 만들었는지
아주 0.00001% 이해해본 척 할 수 있었다.
2.
자바 스크립트에서는 콘솔창이 브라우저이다.
너무 신기하다!
이클립스야 잠시 안녕...
