[JS] 자바스크립트 기본 문법

• 표현식 : 값을 만들어 내는 간단한 코드
• 문장 : 프로그래밍 언어에 실행할 수 있는 코드의 최소 단위
• 문장 마지막에 세미콜론 붙이기 ;
• 키워드 : 자바스크립트를 처음 만들 때 정해진 특별한 의미가 부여된 단어
• 식별자 : 자바스크립트에서 변수나 함수 등에 이름을 붙일 때 사용하는 단어
• 변수 : 값을 지정할 때 사용하는 식별자
• 함수 : 코드 집합으로, 자바스크립트 함수는 변수의 일종
• 객체 : 값을 묶어 저장하는 자료형
• 속성 : 객체에 소속된 변수
• 메서드 : 객체에 소속된 함수
• 주석 : 프로그램 진행에 전혀 영향을 주지 않는 코드
• bool 불 : 참과 거짓을 표현할 때 사용하는 자료
• 비교 연산자 : 두 대상을 비교할 수 있는 연산자
• if 조건문 : 조건이 true 이면 문장을 실행하고 false 이면 문장을 무시
• 배열 : 변수 여러 개를 한꺼번에 다룰 수 있는 자료형
• for 반복문 : 원하는 횟수만큼 반복하고 싶을 때 사용
• 매개변수 : 함수의 괄호 안에 집어넣어 함수 쪽에 추가적인 정보를 전달하는 것
• 키워드 break, else, instansceof, typeof, new, this, in, throw, const, class 등

 

 

세미콜론

줄 바꿈이 있다면 세미콜론(semicolon)을 생략할 수 있습니다.

아래 코드는 에러 없이 동작합니다.

alert('Hello');
alert('World');

아래 코드는 에러가 발생합니다.

자바스크립트가 대괄호 [...]앞에는 세미콜론이 있다고 가정하지 않기 때문입니다.

// 에러 코드
alert("에러가 발생합니다.") [1, 2].forEach(alert)

// 정상 코드 세미콜론( ; )붙여주기
alert("제대로 동작합니다.");
[1, 2].forEach(alert)

use strict

변경사항이 활성화되게 할 수 있는 지시자 "use strict", 혹은 'use strict'는 단순한 문자열처럼 생겼습니다.

이 지시자가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작합니다.

"use strict"는 스크립트 최상단에 있어야 합니다.

"use strict";

// 이 코드는 모던한 방식으로 실행됩니다.
...

 

기본 타입

타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미합니다.

자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입이라고 합니다.

자바스크립트의 기본 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있습니다.

 

원시 타입(primitive type)은 다음과 같습니다.

 

1. 숫자(number)

2. 문자열(string)

3. 불리언(boolean)

4. 심볼(symbol) : ECMAScript 6부터 제공됨

5. undefined

 

객체 타입(object type)은 다음과 같습니다.

6. 객체(object)

var num = 10;          // 숫자
var myName = "홍길동"; // 문자열
var str;               // undefined

숫자(number)

자바스크립트는 다른 언어와는 달리 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현합니다.

또한, 매우 큰 수나 매우 작은 수를 표현할 경우에는 e 표기법을 사용할 수 있습니다.

var firstNum = 10;     // 소수점을 사용하지 않은 표현
var secondNum = 10.00; // 소수점을 사용한 표현
var thirdNum = 10e6;   // 10000000
var fourthNum = 10e-6; // 0.00001

문자열(string)

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

큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있으며, 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있습니다.

var firstStr = "이것도 문자열입니다.";      // 큰따옴표를 사용한 문자열
var secondStr = '이것도 문자열입니다.';     // 작은따옴표를 사용한 문자열
var thirdStr = "나의 이름은 '홍길동'이야."  // 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있음.
var fourthStr = '나의 이름은 "홍길동"이야.' // 큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있음.
var fifthStr = '가나다' + '라마';	  // 가나다라마, + 연산자로 문자열 연결

자바스크립트에서는 숫자와 문자열을 더할 수도 있습니다.

이럴 경우에 자바스크립트는 숫자를 문자열로 자동 변환하여, 두 문자열을 연결하는 연산을 수행합니다.

※ 템플릿 문자열

ES6 버전부터는 문자열 안에 값을 채우는 방법인 '템플릿 문자열'이 새로 도입되었습니다.

문자열을 백 쿼트( ` )로 묶고, 값이 들어가는 부분은 ${ } 사이에 표시합니다.

백 쿼트(Back Quote)는 그레이브(Grave)나 백 틱(Back Tick)이라고도 부릅니다. 

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

// 템플릿 문자열
document.getElementById("result").innerHTML = `num은 ${num}이고, str은 ${str}이다`;

불리언(boolean)

불리언 값은 참(true)과 거짓(false)을 표현합니다.

자바스크립트에서 불리언 값은 예약어인 true와 false를 사용하여 나타낼 수 있습니다.

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 값을 반환함.

null과 undefined는 동등 연산자(==)와 일치 연산자(===)로 비교할 때 그 결괏값이 다르므로 주의해야 합니다.

null과 undefined는 타입을 제외하면 같은 의미지만, 타입이 다르므로 일치하지는 않습니다.

null ==  undefined; // true
null === undefined; // false

형변환

- 문자형으로 변환

value = String(value); // 변수 value엔 문자열 "true"가 저장됩니다.
alert(typeof value); // string

- 숫자형으로 변환

let num = Number(str); // 문자열 "123"이 숫자 123으로 변환됩니다.
alert( "6" / "2" ); // 3, 문자열이 숫자형으로 자동변환된 후 연산이 수행됩니다.

- 불린형으로 변환

alert( Boolean(1) ); // 숫자 1(true)
alert( Boolean(0) ); // 숫자 0(false)

alert( Boolean("hello") ); // 문자열(true)
alert( Boolean("") ); // 빈 문자열(false)

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // 공백이 있는 문자열도 비어있지 않은 문자열이기 때문에 true로 변환됩니다.

객체(object)

자바스크립트의 기본 타입은 객체(object)입니다.

객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있습니다.

객체는 여러 프로퍼티(property)나 메소드(method)를 같은 이름으로 묶어놓은 일종의 집합체입니다.

var dog = { name: "해피", age: 3 }; // 객체의 생성
// 객체의 프로퍼티 참조
document.getElementById("result").innerHTML =
    "강아지의 이름은 " + dog.name + "이고, 나이는 " + dog.age + "살 입니다.";

 

자바스크립트 기본적인 출력

- alert()

alert('메시지')

- prompt()

사용자에게 텍스트를 입력하라는 메시지를 띄워줌과 동시에, 입력 필드를 함께 제공합니다. 확인을 누르면 prompt 함수는 사용자가 입력한 문자열을 반환하고, 취소 또는 Esc를 누르면 null을 반환합니다.

let test = prompt("Test", '');

- confirm()

사용자가 확인 또는 취소 버튼을 누를 때까지 메시지가 창에 보여집니다. 사용자가 확인 버튼을 누르면 true를, 취소 버튼이나 Esc를 누르면 false를 반환합니다.

let isBoss = confirm("당신이 주인인가요?");

alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력됩니다.

 

- 비교 연산자 : 두 대상을 비교할 수 있는 연산자

10 >= 20 // false
'가방' > ‘하마’  //  false 문자열 순서로 비교 가능

// "A"의 아스키 값은 65이고, "a"의 아스키 값은 97입니다.
"A" > "a"  // false

null이나 undefined 비교하기

== 연산자와 === 연산자

== 연산자는 문자형 자료와 자료가 있을 때 자동으로 자료형을 변환하여 비교합니다.

=== 연산자는 두 자료형의 변환을 허용하지 않습니다.

10 == "10"  // true
10 === "10" // false

alert( null === undefined ); // false

alert( null == undefined ); // true

// null vs 0
alert( null > 0 );  // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true  null이 숫자형으로 변환돼 0이 됨

// 비교가 불가능한 undefined
alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)

 

- 배열은 인덱스 사용, 객체는 키를 사용

<script>
    // 객체를 선언합니다.
    var product = {
        제품명: '7D 건조 망고',
        유형: '당절임',
        성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
        원산지: '필리핀'
    };

    // 출력합니다.
    for (var i in product) {
        document.write(i + ':' + product[i]);
    }
</script>

- 속성과 메서드

배열에 있는 값 하나하나를 ‘요소’

객체에 있는 값 하나하나를 ‘속성’

- this 키워드

객체에 있는 속성을 메서드에서 사용하고 싶을 때 자신이 가진 속성임을 표시

<script>
    // 객체를 선언합니다.
    var person = {
        name: '윤인성',
        eat: function (food) {
            document.write(this.name + '이 ' + food + '을/를 먹습니다.');
        }
    };
    // 메서드를 호출합니다.
    person.eat('밥');
</script>

 

- 배열

<script>
    // 변수를 선언합니다.
    var array = ['가', '나', '다', '라'];
    // 배열의 요소를 변경합니다.
    array[0] = '윤';

    // 출력합니다.
    alert(array[0]);
    alert(array[1]);
    alert(array[2]);
    alert(array[3]);
</script>

- 객체 출력

<script>
    // 객체를 선언합니다.
    var object = {
        'with space': 273,
        'with ~!@#$%^&*()_+': 52
    };
    // 출력합니다.
    alert(object['with space']);
    alert(object['with ~!@#$%^&*()_+']);
</script>​

배열의 생성

자바스크립트에서 배열을 만드는 방법은 다음과 같습니다.

1. var arr = [배열요소1, 배열요소2,...];          // 배열 리터럴을 이용하는 방법
2. var arr = Array(배열요소1, 배열요소2,...);     // Array 객체의 생성자를 이용하는 방법
3. var arr = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 Array 객체 생성 방법

위의 세 가지 방법은 모두 같은 결과의 배열을 만들어 줍니다.

배열 리터럴은 대괄호([]) 안에 배열 요소를 쉼표로 구분하여 나열하는 방법으로 생성합니다.

var arrLit = [1, true, "JavaScript"];             // 배열 리터럴을 이용하는 방법
var arrObj = Array(1, true, "JavaScript");        // Array 객체의 생성자를 이용하는 방법
var arrNewObj = new Array(1, true, "JavaScript"); // new 연산자를 이용한 Array 객체 생성 방법

document.write(arrLit + "<br>");                  // 1,true,JavaScript
document.write(arrObj + "<br>");                  // 1,true,JavaScript 
document.write(arrNewObj);                        // 1,true,JavaScript

배열의 참조

자바스크립트에서 배열의 각 요소를 참조하고 싶을 때는 [] 연산자를 사용합니다.

배열이름[인덱스]

 

자바스크립트에서는 배열 요소의 개수를 배열의 길이라고 합니다.

이러한 배열의 길이는 length 프로퍼티에 자동으로 갱신됩니다.

 

자바스크립트에서 인덱스는 언제나 0부터 시작합니다.

또한, 인덱스에는 음이 아닌 정수를 반환하는 임의의 표현식도 사용할 수 있습니다.

이러한 인덱스에는 232보다 작은 양수만을 사용할 수 있습니다.

 

다음 예제는 배열을 생성하고, 생성된 배열에 요소를 추가하고 삭제하는 예제입니다.

var arr = ["JavaScript"]; // 요소가 하나뿐인 배열을 생성함.
var element = arr[0];     // 배열의 첫 번째 요소를 읽어서 대입함.

arr[1] = 10;      // 배열의 두 번째 요소에 숫자 10을 대입함. 배열의 길이는 1에서 2로 늘어남.
arr[2] = element; // 배열의 세 번째 요소에 변수 element의 값을 대입함. 배열의 길이는 2에서 3으로 늘어남.

document.write("배열 arr의 요소에는 [" + arr + "]가 있습니다.<br>"); // 배열의 요소를 모두 출력함.
document.write("배열 arr의 길이는 " + arr.length + "입니다.<br>");   // 배열의 길이를 출력함.

delete arr[2];    // 배열의 세 번째 요소를 삭제함. 하지만 배열의 길이는 변하지 않음.

document.write("배열 arr의 요소에는 [" + arr + "]가 있습니다.<br>"); // 배열의 요소를 모두 출력함.
document.write("배열 arr의 길이는 " + arr.length + "입니다.");       // 배열의 길이를 출력함.

배열 요소의 추가

자바스크립트에서 배열에 새로운 배열 요소를 추가하는 방법은 다음과 같습니다.

1. arr.push(추가할 요소);         // push() 메소드를 이용하는 방법
2. arr[arr.length] = 추가할 요소; // length 프로퍼티를 이용하는 방법
3. arr[특정인덱스] = 추가할 요소; // 특정 인덱스를 지정하여 추가하는 방법

push() 메소드와 length 프로퍼티를 이용한 방법은 모두 배열의 제일 끝에 새로운 요소를 추가합니다.

var arr = [1, true, "Java"];

arr.push("Script");           // push() 메소드를 이용하는 방법
document.write(arr + "<br>"); // 1,true,Java,Script

arr[arr.length] = 100;        // length 프로퍼티를 이용하는 방법
document.write(arr + "<br>"); // 1,true,Java,Script,100

arr[10] = "자바스크립트";     // 특정 인덱스를 지정하여 추가하는 방법
document.write(arr + "<br>"); // 1,true,Java,Script,100,,,,,,자바스크립트
document.write(arr[7]);       // undefined

배열의 순회(iteration)

배열의 모든 요소에 차례대로 접근하고 싶을 때는 for 문과 같은 반복문을 사용하여 접근할 수 있습니다.

var arr = [1, true, "JavaScript"];
var result = "<table><tr>";
for (var idx in arr) {
    result += "<td>" + arr[idx] + "</td>";
}
result += "</tr></table>";
document.write(result);

Array 객체

자바스크립트에서 배열(array)은 정렬된 값들의 집합으로 정의되며, Array 객체로 다뤄집니다.

또한, 자바스크립트는 사용자가 배열과 관련된 작업을 손쉽게 할 수 있도록 다양한 메소드도 제공하고 있습니다.

 

다음 예제는 배열과 각 배열 요소의 typeof 연산 결과를 보여주는 예제입니다.

var arr = new Array(10, "문자열", false);

document.write((typeof arr) + "<br>");    // object
document.write((typeof arr[0]) + "<br>"); // number
document.write((typeof arr[1]) + "<br>"); // string
document.write(typeof arr[2]);            // boolean

다차원 배열

다차원 배열이란 배열 요소가 또 다른 배열인 배열을 의미합니다.

var arr = new Array(3);      // 3개의 요소를 가지는 배열을 생성함.
for (var row = 0; row < 3; row++) {
    arr[row] = new Array(4); // 각각의 요소마다 또다시 4개의 요소를 가지는 배열을 생성함.
    for (var column = 0; column < 4; column++) {
        arr[row][column] = "[" + row + "," + column + "]"; // 각각의 배열 요소를 생성함.
        document.write(arr[row][column] + " ");            // 각 배열 요소에 접근함.
    }
}

---

1. 연산자 =. ==. ===의 차이점

'='는 대입연산자로써 말그대로 값을 대입하는데 쓰이고 '=='는 비교연산자로써 값이 같은지 확인하며 '==='는 일치연산자로써 자료형과 값이 같은지 확인한다.

 

2. 다음의 출력 결과

var a = 'g';
function fn(){
    console.log(a);	// ①
    var a = 'l';
    console.log(a);    // ②
}
fn();

① undefined

② l

fn 함수안의 var a = 'l'의 선언 부분이 함수 내부의 최상위로 호이스팅 되기 때문에 ①의 값은 undefined가 출력이 된다.

그 뒤, 변수a에 l이라는 값을 넣은 뒤, a를 출력을 하게 되는데 이때의 a(②)는 l을 출력하게 된다.