[JavaScrpit] 자바스크립트(JavaScript) 기초

🤔 자바스크립트(JavaScrpit) ?

자바스크립트(JavaScrpit)는 객체 기반의 스크립트 언어이다.
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다.

자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다.

📘 기본 타입

숫자(number)

자바스크립트는 다른 언어와는 달리 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현한다.
또한, 매우 큰 수나 매우 작은 수를 표현할 경우에는 e표기법을 사용할 수 있다.

var firstNum = 10;     // 소수점을 사용하지 않은 표현

var secondNum = 10.00; // 소수점을 사용한 표현

var thirdNum = 10e6;   // 10000000

var fourthNum = 10e-6; // 0.00001

문자열(string)

자바스크립트에서 문자열은 큰따옴표("")나 작은따옴표("")로 둘러싸인 문자의 집합을 의미한다.

var sinS = 'single';

var doubleS = "double";

자바스크립트에서는 숫자와 문자열을 더할 수도 있다.
이럴 경우 자바스크립트는 숫자를 문자열로 자동 변환하여, 두 문자열을 연견하는 연산을 수행한다.

var num = 10;

var str = "JavaScript";

document.getElementById("result").innerHTML = (num + str); // 10JavaScript

논리형(boolean)

boolean 값은 참과 거짓을 표현한다.

var firstNum = 10;

var secondNum = 11;

document.getElementById("result").innerHTML = (firstNum == secondNum); // false

typeof 연산자

typeof 연산자는 피연산자의 타입을 반환하는 연산자이다.

typeof 10;        // number 타입

typeof "문자열";  // string 타입

typeof true;      // boolean 타입

typeof undefined; // undefined 타입

typeof null;      // object 타입

null 과 undefined

자바스크립트에서 null이란 object 타입이며, 아직 '값'이 정해지지 않은 것을 의미한다.
undefined는 null과 달리 '타입'이 정해지지 않은 것을 의미한다.
따라서 자바스크립트에서 undefined는 초기화 되지 않은 변수나 존재하지 않는 값에 접근할 때 반환된다.

var num;          // 초기화하지 않았으므로 undefined 값을 반환함.

var str = null;   // object 타입의 null 값

typeof secondNum; // 정의되지 않은 변수에 접근하면 undefined 값을 반환함.

객체(Object)

자바스크립트의 기본 타입은 객체(Object)이다
객체는 여러 프로퍼티(property)나 메소드(method)를 같은 이름으로 묶어놓은 일종의 집합체 이다.

var dog = { name: "해피", age: 3 }; // 객체의 생성

// 객체의 프로퍼티 참조

document.getElementById("result").innerHTML =

    "강아지의 이름은 " + dog.name + "이고, 나이는 " + dog.age + "살 입니다.";

📕 변수 선언

var

지역 및 전역 변수를 선언하는데 모두 사용 될 수 있다.

var i;  // 선언, "undefined"가 저장됨

var sum = 0;  // 선언과 초기화

var i, sum; // 한 번에 여러 개의 변수를 함께 선언할 수 있음

var i=0, sum=10, message=”Hello”;  // 선언과 초기화를 동시에 해줄 수 있음

name = "javascript";  // 선언되지 않은 변수는 전역 변수가 됨

var문에서 변수에 초기 값을 지정하지 않는다면, 변수는 값이 설정될 때까지 undefined값을 갖게 된다.

let

블록, 구문 또는 표현식 내에서만 유효하다.

let i;  // 선언, "undefined"가 저장됨

let sum = 0;  // 선언과 초기화

let i, sum; // 한 번에 여러 개의 변수를 함께 선언할 수 있음

let i=0, sum=10, message=”Hello”;  // 선언과 초기화를 동시에 해줄 수 있음

const

블록 범위 내에 상수를 선언하는 것이다.(let과 괕은 블록 유효 범위)
상수의 값은 재할당할 수 없으며 다시 선언할 수 도 없다.
그래서 처음 선언할 때, 반드시 초기화를 해야한다.

const MY_NUM = 7;

📙 함수(function)

함수(function)는 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다.
이러한 함수는 필요할 때 마다 호출하여 해당 작업을 반복해서 수행할 수 있다.

function addNum(x, y) {

    return x + y;

}

document.write(addNum(2, 3));

1. 함수 정의

자바스크립트에서 함수의 정의는 function 키워드로 시작 된다.

1. 함수의 이름
2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter)
3. 중괄호({})로 둘러싸인 자바스크립트 실행문

// addNum라는 이름의 함수를 정의함.
function addNum(x, y) {    // x, y는 이 함수의 매개변수임.

    document.write(x + y);

}

addNum(2, 3);              // addNum() 함수에 인수로 2와 3을 전달하여 호출함.

2. 반환(return)문

자바스크립트에서 함수는 반환(return)문을 포함할 수 있다.
이러한 반환문을 통해 호출자는 함수에서 실행된 결과를 전달 받을 수 있다.

반환문은 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있다.

function multiNum(x, y) {

    return x * y;         // x와 y를 곱한 결과를 반환함.

}

var num = multiNum(3, 4); // multiNum() 함수가 호출된 후, 그 반환값이 변수 num에 저장됨.

document.write(num);

3. 함수 호출

정의된 함수는 프로그램 내에서 호출되어야 실행된다.
일반적인 함수의 호출은 함수의 정의문과 같은 형태로 호출할 수 있다.

function addNum(x, y) {

    return x + y;

}

var sum = addNum(3, 5); // 함수 addNum()을 호출하면서, 인수로 3과 5를 전달
                        // 함수의 호출이 끝난 뒤에는 그 반환값을 변수 sum에 대입