221028 JavaScript(JS) - 자바스크립트의 특징 /자바스크립트 변수와 상수 / 자바스크립트 기본 연산자와 데이터 타입 / 자바스크립트 변수명 표기법

오늘 내가 배운 것

1. 자바스크립트의 특징

2. JavaScript (JS) 적용하는 방법

3. 변수와 상수의 예약어와, 기본 연산자

4. 변수명 표기법

 

1. JavaScript(자바스크립트)의 특징

자바스크립트는 Prototype기반 언어이다.

 

웹 페이지를 만드는 과정에서 동적요소를 만들고 싶어서 생긴 언어였다.

 

타입을 지정하지 않고 사용할 수 있어서 처음배우는 사람들한테 좋다.

 

코드를 한 줄씩 읽어 내려가는 인터프리터 언어이기 때문에, 번역과 실행이 동시에 이루어진다.

 

인터프리터와 반대되는건 컴파일 언어이다. 컴파일 언어는 프로그램을 실행하기 전에 기계어(컴퓨터 언어)로 컴파일(번역)을 하고 실행하는 언어이다.

 

한 줄씩 처리하다 보니 처리 자체의 속도는 컴파일 언어의 비해 느리다.

 

-> 많은 양의 코드를 작성 후 컴파일 언어는 컴파일을 하는 시간을 써야 하는 반면 인터프리터 언어는 명령을 내리는 즉시 첫 줄부터 출력해서 보여준다.

 

작성한 코드를 구동해줄 엔진이 필요하다,  구동해주는 환경이 필요하다.(런타임이 필요하다.)

 

자바스크립트 엔진은 자바스크립트를 읽어서 컴퓨터가 읽을 수 있는 기계어로 변환해주는 역할을 하고  같은 엔진이라도 구동해주는 환경이 다를 수 있다 .

 웹 브라우저(크롬)와 node.js 는 같은 엔진이고 다른 환경(다른  런타임) 이다.

 

 

Javascript(JS)는 처음에 웹 페이지를 만드는 과정에서 동적요소를 만들고 싶어서 생긴 언어였다.

그래서 중요도가 높지 않았고, 단순했는데 시간이 지나면서 중요도가 높아지고 오랜 텀이 있은 후에 자바스크립트의 스펙이 업그레이드되었다. ES6, ES7 …

 

자바스크립트가 브라우저에서 사용되다가  업그레이드 되면서 다른 환경이 생겼는데, 그것이 Node.js 런타임이다.

브라우저에서 쓰이는 언어랑, Node.JS에서 쓰이는 언어는 자바스크립트로 동일하지만, 브라우저에 초점이 되어있는 자바스크립트와 내 컴퓨터(서버)에 초점이 맞춰져 있는 자바스크립트로 목적(환경)이 다르기 때문에 같은 언어지만 혼용해서 쓰지 못한다.

 

 

2.  JavaScript (JS) 적용하는 방법

 

자바스크립트는 HTML에서  head 부분, body 부분이 원하는 곳에 쓸 수 있다.

CSS의 style 엘리먼트처럼 <script> 를 쓰는 방법, 외부 파일의 링크를 연결하여 적용하는 방법이 있다.
모두 JS 문법에 맞춰 써야 한다.

    <script type="text/javascript">
        console.log("hello,world!");
    </script>

    <script src="./public/js/index2.js" type="text/javascript">
    </script>

 

JavaScript(자바스크립트) Hello, World!  출력하기

console.log(Hello, World!) // 괄호 안에 내용을 출력해준다.라는 의미

 

세미콜론 ; 는 생략 가능하다.

 

 

3. 변수와 상수 예약어 와 기본 연산자

 

 

예약어  : 이미 쓰임이 정해져 있는 키워드를 의미한다. 이 예약어는 변수명으로 사용할 수 없고

변수의 예약어는 var, let가 있고, 상수의 예약어로는 const가 있다.

 

변수의 var는 hoisting (호이스팅) 이라는 이슈가 있어서 쓰이지 않는다.. (호이스팅은 밑에..!)

그러므로 let(변수) 과 const(상수)를 사용한다.

선언 방법

예약어[let, const]  변수명[개발자 임의] = [데이터 값]

예약어와 변수명 사이는 띄어쓰기로 구분한다.

변수 : let 

재선언 X , 재할당 O  

let number  //선언
number = 1  //할당
console.log(number) //출력

//let number // 불가
number = 10 //재할당
console.log(number)

 상수 : const

재선언X , 재할당X

선언과 동시에 값을 할당해야 한다. (대입 연산자를 활용 )

const num1 = 1
console.log(num1)

기본 연산자

대입연산자 : " = "  ( 수학의 같다는 등호랑 다른 의미, 우측항을 좌측항에 대입시키는 연산자 ) 

산술 연산자 : "+" ,     " - " ,     " / " ,     " * " ,    " % " (% : 나머지를 구하는 연산자)

산술 연산자에서 + 를 제외한 다른 연산자는 데이터 타입이 number 타입 (숫자 타입)이다.

+ 연산자는 string 타입( 글자 타입) + string 타입을 출력해줄 수 있다.

let string = "A"
let string2 = "B"

// AB

let num = 1 
let num2 = 2
console.log(num + num2) //number 타입 + number 타입 >> 둘다 숫자 타입으로 두개를 더한 값을 출력 : 3
console.log(string + num) // A1
console.log(num + string) //1A

데이터 타입의 중요성!

//데이터 타입의 중요성... 
let strNum = "101"
let num3 = 3

console.log(strNum + num3) // 1013

// 만약 - 를 하게 되면 98이 나오는데 string 타입은 '+' 만 가능하다.

 

 

 

 

4. 변수명 표기법

 

변수명 표기법

1. 특수문자 불가(1~2개 가능하다고 하지만...)

2. 첫 글자를 숫자로 불가

3. 예약어(키워드) 불가.

 

변수명 컨벤션(협업하는 사람들끼리의 규칙, 관행, 관례)

1. 카멜 표기법 : 첫 글자는 소문자로 시작하고 단어가 바뀔 때마다 대문자로 시작함.   firstName 
2. 파스칼 표기법 : 모든 단어의 처음을 대문자로 시작함.   FirstName
3. 스네이크 표기법 :  단어 사이에 언더바를 사용한다. first_Name

 

 

 

호이스팅 (Hoisting)

hoisting ( 호이스팅)은 자바스크립트 문법에서 변수나 함수를 선언 이전에 사용할 수 있다는 뜻,

 

변수나 함수를 선언하기 전에 사용할 수 있었기 때문에 끌어올려지는 것처럼 보였을 뿐 실제로 끌어올려지는 것은 아니다.

실행 컨텍스트가 생성될 때 ( 코드들이 실행되기 위한 환경이 생성될 때) 식별자 정보를 수집하는데, 이때 변수들을 먼저 담기 때문에 할당 전에 사용할 수 있게 된다.(메모리에 변수가 할당) 그래서 var 변수를 선언 전에 사용하게 되면 에러를 띄우는 것이 아닌 undefined 을 출력해준다.

let, const는 호이스팅이 되지 않느냐? - 아니다. 그렇지만.....

실행 컨텍스트가 생성될 때 변수들은 다 정보를 담기 때문에 호이스팅이 되는 것은 맞으나, 초기화 단계를 거쳐 var 와 달리 선언은 되어 있지만 변수에 값을 담기 위한 메모리에 공간이 확보되어 있지는 않기 때문에 할당 이전에 미리 사용할 수 없게 된 것이다.

 

---