자바스크립트 배열과 객체

1. 배열
배열은 아래 두가지 방법으로 생성할 수 있다.

new Array(1,2,3);

[1,2,3];

두가지 방법에 차이는 없으므로 더 간단한 두번째 방법이 좋다고 생각된다. 참고로 C나 자바같은 다른 언어에서와 달리 중괄호({})가 아닌 대괄호로 ([]) 배열을 생성한다.

각 배열 요소의 접근방법은 다른 언어에서와 동일하다. 참고할 만한 점은 length 요소이다.length 요소에 정수값을 할당하면 실제로 배열 길이가 조정된다. 아래 코드를 실행해 보면 결과를 확인할 수 있다.

var arr = [1,2,3,4];
console.log(arr[3]);
arr.length = 3;
console.log(arr[3]);
arr.length = 4;
console.log(arr[3]);

2. 객체
객체는 아래 두가지 방법으로 생성할 수 있다.

var obj = new Object();
console.log(obj);
obj = {a: 1, b: 2};
console.log(obj);

1) 기존 선언되어있는 클래스(생성함수)를 이용하여 생성할 수 있다. 이 때는 new 연산자를 사용하게 된다.
2) 중괄호를 사용해 객체를 생성할 수 있다.

다른 언어에서와 달리 자바스크립트에서는 기존 생성되어있는 객체에도 속성이나 메서드를 추가할 수 있다.

var obj = {a: 1, b: 2};
console.log(obj);

obj.c = 3;

obj.sayHello = function (name) {

    console.log("Hi, " + name);

}

console.log(obj);

위 코드를 실행시켜 확인할 수 있듯이 단순히 없는 속성에 값을 할당하기만 하면 속성이 생긴다. 이런 특성은 변수 선언과 동일하다. 불편한 점은 기존에 있던 속성이나 메서드를 사요하려 했을 때 오타가 발생하면 새로운 속성이 생기고 오타에 대한 체크가 바로 되지 않아 한참 헤멜 수도 있다. 오타를 조심해야 한다.

test

function helloSyntaxHighlighter()
{
 return "hi!";
}

자바스크립트 변수와 함수

1. 변수

   자바스크립트는 동적 타입 언어다. 그래서 변수의 선언 시 별도의 타입이 없고 모두 var 변수명 으로 선언한다. 

   var variable;
   

   주의할 점은 변수값이나 객체를 참조할 때 오타가 나면 전역변수로 인식해 버린다는 점이다.

   var variable = 0; // variable 변수선언 및 0 할당
   console.log(variabel); // variable을 variabel로 오타. 콘솔에는 undefined가 표시되고 variabel이라는 변수가 선언된다.
   

2. 함수

   함수는 아래와 같이 선언한다.

   // function declare 1
   function functionName(args)
   {
       return 0;
   }
   // function declare 2
   var func = function (args)
   {
       return 0;
   }
   

   declare 2에서 보듯 함수이름은 생략 가능하다. 단 이 경우는 인자로 함수를 전달할 때 아니면 선언한 함수를 다른 코드에서 호출할 수 없게 된다. 그래서 위 코드에서는 별도의 변수에 함수를 담아놓았다.
   또 다른 언어와의 다른점은 args로 선언된 호출 인자는 어떻게 보면 별 의미가 없는 선언일 수도 있다는 점이다. 별도의 변수 타입이 지정되는것도 아니고 인자 목록에 제한이 따로 있는것도 아니기 때문이다. 또 심지어 함수의 인자목록이 선언되지 않아도 arguments라는 속성을 통해 호출 측에서 전달한 매개변수에 접근이 가능하다.

   function test (args){
       alert(args);
       alert(arguments[1]);
   }
   test("test1", "test2");
   

   위 코드에서 test 함수는 args라는 매개변수 하나만 선언하고 있다. 그러나 실제 코드에서는 arguments 속성을 통해 호출측에서 전달하는 두번째 인자에 접근하고 있다. 위 코드를 실행해 보면 test1과 test2 라는 경고창이 각각 나타날 것이다.

자바스크립트 예약어

자바스크립트의 예약어는 아래와 같다.

break	default	function	return	var
case	delete	if	switch	void
catch	do	in	this	while
const	else	instanceof	throw	WITH
continue	finally	let	try
debugger	for	new	typeof

어디 시험을 볼게 아니라면 이런게 있구나 하는 참조 정도로 넘어가면 되겠다. 모든 예약어는 소문자인데 MSDN 페이지에는 자동 번역이 되면서 번역이 된것도 있고 대문자로 변환된것도 있다.

출처 : https://msdn.microsoft.com/ko-kr/library/0779sbks%28v=vs.94%29.aspx

ps : 예약어 목록을 보다보니 좀 생소한 let이라던가with, debugger 같은게 있는데 나중에 알아봐야 할거 같다.

자바스크립트에 대한 생각...

처음 자바스크립트를 봤을 때만 해도 자바스크립트는 그냥 단순한 장난감 정도였다.웹 여기저기 널려있던 스크립트를 긁어와서 배경을 꾸미거나 메세지를 보이는 정도?

그게 넷스케이프와 익스플로러가 하루가 멀다하고 버전업을 해 가면서 전쟁을 벌이던 때니까 벌써 20년 가까이 전에 이야기네. 당시에는 브라우저마다 적용되는 태그도 스크립트도 달라서 각 웹사이트 대문에는 이 사이트는 어떤 브라우저에서 최적화 되었습니다라는 문구를 달아놨어야 했다.

그 이후로 웹은 정말 많은 변화를 겪었고(솔직히 익스플로러가 점유율이 어렇게 떨어질꺼라고 누가 상상이나 했을까) 특히 장난감 취급이나 받던 자바스크립트는 서버용 언어로 사용되는등의 엄청난 발전을 했다. 요즘은 서버쪽 뿐만 아니라 브라우저에서도 REST API를 데이터 소스 삼아 MVC를 구성하는 프레임워크들도 나와 경쟁을 벌이고 있다.

자바스크립트 MVC의 대세는 지금 보면 구글의 Angular.js인거 같다. 프론트 엔드 개발자 구인을 보면jQuery는 기본사양이고 Angular.js가 가장 많이 보이니까. 언젠가는 Angular.js도 다뤄야 하겠지만 일단 처음 배워먹은게 Backbone이니까 이걸 좀 더 파봐야 겠지. 그동안 했던 것들을 좀 정리 해 봐야겠다.

Contact Me