JavaScript란 무엇일까?

객체 기반의 스크립트 프로그래밍 언어이다.
브라우저에서 사용하기 위한 언어이고 html에 웹의 동작(다양한 기능)을 구현할 수 있다.
인터프리터 방식의 언어이다.
주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다.

인터프리터(Interpreter) : 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말한다.

JavaScript를 알아가기 전에 ECMAScript를 꼭 알아야 한다고 한다. 그 이유는 JavaScript의 표준이 ECMAScript이기 때문이다.

ECMAScript란?

ECMAScript(ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다. 2015년 부터 연도를 버전으로 하여 ECMAScript2015(ES2015) 이런식으로 출판이 되었다.

ECMAScript는 언어의 명세라고 생각하면 된다. 즉, 이 JavaScript 버전을 말할때 명세를 보고 참고를 하는데 JavaScript는 프로그래밍 언어이고 이 버전을 얘기할때는 ECMAScript를 통해 얘기할 수 있다.

Java와 JavaScript의 차이

자바	자바스크립트
컴파일 언어	인터프리터 언어
타입 검사를 엄격하게 한다.	타입을 명시하지 않는다.
클래스(class) 기반의 객체 지향 언어	프로토타입(prototype) 기반의 객체 지향 언어

프로토타입 기반 언어 : 프로토타입 기반 언어는 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하는 복제 과정을 통해 객체의 동작 방식을 재사용 할 수 있게 한다.

JavaScript의 특징

1. 객체 기반의 언어이다.
2. 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.
3. 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

JavaScript 기본 문법

1. 키워드

프로그래밍 언어를 사용할 때 예약되어 있는 것이 있다. 이 키워드를 사용하면 어떠한 예상되는 동작이 있기 때문에 사용을 하면 안된다. 예를 들어, delete나 if, for 등 이처럼 미리 만들어져있는 동작이 있는 것은 변수 이름으로 사용이 불가능하다.

2. 값(Value)

값은 프로그램에 의해 조작될 수 있는 대상을 말한다. 값은 다양한 방법으로 생성할 수 있다. 자바스크립트의 모든 값은 데이터 타입(원시값)을 갖는다.

• 데이터 타입 - 원시 데이터
  1) number
  2) string
  3) boolean
  4) null
  5) undifined

3. 표현식(Expression)

표현식은 하나의 값으로 평가가 된다. 변수, 값,배열의 요소, 객체의 프로퍼티, 함수 호출, 메소드 호출, 피연산자와 연산자의 조합은 모두 표현식이며 하나의 값으로 평가된다. 표현식은 결국 하나의 값이 되기 때문에 다른 표현식의 일부가 되어 조금 더 복잡한 표현식을 구성할 수 있다.

10 * 10  // 100
(2 + 7) < 10 // true
(2 * 7 > 10) || (2 - 7 > 1) // true

4. 변수(Variable)

값을 만들어내는 표현식이다. 어떠한 값을 저장하여 그 저장한 값을 사용한다. 변수는 저장한 값의 주소를 기억하는 주소이다.

const co;
const num = 123;
const str = 'abc';
const bool = true;

위처럼 const, let, var를 사용하여 변수를 선언할 수 있다.

5. 연산자(Operator)

값의 연산을 위해 사용되는 부호. 연산의 대상이 되는 피연산자. 연산을 부호로 표현하는 연산자

1) 산술연산자

①  + : 좌항과 우항을 더하여 값을 구한다.
②  - : 좌항과 우항을 빼서 값을 구한다.
③  % : 좌항과 우항을 나누어 나머지를 구한다.
④  * : 좌항과 우항을 곱하여 값을 구한다.
⑤  / : 좌항과 우항을 나누어 몫을 구한다.

2) 문자열연산자

const str1 = 'hello';
const str2 = 'world';

const str3 = str1 + str2;

이런식으로 문자열과 문자열을 연결할 수 있다.

3) 증감연산자

변수에 1을 더하거나 뺄 때

const a = 1;

a = a + 1; 또는  a += 1;

이렇게 접근할 수 있다. 하지만 증감연산자로도 변수에 1을 더하거나 뺄 수 있다.

const a = 1;

a++;

4) 대입 & 복합대입연산자

= 는 대입연산자인데 대입연산자 =에 산술연산자와 같이 사용하여 코드 양을 줄일 수 있다.

const i = 6;
i += 1; (6 + 1 = 7)
i *= 3; (6 * 3 = 18)
i %= 2; (6 % 2 나머지는 0 )
i -= 2; (6 - 2 = 4)
i /= 3; (6 / 3 몫은 2)

5) 비교연산자

좌항과 우항을 비교하는 비교연산자이다. 좌항과 우항을 비교하여 true, false를 알아낼 수 있다.
비교연산자 중 == 와 === 이 있는데 두 개의 차이점은

== : 느슨한 비교(변수의 값만 비교)
=== : 엄격한 비교(변수의 값과 타입까지 비교)

const a = 10;
const b = 15;

a == b // false
a > b // false
a <= b // true
a != b // true

6) 논리연산자

논리연산자는 &&, ||, !을 사용한다. 각각 순서대로 and, or, not을 뜻한다. &&(and)를 사용할 경우 양쪽이 다 참이여야 하고 ||(or)을 사용할 경우 좌항과 우항 중 하나만 참이면 된다. !(not)일 사용한 경우 원래 결과에 반대이면 참 아니면 거짓이다.

const a = 1;
const b = 2;

(a < b && (a * b = 2)) // true 
(a > b || (a * b = 3)) // false
!(a < b) // false

7) 삼항연산자

삼항연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자이다. 앞에서 부터 조건문, 존건문이 참일 경우 실행할 표현식, 조건문이 거짓일 경우 실행할 표현식이 배치된다.

function getFee(isMember) {
  return (isMember ? '$2.00' : '$10.00');
}

console.log(getFee(true));
// Expected output: "$2.00"

console.log(getFee(false));
// Expected output: "$10.00"

console.log(getFee(null));
// Expected output: "$10.00"

6. 문(Statement)

특정 작업을 위한 명령으로 프로그래밍의 흐름을 제어한다. for문, if문, while문, switch문 등이 있다.

for(let i=0; i<10; i++){
	console.log('i의 값은 ' + i);
}

const a = 5;
const b = 7;

if(a > b){
	console.log("참이다.")
}else{
	console.log("거짓이다.")
}

7. 함수(Function)

특정 일을 처리하는 코드 묶음이다.

function 함수명 (매게변수){
	처리내용
    
    return 값;
}

함수명();

8. 배열(Array)

배열은 1개의 변수에 여래 개의 값을 저장할 때 사용된다. 자바스크립트의 배열은 객체이며 내장 메소드를 포함하고 있다.

var arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr[0]) //  a

for(var i=0; i<arr.length; i++){
	console.log(arr[i])   // 
}
결과 : 
a
b
c
c
e

9. 객체(Objects)

자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.
자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.

var obj = {
	age : 00,
    name : {
    	firstName : seongju,
        lastName : cho
    }
    gender : 'male',
   	introduce : function func(){
    	return 'my name is choseongju';
    }
}

참고 :
https://poiemaweb.com/js-object
https://developer.mozilla.org/ko/
http://www.tcpschool.com/javascript/js_intro_basic