[Javascript] 기초 개념 / 선언방법 / 기초 문법

var val = 10;
var val = 20; // 가능 (재선언, 재할당 O)

let val = 10;
let val = 20; // 불가능 (재선언 X)

let val = 10;
val = 20; // 가능 (재할당 O)

const val = 10;
val = 20; // 불가능 (재선언, 재할당 X)

<Javascript란?!>

- 프로토타입 기반의 스크립트 프로그래밍 언어

- 객체지향 지원

-html과 함께 실행

-대부분 ECMAScript 표준을 지원

 

<특징>

- 웹 브라우저에서 동작하는 유일한 프로그래밍 언어

- 개발자가 별도로 컴파일 작업을 수행하지 않음

---

[선언 방법]

<script> 태그를 사용.

html 문서에 포함할 시:

<script type="text/javascript">

      function hello(message) {

        var x = 10;

        alert("Hello " + message);

      }

 

      hello("JavaScript !!!");

      console.log("1, " + x);

    </script> 

 

외부 js파일을 포함할 시:

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

 

선언은 head, body 어느곳에서나 가능.

그러나 body 안의 끝부분에 두는것을 권장

 

[setInterval()]

일정한 시간 간격으로 작업을 수행하기 위해서 사용

ex) setInterval(함수명, 1000); //1초마다 실행

 

---

[주석]

/* 안녕하세요 */
// 한줄짜리 주석 ㅎㅎ

 

[변수]

- 타입을 명시하지 않고 var 을 사용

- 할당되는 과정에서 자동으로 변수의 타입이 결정 됨.

- 특수문자는 _와 $ 가능

- Camel case로 변수명 지정하기

 

[자료형]

- 원시타입: 숫자, 문자열, boolean, null, undefined

- 객체타입: 위의 타입을 제외한 모든 값

 

[undefined & null]

- undefined: 변수가 선언 되었지만 초기화가 되지 않을 경우.

- null: 값이 존재하지 않을 경우

 

[숫자 관련 특징]

- javascript에서는 숫자를 정수와 실수로 나누어 구분하지 않음.

- 숫자와 관련된 특별한 상수: Infinity(무한대), NaN: 계산식의 결과가 숫자가 아님

- javascript에서는 언더플로우, 오버플로우, 0으로 나누는 연산에 대한 예외처리를 하지 않음

 

[문자열]

- 16비트의 unicode 문자를 사용

- 문자 하나를 표현하는 문자형은 제공하지 않음 ('a'도 문자열)

- 줄바꿈: \

- '문자열' , "문자열" 전부 사용 가능

 

[자동 형 변환]

- 서로 다른 자료형의 연산이 가능

console.log("40" - 5);					// 35
console.log("40" + 5);					// 405

console.log(parseInt("123.45") + 1);	// 124
console.log(parseFloat("123.45") + 1);	// 124.45

console.log("1.1" + "1.1");				// 1.11.1
console.log((+"1.1") + (+"1.1"));		// 2.2

 

[변수 호이스팅]

- 호이스팅(Hoisting): var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 처음으로 옮겨진 것처럼 동작하는 특성. 즉 선언문이 선언되기 이전에 참조가 가능

console.log(num); // undefined
var num = 123;
console.log(num) // 123
{
	var num = 456;
}
console.log(num); //456

 

[let & var & const]

var: 변수 / 전역 / 재선언 가능

let: 변수 / 해당 스코프 / 재선언 불가능

const: 상수 / 해당 스코프 / 재선언 불가능

window.onload = function () {
        {
          var val = 10;
        //   let val = 20; => error
          const con = 10;
          //con = 20; => error
        }
        {
          alert(val);
          //alert(con);
        }
        alert(val);
};

<헷갈리는 부분>

 

 

var val = 10;

var val = 20; => 가능

 

let val = 10;

let val = 20; =>불가능

 

let val = 10;

val = 20; =>가능

 

const val = 10;

val = 20; => 불가능

 

[객체]

- 이름과 값으로 구성된 프로퍼티의 집합

- 문자열, 숫자, boolean, null, undefined를 제외한 모든 값

- 함수도 객체로 사용 가능

var student = {
        name: '김민정',
        area: '인천',
        age: 24,
        info: function () {
          console.log(this.name + '은 ' + this.area + this.age + '살');
        },
      };

property 추가 시에는

student.name = '김민정';
student.area = '인천';
student.age = 24;

 

[객체 속성 접근]

console.log(student.age);

console.log(student["age"]);

 

[property 제거]

delete student.age;

 

---

[함수]

- js에서 함수는 일급 객체

- 변수, 객체, 배열 등에 저장 가능. 리턴 값으로도 사용 가능.

- 프로그램 실행 중에 동적으로 생성 가능

- 함수 선언문, 표현식 ,생성자 세가지로 정의 가능

// 함수 생성 방법
function 함수이름(매개변수){}
var 함수이름 = function(매개변수){}
var 함수이름 = new Function(매개변수){};

호출 방법 : 함수이름(매개변수);

- 정의 방식은 달라도 호출 방식은 모두 같음.

 

[함수 호이스팅]

- 함수 선언문의 경우 함수 선언의 위치와 상관없이 코드 내 어느곳에서든지 호출이 가능하다.

var result = plus(5, 7);
console.log(result); // 12

function plus(num1, num2) {
return num1 + num2;
}

* var 함수명 = function(){}과 같은 함수 표현식은 변수 호이스팅이 발생해서 error

 

[콜백 함수]

- 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수

- 매개변수를 통해 전달되고, 함수 내부의 어느 특정시점에서 실행됨

- 주로 비동기식 처리 모델(AJAX)에서 사용됨.