개발자를 위한 JavaScript

in Devlog on JavaScript


대 자바스크립트 시대라고 할 수 있다.

자바스크립트를 쓴지도 오래되었고, 자바스크립트로 풀스택 개발한지도 1년이 되었는데, 단 한번도 이 자바스크립트라는 녀석을 공부해본적이 없다.

필요할 때마다 찾다보니 성에 차지 않고 부족한 게 많아, 이번 기회에 자바스크립트를 공부하며 정리해보았다.

JavaScript

자바스크립트는 웹페이지를 프로그램적으로 제어하기위한 언어다. 웹이 너무나 접근성이 좋고 방대해졌기 때문에 자연스럽게 발전한 케이스라고 할 수 있다.

지금 시대는 웹이 비약적으로 발전하고 웹을 표현해주는 브라우저도 많이 발전했는데, 자바스크립트가 제어하는건 사실 이 브라우저다.

IOS앱 또는 안드로이드 앱, 윈도우 앱, 리눅스앱.. 등등을 만들 때, 그 특징에 맞춰 네이티브 앱을 만들던 것에 비해(물론 요즘엔 ReactNative 같은 게 있지만) 웹은 브라우저만 있으면 어디서든 접근 할 수있다.

적어도 현재는 향후 몇년간은 자바스크립트가 망할거라는 전망이 없다.

웹은 더 방대해질 것이고, 자바스크립트는 충분히 사용하기 좋다. (타입스크립트가 치고올라오고 있긴하지만. 결국 이녀석도 자바스크립트다.)

친 자바스크립트 DB인 몽고DB나 서버로써의 자바스크립트인 Node.js 등 자바스크립트가 웹브라우저에서만 활약하는게 아니라 그 분야가 엄청나게 방대해졌다.

그리고 이녀석이 또 마법같은게, 자바스크립트를 특별히 배우지 않아도 그냥 쓰다보면 ‘저 자바스크립트 할 줄 알아요.’라고 할 수 있게된다. (그만큼 간단하다.)

ECMAScript

사실 자바스크립트가 이렇게 커지게 될 수 있었던 건 Ecma International이라는 기관의 덕이 크다.

자바스크립트가 자주쓰이는데 규칙도 없고해서 여러기업들이 모여서 자바스크립트 표준안을 만든다. 그게 ECMAScript다.

ECMAScript는 ES라고도 불리며 매년갱신되고 있어 현재 ES8이 준비중이다.

함께 알면 좋을 것

이미 앞에 언급했다시피 JavaScript는 웹페이지를 제어하기 때문에 기본적으로 HTML과 CSS를 알면 좋다.

  • HTML - Hyper Text Markup Language의 약자로 웹페이지를 만들고 JavaScript가 직접 제어하는 대상이다.

  • CSS - Cascading Style Sheets로 HTML페이지를 아름답게 만들 때 사용된다고 보면 된다.

변수

변수는 var로 선언한다. var를 생략해도 되지만 예상과는 좀 다른 결과가 나올 수 있다.

== 과 ===

==과 ===은 비교할 때 사용한다. 같으면 true 다르면 false를 반환한다.

===은 타입까지 같은 경우를 체크한다.

alert(1=='1')   //true
alert(1==='1')  //false

===의 사용이 추천된다.

객체

상당히 자주쓰는 개념이 객체이다.

반복문은 아래와 같이 사용한다.

var grades = { 'me': 10, 'you': 20 };
for(key in grade){
    alert(key : grades[key]);
}

모듈

프로그램을 쪼개다보면 결국 기초적인 녀석들로 이루어진 덩어리들이다. 하나의 의미있는 작은 덩어리들을 만들어 여러가지 장점을 누릴 수 있다.

  • 재사용할 수 있다.
  • 어느 부분이 문제인지 금방알 수 있다.
  • 작은 모듈하나를 개선하면 그 모듈을 사용하는 모든 모듈이 개선된다.

arguments

함수에는 arguments라는 객체가 있어서 함수내에서 꺼내쓸 수 있다.

function a(){
    var i;
    for(i=0;i<arguments.length;i++){
        alert(arguments[i]);
    }
}

a(1,2,3);

클로져

클로져는 외부함수의 지역변수가 소멸된 후에도 내부함수가 외부함수의 변수에 접근 할 수 있는 방식을 말한다.

var arr = [];

for(var i =0; i<5; i++){
    arr[i] = function(){
        return i;
    }
}

for(var index in arr){
    alert(arr[index]());
}

이 경우 출력값은 5,5,5,5,5 이다.

이유는 함수가 arr[i]에 배당된 것이라서 출력할 때 결국 마지막 i 값을 리턴하기 때문이다.

0,1,2,3,4를 출력하고 싶다면 아래처럼 해야한다.

var arr = [];

for(var i =0; i<5; i++){
    arr[i] = function(a){
        return function(){
            return a;
        }
    }(i);
}

for(var index in arr){
    alert(arr[index]());
}

나 같은 경우는 클로져 개념이 들어간 프로그램은 여태까지 단 한번도 한번에 작성한 적이 없다.

꼭 한번 값이 이상한걸 보고 고친다.

function.apply

function.apply(맥락,인자)

함수를 맥락의 함수로 만든다.

맥락에 객체를 넣는다면 객체의 함수로 사용하는 것 처럼 된다.

자주쓰는 Math함수

Math.pow(m,n); // m의 n승
Math.round(f);  // f를 반올림
Math.ceil(f);  // f를 올림
Math.floor(f);  // f를 내림
Math.sqrt(n);  // n의 제곱근
Math.random();  // 0 과 1.0사이의 난수 발생

객체지향적 자바스크립트는 따로 작성하려한다.

2023년 새해에는 성장하고 함께하고 싶다면?

Pre A 단계 이상의 스타트업 C 레벨들이 모여서 커뮤니티를 만들었습니다. 같이 스터디하고 친해질 일잘러를 찾습니다.


© 2017. by isme2n

Powered by aiden