01_JS_변수,상수,자료형
FrontEnd/JavaScript

01_JS_변수,상수,자료형

728x90

이제 드디어 자바 스크립트에 대해 공부하기 시작했다! 파이썬,c,c++ 등의 언어와 어떻게 다를지 기대가 된다!

 

자바 스크립트 (Java Script)

>>스크립트 언어
>>인터프리터 언어

자바라는 이름이 있긴 하지만 자바와 사실 별 연관은 없다!
당시 인기있던 언어가 자바였어서 그 인기를 타기 위해서 라고 했다 ㅋㅋ

자바스크립트는 웹브라우저만 만드는 역할을 하는것이 아니다. node.js를 이용하여 서버사이트나 데스크탑 애플리케이션을 만들수도 있으며 모바일 애플리케이션도 만들 수 있다.

ecma인터네셔널
표준 문법을 정의하는 공식 사이트


chrome과 node.js가 필수이다!!

 

 

console.log('hello JavaScript')

모든언어의 시작이듯 hello JavaScript를 실행시켜 보겠다.

잘 나오는것을 알 수 있다.

 

 

Expression ( 표현식 )

 

값을 만들어 내는 간단한 코드

 

True , 26 , 100+07 , "mingyu" 등 값을 만들어 내는것.

>> 함수의 인자로 사용할 수 있다.

 

개발자 도구로 출력해본 값

 

Statement

하나 혹은 여러 개의 표현식

>모든 표현식은 문장이 될 수 있다.

문장의 끝엔 세미콜론이 붙는다.

 

 

일반적인 언어의 특성을 그대로 가지고 있다고 생각하면 될 것 같다. 

또한 여러줄을 한번에 쓰고 싶다면 ; 를 사용해서 분류해주는게 필요하다.

 

결국 이 문장들이 모여서 프로그램이 된다.

 

키워드(Keyword)

특정한 목적을 위해 사용하는 단어

이러한 키워드들은 예약어로 지정되어 있다.

 

bar (변수설정을 위함) 와 같은 선언

 

Reserved keywords

이미 특정한 목적을 위해 사용되고 있는 예약어

break,case,if 등등

 

Future reserved keywords

앞으로 사용할 가능성이 있어 사용할 수 없는 예약어

abstract,char 등등

>> 굳이 외우거나 할 필요는 없다

 

식별자

코드내의 변수,함수,혹은 속성을 식별하는 문자열

 

선언한 함수의 이름 즉, var name = 'mingyu';라고 할때 name이 식별자가 된다.

 

>>대소문자를 구별한다! 유니코드문자(숫자,한글)을 사용할 수 있지만 숫자로 시작할 수는 없다.

>>예약어와 공백문자는 사용할 수 없다.

 

주석(comments)

어떤 언어든 한번이라도 접해봤다면 알만한 개념이다!

프로그램 코드에 전혀 영향을 주지 않는다.

 

// 를 사용하면 한줄주석

/* */를 사용하면 여러줄 주석이 가능하다.

 

변수(variable)

값이 변할 수 있는 보관소

let result = false;

처럼 선언

 

상수(constant)

값이 변할 수 없는 보관소

 

const pi = 3.14;

처럼 선언

 

유효 범위 ( 블록 스코프)

블록 이란 { } 로 둘러쌓여져 잇는 공간을 의미한다.

한 함수의 범위 안에서 벗어나면 그 안에서 선언한 변수 등은 사용할 수 없다!

 

전역변수와 지역변수 개념을 알면편할 것 같다.

 

var는 블록이 아닌, 함수를 유효 범위로 가지고 있다.

 

function( ){ }

 

//var 함수 스코프

var a  =0;

console.log(a);

(function(){
    a++;
    console.log(a);
})();

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

console(b);

함수스코프이므로 에러가 난다.

 

 

즉, 위경우 var b는 함수안에서만 유효한 범위를 가진다. 근데 블럭안에서 유효한 범위를 가지는 let과는 달리

var는 블록 안에서 선언하더라도 작동을 한다.

 

var c=0;

{
    c++;
    console.log(c);
}

{
    var d = 0;
    console.log(d);
}

console.log(d)

 

블록 밖에서도 선언이된다.

이는 코드짜면서 헷갈리거나 이상동작을 할 확률이 높기 때문에 let을통해 선언하는것을 추천한다!

 

Hoisting(호이스팅)

function hello1(){
    console.log('hello1')
}

hello1();
hello2();


function hello2(){
    console.log('hello2')
}

이처럼 함수를 아래에서 선언을 해도 동작이 정상적으로 작동하는, JS의 고유한 특성이다.

 

console.log(name);
name= 'Mark';
console.log(name);

name = 'mingyu';
var name;

 

이때 중요한 특성은, 다른것이 아닌 선언부만 맨 위로 올라가는 방식이다. 즉, 위 코드에서 var = name만 맨위로 올라가게 되는것이다. 이 역시 var말고 let을 사용하면 일반적인 함수처럼 선언을 해줘야 사용할 수 있다.

 

 

자료형

 

동적 타이핑

let name = 'mingyu'

name = 24;

name = true;

파이썬과 동일하게 변수가 가지는 고정 타입이 없다!

 

기본타입

  Boolean

  Null

  Undefined

  Number

  String

  Symbol

객체(Objects)

 

아직 설명은 안했지만 if문 안이 false가 아닌 객체면 실행이 된다.

const a = new Boolean(false);

console.log(a,typeof(a));

if (a){
    console.log('false?')
}

if가 작동

if안이 실행은 되지만 직관적으로 안좋기에 사용하면 안된다..

 

그래서 new를 빼고 실행히야 정상적으로 타입이 boolean으로 들어가게 된다.

 

 

 

Null과 undefined는 둘다 아무값도 없는 거라는거에서 유사점을 가지게 된다. 하지만 둘의 값은 같고 타입은 다르기 때문에 이를 비교하기 위해서는 ==이 아닌, ===을 사용해줘야 한다.

 

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

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

b=undefined;

console.log(b,typeof b);

if(a==b){
    console.log(a==b);
}
if(a!==b){
    console.log(a===b);
}

 

Number

 

NaN : 타입은 숫자이지만, 문자가 아님을 나타냄.

number('37')와같이 문자를 숫자로 변경할 수가 있는데, 이에 'mingyu'처럼 들어가면 NaN이 나오면서 숫자가 아님을 나타낸다.

 

String

 

''과 ""모두 사용이 가능하고, 파이썬과 같이 +를 사용하여 합칠수도 있다.

 

const a = 'mingyu'
const d = `${a} jeong`

console.log(d);

''가 아닌 ``를 사용하면 변수도 넣을 수 있다.

 

Symbol

고유값을 만들고 싶을 경우에 사용한다.

const a = Symbol('mingyu');
const b = Symbol('mingyu');

console.log(a===b);

즉 위처럼 선언하면, a와 b는 같지 않다고 나오게 된다.

 

가장 기본적인 문법과 자료형들을 알아보았다!

728x90

'FrontEnd > JavaScript' 카테고리의 다른 글

06_JS_배열 내장함수  (0) 2021.12.18
05_promise,Async-Await  (0) 2021.12.05
04_JS_클래스  (0) 2021.12.03
03_JS_객체  (0) 2021.12.03
02_JS_조건,반복,함수  (0) 2021.12.03