공부내용 정리 :: JavaScript 기초 1

1. 서론

 본 자바스크립트 학습에 대한 내용은 이전 자바스크립트를 공부했던 내용을 재 복습하는 의미로서 다른 언어를 학습하며 잊었거나 놓쳤던, 자바스크립트의 내용을 기록하기 위함으로서 작성하였다.

 또한 본 내용은 생활코딩의 자바스크립트 언어와 웹에서의 자바스크립트 강의를 수강한 후, 개인적인 기록용으로 작성한 내용이기 때문에 참고만 하면 좋을듯 하다.

 

2. 자바스크립트와 웹

 본래 자바스크립트 라는 언어는 브라우저에서 동작하는 언어이기 때문에, 자바스크립트를 사용하고 실습하기 위해서는 웹 브라우저(Internet Explorer, Microsoft Edge, Chrome, Safari ...)환경 하에서 진행하여야 한다. 

 각 브라우저에는 개발자 도구라는 것이 있는데, 이 도구를 이용한다면 자바스크립트 개발에 큰 도움을 받을 수 있다.

 

3. 객체 (Object)

 본 장에서는 자바스크립트의 객체에 대한 복습을 진행하였다. 본 장에서의 객체는 객체지향 패러다임에서의 객체가 아니라, 데이터를 묶어서 다루는 데이터 타입의 객체를 다룬 것이다.

 

 자바스크립트에서의 객체는 다른 언어의 딕셔러니(Dictionary), 맵(map), 연관배열ㄹ(Asssociative Array) 과 상등한 기능을 갖고 있다.

 

  배열(Array)에서는 값이 [ ] 안에 나열이 되어있었지만, 객체(Object)에서는 값이 { } 안에 나열이 된다.  여러가지의 값을 나열하여 다룬다는 점에서는 공통점을 갖고있지만, 완전히 다른 데이터 타입이다.

 

 객체를 만드는 법은 다음과 같다.

 

// 객체 생성법 1 
var priceList = { 'apple' : 1000 , 'grape' : 1500 , 'mango' : 2000 };

// 객체 생성법 2 
var priceList = {};
priceList['apple'] = 1000;
priceList['grape'] = 1500;
priceList['mango'] = 2000;

// 객체 생성법 3
var priceList = new Object();
priceList['apple'] = 1000;
priceList['grape'] = 1500;
priceList['mango'] = 2000;

 

 상기 코드블럭과 같이 객체는 1. 변수를 선언하고 객체를 생성하여 직접 할당하는 방법, 2. 비어있는 객체를 변수에 할당하고, 그 객체안에 객체명[키 이름] = 값; 의 형식으로 키와 값을 추가하는 방법, 3. 변수에 생성자로서 객체 인스턴스를 할당한 후, 2번 방법과 마찬가리고 키와 값을 추가하여 생성할 수 있다.

 

 그렇다면 이렇게 생성한 객체의 값은 어떻게 호출할 수 있을까? 배열은 저장된 값에 자동으로 부여되는 색인번호(Index)로서 호출할 수 있었지만, 객체는 다른 방식을 채택하고 있다.

 

var priceList = { 'apple' : 1000 , 'grape' : 1500 , 'mango' : 2000 };

priceList['apple'] // 1000

 

 객체는 객체 내부에 저장되어있는 값을 호출할 때, 그 값에 대응되는 키(Key)가 필요하다. 배열은 순서에 따라서 값을 가져올 수 있었던 방면에, 객체는 값에 이름을 대응하여 저장하였기 때문에, 해당하는 값에 대응하는 이름(key)만 기억하고 있으면 그 값을 호출하여 사용할 수 있게 되는 것이다.

 

3-1 객체의 제어

 객체도 배열과 마찬가지로, 반복문으로서 제어할 수 있다. 여기서 제어라는 것은 객체를 활용하여 사용하는 것을 의미한다. 반복문으로서 객체를 제어하는 코드는 다음과 같다.

 

var priceList = { 'apple' : 1000 , 'grape' : 1500 , 'mango' : 2000 };

for ( key in priceList  ) {
    console.log("key : " + key + " value : " + priceList[key]);
    }
    
/*
key : apple  value : 1000
key : grape  value : 1500
key : mango  value : 2000
*/

 

 priceList라는 객체안에 값이 코드와 같을 때, 반목문에서 지역변수를 하나 선언해주고, 지역변수에 할당할 객체를 표기해준 뒤 코드를 쓰면 작동하는 식으로 구성되어있다.

 

for ( 지역변수 in 객체이름 ) {
    반복적으로 실행할 명령
    }

 

 객체 안에  있는 key가 지역변수로 흘러들어가 for문의 코드블럭에 해당되는 부분의 명령을 수행하고 수행이 끝나면 다시 다음 key가 자동으로 흘러들어가 코드블럭이 실행되는 구조로 구성되어 있는 것이다. 상기의 for-in문을 배열에 사용하면 다음과 같은 결과를 반환받을 수 있다.

 

var myArray = [ 'a', 'b', 'c' ]

for ( key in myArray ) {
    console.log(name);
    }
    
/*
0
1
2
*/

 

 객체에서는 value에 맞는 key를 하나씩 가져와서 실행하였다면, 배열에서는 그에 상응하는 값인 인덱스가 하나씩 와서 실행이 되는 결과를 볼 수 있는 것이다.