[새싹 성동 2기] 3. Javascript 문법 기초(1)

해당 과정은 생성형 AI를 활용한 보안전문가 양성 과정이라는 이름에 맞게, AI 활용을 위한 React 활용법을 배운다.

React를 이해하려면 Javascript(JS)에 대한 기본적인 이해가 있어야 하기에 JS 문법 기초 또한 함께 학습한다.

 

목차

 1.  JS의 특징       

 2. 데이터 타입     

3. 문자열             

4. 변수 선언 방법

 

 

[1] JS의 특징

- 주로 웹 브라우저에서 실행되는 언어로 시작했지만, Node.js를 통해 서버에서도 실행이 가능해졌음.

- 웹 개발에 최적화된 언어로 자리잡았고, 브라우저 내에서 HTML과 CSS를 조작하는 등 사용자와의 상호작용을 처리하는데 주로 용됨

- 동적 타입(Dynamic Type) 언어로, 변수에 데이터를 미리 지정하지 않아도 되고, 변수에 할당된 값에 따라 타입이 결정됨

- 변수를 선언할 때 타입을 지정해야하는 정적(Static) 타입 언어들에 비해 빠른 개발이 가능하지만 타입 오류가 발생하기 쉬움

 

 

[2] 데이터 타입

// 변수에 데이터를 지정하지 않아도
let a = 8;
let b = "프로젝트 '문'";                            // String 타입은 '' 도 가능하고
let c = 'Project "Moon"';                          // ""도 가능함
let isKimJiHoonGod = true;
let lc = null;
let a_Company;
let pm_Games = ["Lobotomy", "LOR", "Limbus"];
let manager = { name: "단테", nickname: "시계 대가리", "favorite members": ["이상", "이스마엘"] };

// 변수에 할당된 값에 따라 타입이 결정됨
console.log(a, typeof a);                           // 8 number
console.log(b, typeof b);                           // 프로젝트 '문' string
console.log(c, typeof c);                           // Project "Moon" string
console.log(isKimJiHoonGod, typeof isKimJiHoonGod); // true boolean
console.log(lc, typeof lc);                         // null object
console.log(a_Company, typeof a_Company);           // undefined undefined
console.log(pm_Games, typeof pm_Games);             // (3) ['Lobotomy', 'LOR', 'Limbus'] object
console.log(manager, typeof manager);               // {name: '단테', nickname: '시계 대가리', favorite members: Array(2)} object

 

console.log(n, typeof n); 을 활용하면 n에 할당된 변수의 값과 n이라는 변수의 데이터 타입을 반환한다.

+ undefined 타입은 변수가 선언만 되고 값은 할당되지 않은 상태를 의미한다.

+ object 타입은 다양한 데이터 타입을 순서에 상관없이 모아 놓은 타입으로 key 와 value로 구성되어 있으며, key에는 문자열만 가능하고 value에는 모든 데이터 타입이 올 수 있다.

//  요소 접근방법
console.log(pm_Games[0]);                           //  Lobotomy
console.log(pm_Games[pm_Games.length - 1]);         //  Limbus
console.log(manager.name);                          //  단테
console.log(manager["nickname"]);                   //  시계 대가리
console.log(manager["favorite members"]);           //  (2) ['이상', '이스마엘']
//  console.log(manager."favorite members");    value가 배열인 경우에는 변수이름.keyname 으로 호출 불가

 

(크게 중요하진 않지만 재밌었던 것)

java에서 배웠던 기억으로 나도 모르게 위의 2번 째 코드를 console.log(pm_Games[Array.length - 1]); 로 작성했더니 첫 번째 코드가 반환되었었다. Array.length - 1 이 0을 반환했다는 의미인데 Array를 선언하지 않았을 때의 Array.length가 1이라는 사실을 알 수 있었다.

 

 

[3] 문자열

위의 코드 내용에서 본대로 string 타입은 ' ' 와 " " 을 둘 다 사용할 수 있으며, 코드 실행에는 차이가 없음

하지만 다양한 따옴표를 혼용해서 사용하면 가독성이 떨어지기 때문에 아래와 같은 가이드라인이 있음

//  1.문자열 내 따옴표 포함 시 편리한 선택

//  1-1.큰따옴표 안에서 작은따옴표를 사용할 때
let lobotomy = "'beautiful' game!";

//  1-2.작은따옴표 안에서 큰따옴표를 사용할 때
let limbusCompany = '"wonderful" game!';

//  2.프로젝트 내에서 하나의 스타일로 통일하여 관리하는 것을 추천
//  3.문자열 내에서 같은 종류의 따옴표를 사용할 때는 역슬래시(\)를 사용하하여 이스케이프 처리
let lobotomy = "\"beautiful\" game!";
let limbusCompany = '\'wonderful\' game!';

//  4.템플릿 문자열(template literal, `) 사용
let LOR = `unplaying "game"`;

//  템플릿 문자열을 이용하면 변수 또는 연산의 결과를 문자열에 반영하는 것이 용이함
let name = "Project Moon";
let age = 8;
//  템플릿 문자열 미사용
let hello1 = '회사 이름은 ' + name + ' 이고, 올해로 ' + age + '주년 이며, 내년에는 ' + (age + 1 ) + '주년 입니다.';
console.log(hello1);    //  회사 이름은 Project Moon 이고, 올해로 8주년 이며, 내년에는 9주년 입니다.
//  템플릿 문자열 사용
let hello2 = `회사 이름은 ${name} 이고, 올해로 ${age}주년 이며, 내년에는 ${age + 1}주년 입니다.`;
console.log(hello2);    //  회사 이름은 Project Moon 이고, 올해로 8주년 이며, 내년에는 9주년 입니다.

 

 

[4] 변수 선언 방법

js에는 let, var, const 라는 3가지의 변수 선언 방법이 있다. 각각의 차이점을 이해하기 위해 먼저 '호이스팅'이라는 개념에 대해 알고 가자.

 

- 호이스팅(hoisting) : 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상

 

//  1-1.변수 호이스팅 - var
console.log(a);  //  undefined
var a = 100;
console.log(a);  //  100

//  위의 코드는 아래와 같이 해석되어 실행됨
var a;
console.log(a);
a = 100;
console.log(a);

 

첫 번째 줄의 console.log(a); 에서는 a라는 변수가 선언되지 않았는데 해당 변수의 값을 호출하였기에 Error가 반환되어야 할 것 같지만!! 실제 값은 undefined 라고 반환된다.

이는 자바스크립트가 코드 실행 전에 변수 선언을 맨 위로 끌어올려(호이스팅) 미리 예약해둔 것이다.

호이스팅된 변수는 메모리에 등록되지만, 실제로 값이 할당되지 않았기 때문에 undefined로 초기화된 것이다.

 

//  1-2.변수 호이스팅 - let, const
console.log(a);     //  ReferenceError: Cannot access 'a' before initialization
let a = 100;
console.log(a);     //  100

// 위 코드는 다음과 같이 동작
let a;              //  TDZ 보관
console.log(a);     //  
a = 100;            //  TDZ 해제 => 참조가 가능
console.log(a);

 

let 과 const 는 호이스팅되어도 해당 변수가 TDZ(Temporal Dead Zone)에 머물며 초기화되지 않는다.

 

변수 호이스팅 규칙 요약

 

 

//  2-1.함수 호이스팅 - var
hello();       			 //  TypeError: hello is not a function

var hello = function () {
    console.log('Hello');
};

hello();			 //  Hello

// 위의 코드는 아래와 같이 동작 
var hello;		 	 //  선언만 호이스팅되고, 초기화는 x

hello();        		 //  hello가 아직 함수가 아니라 undefined 상태이기에 타입에러 오류 발생

hello = function () {
    console.log('Hello');
};

hello();

 

함수 호이스팅의 경우도 마찬가지로, 자바스크립트 엔진은 var hello 선언을 최상단으로 끌어올리고, hello는 선언만 되고 값이 할당되지 않았기에 undefined 상태이다. js는 undefined 값을 함수처럼 호출할 수 없기 때문에 타입에러가 발생한다.

 

 

//  2-2.함수 호이스팅 - let, const
hello();                  //  ReferenceError: Cannot access 'hello' before initialization

let hello = function () {
    console.log('Hello');
};

hello();                  //  Hello

// 위의 코드는 아래와 같이 동작 
var hello;                //  TDZ 보관

hello();

hello = function () {
    console.log('Hello'); //  TDZ 해제
};

hello();

 

let 과 const 로 선언한 변수는 호이스팅되지만 초기화되기 전에는 접근할 수 없으므로, 초기화 전 호출 시 ReferenceError가 발생함.