JavaScript 개발자 수업 60일차 - JavaScript, Data Type, Function

1. JavaScript

2. Data Type

3. Function

---

1. JavaScript

[ 정의 ]

- 브라우저에서 동작하는 프로그래밍 언어이다.

- 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다.

 

[ 적용 방법 ]

1) 이벤트 핸들러 방식 : 해당 태그에 직접 기재하는 방법

2) 임베디드 방식 : <script>코드</script>

3) 외부 방식 : <script src="경로"></script>

 

[ console.log(); ]

- 디버그 전용 함수이다.

- 개발자가 값을 콘솔창에서 확인 할 수 있으며, 보편적으로 많이 쓰인다. ( 사용자에게는 출력되지 않는다. )

- Node 환경에서도 출력이 가능하다.

 

2. Data Type

[ Java & JavaScript 변수 차이점 ]

- Java는 정적 할당 언어이기 때문에, 변수를 선언할 때 자료형이 정해진다.

- JavaScript는 동적(<->정적) 할당 언어이기 때문에, 변수를 선언할 때 자료형이 정해지지않는다.

- JavaScript는 변수 선언시 무조건 'var' 키워드를 사용해서 선언한다. ( 자바의 object와 유사 )

 

[ Number ]

- 숫자형 (정수 + 실수)

- 다른 언어와 동일하다.(리터럴)

var a = 10;
var b = 3.14;

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

--> 10
    3.14
    number
    number

 

[ String ]

- 리터럴(문자)

- 쌍따옴표, 호따옴표 두가지 모두 사용 가능하다. ("문자열", '문자열') 

var str1 = "홍길동";
var str2 = '아무개';

console.log(str1, typeof str1);
console.log(str2, typeof str2);

--> 홍길동 string
    아무개 string

 

[ Boolean ]

- 논리형

- 리터럴: true, false

console.log(true, typeof true);

--> true boolean

 

[ Object ]

- 객체형

- 배열, 날짜 시간, 수학 등..

console.log(new Date()); 
console.log(new Date().toString());
console.log(typeof new Date());


--> 2021-06-23T14:57:21.553Z
    Wed Jun 23 2021 23:57:21 GMT+0900 (대한민국 표준시)
    object

 

[ 기타 ]

- null: 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다. (undefined와 똑같은 의미 이지만 실제로는 다르다.)

- undefined: 변수를 선언하고 값을 할당하지 않은 상태이다. (null과 똑같은 의미 이지만 실제로는 다르다.)

- NaN: Not-A-Number, 숫자가 아니라는 의미이다.

console.log(typeof null, typeof undefined, typeof NaN);
console.log(null == undefined);

--> object undefined number
    true

 

3. Function

[ 정의 ]

- 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다.

- 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.

- 자바의 메소드, 프로시저와 유사하다.

- 'function' 키워드를 사용한다.

//Java의 메소드(함수) 선언문
public [static] void test(int a) {
    실행문;
}

//JavaScript의 함수 선언문
function test(a) {
    실행문;
}

 

[ 매개변수, 반환값 ]

- 매개변수: 함수를 호출할 때 인수(argument)로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수이다.

- 반환값: 함수의 실행을 중단하고, return 키워드 다음에 명시된 표현식의 값을 호출자에게 반환한다. 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있다.

 

[ 매개변수 X, 반환값 X ]

function f1() {
    console.log('JS 함수입니다.');
}

f1();
f1();

--> JS 함수입니다.
    JS 함수입니다.

 

[ 매개변수 O, 반환값 X ]

function f1(num) {
    console.log(num);
}

f2(100);
f2(12.5);
f2(12345);

--> 100
    12.5
    12345

 

[ 매개변수 X, 반환값 O ]

function f1() {
    return 100;
}

var result = f1();
console.log(result);

--> 100

 

[ 매개변수 O, 반환값 O ]

function f1(a, b) {
    return a + b;
}

console.log( f1(100, 200) );

--> 300

 

[ 1급 객체 ]

- 함수를 객체(데이터)처럼 취급할 수 있으므로, 자바스크립트 함수는 1급 객체(First Class Object)이다.

- 함수를 변수나 데이터 구조에 담을 수 있다.

- 함수를 매개변수로 전달 할 수 있다.

- 함수를 반환값으로 사용할 수 있다.

 

[ 함수를 변수에 담기 ]

var n1;
function f1() {
    console.log('TEST');
}

n1 = f1(); //함수의 반환값을 n1에 대입
console.log(n1);
 
n1 = f1; //함수 자체를 변수 n1에 대입
console.log(n1);
n1();

--> TEST
    undefined
    [Function: f1]
    TEST

 

[ 함수를 매개변수로 전달하기 1 ]

function f1() {
    console.log('TEST');
}

function f2(temp) {
    console.log(temp);
}

f2(100);
f2(f1);
f2(f1());

--> 100
    TEST
    undefined

 

[ 함수를 매개변수로 전달하기 2 ]

function f1() {
    console.log('TEST');
}

function f2(temp) {
    temp();
}

f2(f1);

--> TEST

 

[ 함수를 반환값으로 사용하기 ]

function f1() {
    console.log('TEST');
}

function f2() {
    return f1;
}

f2()();

--> TEST

 

[ 함수 선언 방법 ]

1) 명시적 선언(실명)

function hello() {
    console.log('hello');
}

hello();

--> hello

 

2) 암시적 선언(익명 함수, 함수 리터럴)

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

hello();

--> hello

 

3) 즉시 호출

(function() {
    console.log('hello');
})();

--> hello

 

[ == 연산자 ]

- 자료형 비교는 하지 않고, 데이터만 같은지 판단한다.

- 추상적(Abstract) 같음 비교

console.log(100 == 100);
console.log(100 == '100');
console.log(1 == true);
console.log(0 == false);

--> true
    true
    true
    true

 

[ ===, !== 연산자 ]

- 자료형도 비교하면서 값도 비교한다.

- 엄격한(strict) 같음 비교

- 자바와 동일하다.

console.log(100 === 100);
console.log(100 === '100'); 
console.log(1 === true); 
console.log(null === undefined);

--> true
    false
    false
    false

---

MEMO>
# 들여쓰기 못하면 회사가서 욕먹고 고친다. 공부하는 지금 고치도록 ㅎ ㅏ자!!!

# JavaScript는 Brower API, Node API 두가지 기반으로 돌아가는데 우리 수업은 Node API는 안한다. 하지만 기본 상식으로 알고 있어야한다. ( Node는 따로 공부 할것, )

# JavaScript는 웹 브라우저에서 개발자도구(F12)를 열면 에러 메세지를 확인할 수 있다.

# <script>태그가 어디에 있느냐에 따라 코드가 똑같더라도 에러가 발생할 수 있다.