JavaScript 기초 - 시작, 변수

1. 자바스크립트란?

• 스크립트 언어 (응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 가리킨다)
• 인터프리터 언어 (프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말한다)

node.js

Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다.

내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하며 이를 통해 웹 서버의 동작에 있어 더 많은 통제를 가능케 한다.

ko.wikipedia.org/wiki/Node.js

electron 

원래 웹 애플리케이션을 위해 개발된 프런트엔드와 백엔드 구성 요소를 사용하여 데스크톱 그래픽 사용자 인터페이스 애플리케이션의 개발을 가능케 한다: 백엔드로는 Node.js 런타임을, 프론트엔드로는 크로미엄을 사용한다. 일렉트론은 여러 저명한 오픈 소스 프로젝트를 뒷받침하는 주요 GUI 프레임워크이며, 이 프레임워크를 사용한 프로젝트로는 깃허브의 아톰, 마이크로소프트의 비주얼 스튜디오 코드 소스 코드 편집기, 그리고 라이트 테이블 IDE, 또 디스코드 채팅 서비스를 위한 프리웨어 데스크톱 클라이언트 등이 있다.

ko.wikipedia.org/wiki/%EC%9D%BC%EB%A0%89%ED%8A%B8%EB%A1%A0_(%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC)

ionic

하이브리드 모바일 앱 개발을 위한 완전 오픈 소스 SDK이다. 최초 버전은 2013년에 앵귤러JS와 아파치 코도바로 제작되었지만 최신 버전은 앵귤러, 리액트나 Vue.js와 같은 어떠한 유저 인터페이스 프레임워크라도 고를 수 있도록 웹 컴포넌트의 하나로서 재제작되었다. 이는 또한 사용자 인터페이스 프레임워크가 전혀 없는 아이오닉 구성요소를 사용할 수 있다.아이오닉은 CSS, HTML5, 그리고 Sass와 같은 웹 기술을 사용하여 현대적인 웹 개발 기술과 관행을 기반으로 한 하이브리드 모바일, 데스크톱 및 프로그레시브 웹 앱을 개발하기 위한 도구와 서비스를 제공한다. 특히, 모바일 앱은 이러한 웹 기술로 제작한 다음 코도바나 캐파시터를 이용해 네이티브 앱 스토어를 통해 배포하여 기기에 설치할 수 있다.

ko.wikipedia.org/wiki/%EC%95%84%EC%9D%B4%EC%98%A4%EB%8B%89_(%EB%AA%A8%EB%B0%94%EC%9D%BC_%EC%95%B1_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC)

nativescript

NativeScript is an open-source framework to develop mobile apps on the Apple iOS and Android platforms. It was originally conceived and developed by Progress. NativeScript apps are built using JavaScript, or by using any programming language that transpiles to JavaScript, such as TypeScript. NativeScript supports the Angular and Vue JavaScript frameworks. Mobile applications built with NativeScript result in fully native apps, which use the same APIs as if they were developed in Xcode or Android Studio. Additionally, software developers can re-purpose third-party libraries from CocoaPods, Maven, and npm.js in their mobile applications without the need for wrappers.

en.wikipedia.org/wiki/NativeScript

react native

리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다. 안드로이드, iOS, 웹, UWP용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 한다. 완전하지 않은 Qt 포팅 또한 존재한다

ko.wikipedia.org/wiki/%EB%A6%AC%EC%95%A1%ED%8A%B8_%EB%84%A4%EC%9D%B4%ED%8B%B0

 

---

2. 다양한 JavaScript Runtime

ECMA Script는 표준화된 스크립트 프로그래밍 언어.

 자바스크립트를 표준화하기 위해 만들어졌다. 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다. ECMA스크립트는 웹의 클라이언트 사이드 스크립트로 많이 사용되며 Node.js를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있다.

 

---

3. 실습을 위한 준비

 Node.js (nodejs.org/ko/)

Node.js

다운 후, 터미널에서 정상적으로 설치되었는지 확인

// 설치된 버전확인
node -v

 

Visual Studio Code 설치

Chrome -> 도구 더 보기 -> 개발자 도구 (Ctrl + Shict + I)

 

---

4. Expression Statement

Expression

• 값을 만들어 내는 간단한 코드를 표현식 이라고 한다.
• 표현식은 값을 만들어내기 때문에 함수의 인자로 사용할 수 있다.

Statemenrt

• 하나 혹은 여러개의 표현식이 모여 문장을 이룬다.
• 모든 표현식은 문장이 될 수 있다.
• (보통) 문장의 끝에는 세미콜론(;)을 붙인다.
• 조건문, 반복문도 문장이다 (이 경우에는 마지막 }뒤에 세미콜론을 붙이지 않는다.
• 문장들이 모여 프로그램이 된다.

 

---

5. Keywords, Reserved Words

Keywords

• 자바스크립트에서 특정한 목적을 위해 사용하는 단어
• 이러한 키워드들은 예약어로 지정되어 있다.
• ex) var(변수를 선언할 때 사용하는 키워드)

Reserved Words

• 프로그램을 작성할 때, 변수명, 함수명 등 이름으로 사용할 수 없는 단어

Reserved Keywords

• 이미 특정한 목정을 위해 사용하기 때문에 사용할 수 없는 예약어

Future reserved keywords

• 앞으로 특정한 목적을 위해 사용할 가능성이 있어서 사용할 수 없는 예약어

 

---

6. Identifier

식별자

• 코드 내의 변수, 함수, 혹은 속성을 식벽하는 문자열
• '유니코드 문자', '$', '_', '숫자(0-9)' 를 사용할 수 있지만, 숫자로 시작할 수는 없다.
• '예약어;는 사용할 수 없고, '공백 문자'도 사용할 수도 없다.
• 프로그램에서 사용하는 변수나 함수의 이름을 짓는 것은 언제나 어려운 일이다.
• 의미없는 이름은 사용하지 않고, 역할에 맞는 적절한 이름을 짓도록 해야한다.

 

---

7. Comments

주석

• 소스 코드에서 프로그램에 영향을 주지 않고, 무시되는 부분
• 보통은 소스코드를 이해할 수 있도록 돕는 역할로 사용

한줄만 주석

• 한 줄을 주석으로 만들고 싶으면,  //을 사용

여러 줄 주석

• 여러 줄을 주석으로 만들고 싶으면, /* */을 사용

 

---

8. 변수와 상수

상수를 선언하는 방법

: const 식별자

 

상수를 선언하면서 바로 값을 할당하는 방법

: const 식별자 = 값;

 

변수를 선언하는 방법

: let 식별자

 

변수에 값을 할당하는 방법

: 식별자 = 값;

: let 식별자 = 값;

 

---

9. 변수의 유효범위

• const, let 의 유효범위 : 블록 스코프 - 블록{}안에서만 사용 가능

// 블럭
{
	const name = 'Mark';
    console.log(name);
}
//console.log(name); -> 작동 안됨


// 밖에서 안으로
let age = 37;
{
	age++;
    console.log(age);
}
console.log(age);


//중첩
{
	{	
    	{
        	console.log(age);
        }
    }
}

 

• var의 유효범위 : 함수 스코프 - function(){ } 선언 영역에서 사용가능 

// var 함수 스코프

var a = 0;
(function(){
	a++;
    console.log(a);
})();

console.log(a);

(function(){
	var b =0;
    console.log(b);
})();

b++;
console.log(b); //에러

 

---

10. var와 호이스팅

Hoisting : 아래 있는 선언을(만) 끌어올리다. (developer.mozilla.org/ko/docs/Glossary/Hoisting)

//함수 먼저
function hello1(){
    console.log('hello1');
}
hello1();

//함수의 호출을 먼저
hello2();
function hello2(){
    console.log('hello2');
}

//변수에서도 가능
age = 6;
age++;
console.log(age);
var age;

//예제
console.log(name); //Undifined
nam = 'Mark';
console.log(name); //Mark
var name;

//예제2 - 선언만 올라가는 것을 알 수 있다.
console.log(name); //Undifined
nam = 'Mark';
console.log(name); //Mark
var name = 'Hellozo0';

//예제3 - 오류 
console.log(name);
name='Mark;
console.log(name);
let name; //let은 Hoisting이 일어나지 않는다.

 

---

11. 자료형

자바스크립트의 자료형 (developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures)

• 동적 타이핑 : 변수가 가지는 고정 타입이 없다.

let whatever = 'Mark';
whatever = 37; //문자 -> 숫자
whatever = true; // 숫자 -> 불린

 

데이터 타입

1. 기본타입

1.1 Boolean

//Boolean
const isTrue = true;
const isFalse = false;

console.log(isTrue, typeof isTrue); //true 'boolean'
console.log(isFalse, typeof isFalse); //false 'boolean'

- 아래의 경우 a는 객체로 평가되어, if문에 있는 객체는 true로 인지하기 때문에 실행된다.

const a = new Boolean(false);
console.log(a, typeof a); 
if (a){
    console.log('false?');
}

- 아래의 경우 if문이 출력되지 않는다. 마치 형변환처럼 작동..?

const b = Boolean(false);
console.log(b,typeof b);
if (b){
    console.log('false?');
}

 

1.2 Null

- 아래의 경우 null object로 출력, null은 값이 없다는걸 의미하는 객체

//Null
const a = null;
console.log(a, typeof a);

 

1.3 Undefined

- 아래의 경우 모두 undefined undifined로 출력, 

let b;
console.log(b, typeof b);

b = undefined;
console.log(b, typeof b);

- null과 undefined 비교결과 true, 분명이 다른 것인데, ===세개 사용하면 type도 비교를 할 수 있다.

//Null
const a = null;

//Undefined
b = undefined;

//비교
if (a == b){
    console.log(a == b);  //true
}
//비교
if (a === b){
    console.log(a === b);  //false
}

 

1.4 Number

const a = 37;
console.log(a, typeof a);

const b = 96.7;
console.log(b,typeof b);

const c = NaN;
console.log(c, typeof c);

const d = Number('Mark'); //형변환
console.log(d, typeof d); //실패

const e = Number('37'); //형변환
console.log(e, typeof e); //성공

 

1.5 String

const a = 'Mark';
console.log(a,typeof a);

const b = "Mark" + "Lee";
const c = a + ' Lee';
console.log(c, typeof c);

//템플릿 스트링 사용
const d = `${a}Lee`;
console.log(d, typeof d);

 

1.6 Symbol(ECMAScript 6에 추가됨)

•  Symbol은 생성자 함수로 사용할 수 없다.
• Symbol은 고유한 것을 가르킨다.

const a = Symbol();
const b = Symbol(37);
const c = Symbol('Mark'); //c와 d는 다른 고유한 값
const d = Symbol('Mark');

console.log(a, typeof a);
console.log(c === d); //false

 

2. 객체(Object)

2.1 사용자 정의 타입

2.2 내장 객체