1인 1프로젝트 : 4일차 (1분발표, Javascript 공부)

Today's Work

---

지금까지 계획한 것을 친구들 앞에서 발표하는 시간을 가졌다. 웹해킹에서 JS와 파이썬의 중요성을 느껴 이 연구주제를 잡았고, 오늘부터 틈틈히 Javascript부터 시작해서 공부를 하려고 한다.

우선, C언어의 기본 문법을 잘 알고 있었고, 작년에 응용프로그래밍 화면 구현 시간에 조금 공부를 해봤기 때문에, 어느 정도 연산자나 조건문, 반복문 등은 문제 없이 할 수 있다.

 

다만, JS에서만 허용하는 문법들이나 새로운 개념, 그리고 내장함수들을 중점으로 공부한다면, 좀 더 구체적으로 활용할 수 있지 않을까 생각하여 간단한 변수의 형부터 시작하여 클래스, 비동기 등까지 공부해볼 생각이다.

 

 

Javascript의 변수와 상수

---

JS에서 사용하는 변수에는 var, let, const 가 있다.

 

var a = "hello";
let b = "world";
const c = 3.14;
console.log(a + b);

 

var과 let은 엄청나게 큰 차이점이 두드러지진 않지만, var은 "오래된 스크립트에서 많이 찾아볼 수 있다".

ko.javascript.info/var 에서 참고하였는데, 오래된 var의 특이한 특성을 2가지로 꼽을 수 있다.

 

첫번째는 var을 함수 내부에서 어디든 선언하면 오류가 생기지 않고 그대로 실행된다는 것이다.

예를 한번 들어보자.

 

function a() {
    hello = "World";
    
    console.log(hello);
    
    var hello;
}

다음과 같이 아래에 변수를 선언해도 그대로 실행되는 것을 볼 수 있다.

 

두번째 특성은, 다음 사진으로 확인해보자.

 

var 형식은 다음과 같이 { } 로 둘러쌓인 부분으로 선언을 했을 경우, 그 밖에서도 접근이 가능하다.

이것을 함수 스코프나 전역 스코프라고 부른다.

 

그러나, let은 그렇지 못하다. let은 "블록 레벨 스코프" 라고 한다.

 

이러한 var의 특성을 블록 레벨 스코프 형태로 만들기 위해 함수를 ( ) 로 묶어 이름 지정 없이도 실행 할 수 있도록 설계하였다. 이것을 "즉시 함수 실행 표현식(Immediately-Invoked Function Expressions)" 이라고 한다.

 

이 방법은 내가 며칠 전에 웹해킹 문제를 풀어보다가 알게 된 사실인데, 숏코딩에 매우 유용한 부분이지만 현대의 자바스크립트에서는 거의 사용하지 않는 방법이라고 할 수 있다.

 

대다수는 위의 방법을 많이 사용하겠지만, 두번째 사진과 같이 함수를 괄호로 묶어주고 바로 ()로 실행을 해주면 정상적으로 실행이 되는 것을 확인할 수 있다.

 

// IIFE를 만드는 방법
 
(function() {
  alert("함수를 괄호로 둘러싸기");
})();
 
(function() {
  alert("전체를 괄호로 둘러싸기");
}());
 
!function() {
  alert("표현식 앞에 비트 NOT 연산자 붙이기");
}();
 
+function() {
  alert("표현식 앞에 단항 덧셈 연산자 붙이기");
}();

다음과 같은 방법으로 IIFE를 만들 수 있다고 한다. 참고하는 것이 좋을 듯 하다.