2019.12.26 JavaScript 기본 문법

JavaScript 기본 문법

 

1. 변수

 

변수는 값을 저장하고 그 값을 참조하기 위해 사용한다. 변수에 이름과 값을 줘서 코드를 보다 더 명확하게 표현할수있고 그로 인해 타인이 읽기 쉬워진다.

그리고 변수는 메모리상의 주소를 기억하는 저장소이다. 

즉 쉽게 말하면 사람이 메모리 주소에 접근할수있도록 지정한 식별자이다. 

변수는 선언과 할당으로 나뉘어진다.

 

<index.js>

var city; //변수선언

city = "New York"; //변수 값 할당

 

변수 선언은 var이라는 키워드를 앞에 꼭 사용해줘야 한다.

왜냐하면 변수의 타입을 정해야 하기 때문이다. 

선언만 했을때는 var은 어떤 타입도 아니다.

하지만 값에 숫자 또는 문자열, 문자 등이 들어오게 되면 값에 맞춰 타입이 정해지는 방식이다.

(이러한 방식을 동적 타이핑이라고 부른다.)

따라서 변수를 선언할때는 var을 무조건 적어줘야한다.

 

 

2. 값

 

데이터 타입 - 프로그래밍 언어에서 사용할 수 있는 값의 종류

변수 - 값이 저장된 메모리 공간의 주소를 가리키는 식별자

리터럴 - 소스코드 안에서 직접 만들어 낸 값 자체를 말한다.

 

<리터럴 예>

 

// 숫자 리터럴

10

10.2

 

// 문자열 리터럴

"Hello"

'World'

 

// 불리언 리터럴

true

false

 

// null 리터럴

null

 

// undefined 리터럴

undefined

 

// 객체 리터럴

{ name: "Lee" age: 20}

 

// 배열 리터럴

[a,b,c,]

 

// 정규표현식 리터럴

/ab+c/

 

// 함수 리터럴

function() {}

 

리터럴은 이런 느낌이다.

 

자바스크립트는 총 7가지 데이터 타입(데이터 종류)을 제공한다.

 

원시타입

number

string

boolean

null

undefined

symbol

 

객체 타입

object

 

 

3. 연산자

 

연산자는 하나 이상의 표현식을 사용하여 하나의 값을 만드는것으 말한다. 예를들어 산술,비교,논리,연산 등등이 해당된다. 쉬운 이해를 위해 예제를 보자.

 

<연산자 예>

 

// 산술 연산자

var sum = 1+2  //3

 

// 문자열 연결 연산자

var str = "Hello" + "World"  //"HelloWorld"

 

// 할당 연산자

var color = "blue"  //"blue"

 

// 비교 연산자

var bigger = 50 < 100  //true

 

// 논리 연산자

var bar = (5>3) && (2<4)  //true

 

// 타입 연산자

var type = typeof "Hi" //string

 

// 인스턴스 생성연산자

var date = new Date();  //현재시간,날짜,요일

 

연산자에 사용되는 값들의 데이터 타입이 일치할 필요는 없다.

타입이 다를경우 우선순위를 따져 우선순위가 높은 데이터타입으로 변환되기 때문이다.

 

 

4. 주석

 

주석은 코드를 설명하기위해 사용된다.

나의 코드는 팀원이 볼때 이해되기 쉬워야한다.

그래야 업무 속도가 더 빨라지기 때문이다.

따라서 자신이 작성한 코드에 주석을 이용해서 설명을 적는것이 중요하다.

참고로 주석은 한줄 주석과 여러 줄 주석이 존재한다.

 

한줄 주석 - //

여러 줄 주석 - /*~~~~~*/

 

주석은 애플리케이션이 실행될때 무시되며 실행되지 않으므로 꼭 이용하도록 하자.

 

 

5. 문

 

프로그램은 컴퓨터에 의해 순차적으로 수행될 명령들의 집합이다.

각각의 명령을 문이라고 부른다. 문은 끝날때 세미콜론으로 끝난다.

리터럴,연산자,표현식 등등 다양하게 구성되어있다.

 

<문 예>

 

var number = 1;

console.log(number);

 

이렇게 그냥 써도 되지만 블록으로 그룹화를 해서 쓰일 때도 있다.

 

<문 예2>

 

// 함수문

function myFnc(){}

 

// if 문

if(1<4){}

 

// for 문

for(var i=0; i<5; i++){}

 

 

6. 표현식

 

표현식은 하나의 값으로 평가되는것을 말한다. 

쉽게 설명하기 위해 예를 보자.

 

<표현식 예>

 

5      //5

5*10   //50

5*10>10   // true

 

이렇게 값이 평가되는것을 표현식이라고 부른다.

 

 

7. 문과 표현식의 차이

 

표현식과 문은 매우 유사하나 차이점이 분명히 존재한다. 표현식은 하나의 값을 평가하는 것으로써 역할이 끝이다.

하지만 문은 선언를 하거나 변수나 함수를 생성하기도 하고 제어문과 반복문을 통해 실행순서에 변화를 주기도 한다.

표현식은 문을 구성하는 하나이다. 하지만 어느 순간에는 표현식도 표현식 그자체 만으로 문이 될수있다.

 

 

8. 함수

 

함수는 블록으로 형성된 문들의 집합이다.

함수 블록안에 선언된 문들은 전부 같은 함수에 속해있는것이며

해당 함수가 실행되면 같이 순차적으로 실행된다.

함수는 동일한 작업을 할때 사용해주면 좋다.

실행할때는 함수를 호출해서 실행한다.

자세한 설명은 생략하고 더 쉽게 예를 보자.

 

<함수 예>

 

// 함수의 정의

var function sum(){

var a = 10;

var b = 20;

var add = a+b;

}

 

// 함수의 호출

function sum();

 

 

9. 객체

 

자바스크립트틑 객체 기반의 스크립트 언어이다.

원시타입을 제외한 나머지 값들은 전부 객체이다.

객체는 키(이름)와 값으로 구성된 값들의 집합이다.

객체에 들어가는 값들에는 함수도 포함된다.

이때 객체 안에 값으로 쓰이는 함수는 일반함수와는 다르기 때문에 분류가 필요하기 때문에 다들 객체 안에 있는 함수를 메소드라고 부른다.

 

<객체 예>

 

var person = {

name:  "Lee",

age: 20,

msg: function(){

console.log("Hi! guys! i'm"+this.name);

}

};

console.log(typeof person); // object

console.log(person) // {name: "Lee", age: 20, msg: [Function: msg]}

person.msg(); // "Hi! guys! i'mLee";

 

위의 예제에서도 볼수있듯이 객체는 프로퍼티(=데이터)와 데이터를 동작시키는 메소드로 구성된 집합이다.

자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 프로토 타입이라고 불리는 개체의 프로퍼티와 메소드를 상속받을수 있다.

 

 

10. 배열

 

배열은 1개의 변수에 여러개의 값을 저장할때 사용한다.

값은 저장될때 배열의 주소를 순차적으로 가지게 된다.

즉, 첫번째 값은 배열의 첫번째 주소를 가지고

두번째 값은 배열의 두번재 주소를 가지게 되고

이렇게 순차적으로 할당받는다.

하지만 여기서 주의해야 할 점이 존재한다.

무엇이냐면 배열의 주소는 0부터 시작한다는것.

즉 내 첫번째 값은 배열의 주소가 0

두번째 값은 배열의 주소가 1이다.

내가 원하는 값을 호출하고 싶을때는 배열의 주소를 이용해야한다.

예시는 아래에 적어두었다.

 

var arr = [1,2,3,4,5];

console.log(arr[0]); // 1