[Javascript] 2강 자바스크립트 문법과 자료형

 

이번 시간에는 Javascript의 기초부분들을 배워보겠습니다. 먼저 자바스크립트를 실행할 Vs Code에 JS를 테스트할 프로그램을 설치해볼까 합니다.

 

자바스크립트를 실행할 Code Rounner를 다운받아 줍니다.

console.log("javascript")

const able = "Hello"

console.log(able + "Hello");

 

코드를 입력하고 오른쪽 재생버튼을 클릭하면 아래 결과값이 제대로 출력되는 것이 보입니다. Javascript는 Node.js 같이 웹 페이지를 실행할 수 없으므로 이렇게 Code Runner를 사용해서 테스트 해볼 수 있습니다.

 

1. 문법과 자료형

 

JavScript는 문법의 대부분을 Java와 C, C++을 기발으로 하고 있습니다 대소문자를 구별하며 유니코드 문자셋을 이용합니다. 예를 들어 Früh(독일어로 "이른")을 변수명으로 사용할 수 있습니다.

var face = "얼굴";
var Früh = "foobar";

 

하지만 Früh 와 früh는 대소문자를 구분하기 때문에 서로 다릅니다. JavaScript에서는 명령을 명령문(statement)라고 부르며, 세미콜론(;)으로 구분합니다. 명령문이 한 줄을 다 차지할 경우 세미콜론이 필요하지 않습니다. 한 줄에 두 개 이상의 명령문이 필요할때는 반드시 세미콜론이 필요합니다.

 

주석

 

주석의 구문의 C++ 및 다른 언어와 똑같은 주석입니다.

// 한줄 주석

/* 
  여러줄을 사용할때 사용하는 주석
*/

/* /* 중첩된 주석을 사용할 수 없다 */ SyntaxError */

 

Javscript의 선언에는 3가지 방법이 있습니다.

 

• var - 변수를 선언, 추가로 동시에 값을 초기화
• let - 블록 스코프 지역 변수를 선언, 추가로 동시에 값을 초기화
• const - 블록 스코프 읽기 전용 상수를 선언(변하지 않는 값 상수)

변수 

 

애플리케이션에서 값에 상징적인 이름으로 변수를 사용합니다 변수명은 식별자라고 불리며 특정 규칙을 따릅니다.

Javascript 식별자는 문자, 밑줄 혹은 달러 기호($)로 시작해야 하는 반면 숫자(0-9)일 수도 있습니다.

 

Javascript가 대소문자를 구분하기에, 문자는 대문자 "A" 부터 "Z" 소문자 "a" 부터 "z" 까지 모두 포함되며 ISO 8859-1 혹은 Unicode 문자도 식별자에 사용할 수 있습니다.변수를 선언하는 방법은 3가지 방법으로 가능합니다.

 

• var 키워드 = var x = 42와 같이 var 키워드로 변수를 선언할 수 있습니다. 이 구문은 실행 맥락에 따라 지역 변수 및 전역 변수를 선언하는데 모두 사용될 수 있습니다.
• let 키워드 = let y = 13와 같이 const 혹은 let 키워드를 사용해 변수를 선언할 수 있습니다. 이 구문은 블록 스코프 지역 변수를 선언하는데 사용할 수 있습니다.

변수 할당

 

지정된 초기 값 없이 var 혹은 let 문을 사용해서 선언된 변수는 undefined 값을 갖습니다. 선언되지 않은 변수에 접근을 시도할 경우 ReferenceError 예외가 발생합니다.

var a;

console.log("a result" + a); // undefined

console.log ("b result"+ b); // undefined

var b;

console.log("c result" + c); // Uncaught ReferenceError: c is not defined

let x = 1;
console.log("x 값은" + x) // success x result 1

 

undefined 값은 불리언 맥락(context)에서 사용될 때 false로 동작합니다. 아래 처럼 thisArray 값의 요소가 undefined이므로 thisArray 함수를 실행합니다. undefined 값은 수치 맥락에서 사용될 때 NaN으로 변환됩니다.

var thisArray = [];
if (!thisArray[0]) thisArray();

 

var a;

a + 2; // NaN

 

null 값을 평가할 때, 수치 맥락에서는 0으로, 불리언 맥락에서는 false 로 동작합니다.

var n = null;
console.log(n * 64) // 0

 

변수 스코프

 

어떤 함수의 바깥에 변수를 선언하면, 현재 문서의 다른 코드에 해당 변수를 사용할 수 있기에 전역 변수라 합니다. 만약 함수 내부에 변수를 선언하면, 오직 그 함수 내에서만 사용할 수 있어 지역 변수라고 부릅니다.

if (true) {
    var x = 5;
}

console.log(x) // 5

 

이 동작은 let 선언을 사용하면 완전히 바뀝니다.

if (true) {
    let x = 5;
}

console.log(y);  // Error

 

변수 호이스팅

 

또 다른 Javascript 변수의 특이한 점은 예외를 받지 않고도, 나중에 선언된 변수를 참조할 수 있습니다.

// EX.1
console.log(x == undefined); // true
var x = 4;


// EX 2

var value = "my value"; // undefined

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

 

호이스팅 때문에, 함수 내 모든 var 문은 가능한 함수 상단 근처에 두는 것이 좋습니다. 이 방법은 코드를 더욱 명확하게 만들어 줍니다. ECMAScript 2015의 let 과 const는 변수를 블록의 상단으로 끌어올리지만 초기화하지 않습니다. 변수가 선언되기 전에 블록 안에서 변수를 참조하게 되면 ReferenceError를 발생시키게 되며, 변수는 블록 시작부터 선언이 처리될 때까지 "temporal dead zone"에 위치하게 되기 때문입니다.

console.log(a); // error

let a = 4;

 

함수 호이스팅

 

함수에서는 함수 선언으로 호이스팅되지만 함수 표현식으로는 호이스팅 되지 않습니다.

/* function */

foo(); // "bar"

function foo() {
    console.log("bar");
    
}

/* 함수 표현식 */

cuz(); // TypeError 

var cuz = function() {
    console.log("cuz");
    
}

 

전역 변수 

 

웹 페이지에서 전역 객체는 window이므로, windows.variable 구문을 통해 전역 변수를 설정하고 접근할 수 있습니다. 그 결과, window 혹은 frame의 이름을 지정하여 한 window 혹은 frame 에서 다른 window 혹은 frame에서 선언된 전역 변수에 접근 할 수 있습니다. 전역 변수는 사실 전역 객체의 속성(property)입니다.

 

상수 

 

const 키워드로 읽기 전용 상수를 만들 수 있습니다. 상수 식별자의 구문은 변수 식별자와 같습니다 문자, 밑줄이나 기호로 시작해야 하고 문자 ,숫자 밑줄을 포함할 수 있습니다.

const PI = 3.14;

 

상수는 스크립트가 실행 중인 동안 대입을 통해 값을 바꾸거나 재선언될 수 없습니다. 값으로 초기화해야 하고 상수에 대한 스코프 규칙은 let 블록 스코프 변수와 동일하게 작동합니다. const 키워드가 생략된 경우에는, 식벽자는 변수를 나타내는 것으로 간주됩니다. 상수는 같은 스코프에 있는 함수나 변수와 동일한 이름으로 선언할 수 없습니다.

 

// const PI = 3.14;


function f () {}


const f = 6;

// Error
function f() {
    const g =  10;
    var g;
}

 

상수에 할당된 객체의 속성은 보호되지 않아 다음의 문도 문제 없이 실행됩니다.

const My_Array = ["HTML", "CSS"];

My_Array.push("JAVASCRIPT");
console.log(My_Array);  // [ 'HTML', 'CSS', 'JAVASCRIPT' ]

 

데이터 구조 및 형

 

최신 ECMScript 표준은 8가지 데이터 형을 정의합니다.

 

• 7가지 원시 데이터 형
  • Boolean: true & false
  • null: null 값을 나타내는 특별한 키워드
  • undefined: 값이 정의되어 있지 않은 최상위 속성
  • Number: 정수 또는 실수형 숫자(42 혹인 3.14)
  • BigInt: 임의 정밀도의 정수
  • String: 문자열
  • Symbol: (ECMAScript 2015에 도입) 인스턴스가 고유하고 불변인 데이터 형.
• Object

Object - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

자료형 변환

 

JavaScript는 동적 형지형(정형) 언어로, 변수를 선언할 때 데이터 형을 지정할 필요가 없음을 의미합니다. 다음과 같이 변수를 정의할 수 있습니다.

var answer = 42;

 

동일한 변수에 문자열 값을 할당할 수 있습니다.

answer = "Thanks for Watching"

 

Javascript는 동적 형지형 언어이므로, 이 할당은 오류 메시지가 발생하지 않습니다.

 

숫자와 '+' 연산자 

 

숫자외 문자열 값 사이 + 연산자를 포함한 식에서, JavaScript는 숫자 값을 변환합니다.

x = "The answer is " + 42  // "The answer is 42"
console.log(x);

y = 42 + " is the answer" // "42 is the answer"
console.log(y);

 

다음 연산자를 포함한 식의 경우,  JavaScript는 숫자 값을 문자열로 변환하지 않습니다.

"37" - 7; // 30
"37" + 7 // "377";

 

문자열을 숫자로 변환하기

 

숫자를 나타내는 값이 문자열로 메모리에 있는 경우, 변환을 위한 메서드가 있습니다.

• parseInt()
• parseFloat()

parsInt는 오직 정수만 반환하므로, 소수에서는 사용성이 떨어집니다. 

parseInt("101", 2); // 5

'1.1' + '1.1'= 1.11.1
(+'2.2') + (+'2.2') = 4.4

 

리터럴

 

JavaScript에서 값을 나타내기 위해 리터럴을 사용합니다. 말 그대로 스크립트에 부여한 고정 값으로, 변수가 아닙니다.

• 배열 리터럴
• 불리언 리터럴
• 부동 소수점 리터럴
• 숫자 리터럴
• 객체 리터럴
• 정규식 리터럴
• 문자열 리터럴

배열 리터럴

 

배열 리터럴은 0개 이상의 식(expression) 목록입니다. 각 식은 배열 요소를 나타내고 대괄호( [] )로 묶입니다. 배열 리터럴을 사용하여 배열을 만들때는 요소를 지정된 값으로 초기화되고, 길이는 지정된 인수의 갯수로 설정됩니다.

 

let Animals = ["Tiger", "Cat", "Dog"];

 

배열이 최상단 스크립트에서 리터럴을 사용해 만들어질 경우, Javascript에서 배열 리터럴을 포함한 식을 평가할 때마다 배열로 해석합니다. 게다가, 함수에서 사용되는 리터럴은 함수가 호출될 때마다 생성됩니다.

 

배열 리터럴에서 모든 요소를 지정할 필요 없이 쉼표를 추가해 비워둘 수 있습니다.

let Animals = ["Tiger", , "Dog"];

 

배열에 값이 있는 두 요소와 빈 요소 하나를 가집니다.

• Animals[0] = "Tiger"
• Animals[1] = undefined
• Animals[2] = "Dog"

불리언 리터럴 

 

불리언 형은 true 와 false의 리터럴 값을 가집니다.

let Toy = true;

if ( Toy == true) {
    console.log("Toy is True");
    
}

 

숫자 리터럴

 

숫자 리터럴은 다른 진법의 정수 리터럴과 10진수의 부동 소수점 리터럴이 포함됩니다. 숫자 리터럴에는 부호가 없어야합니다.

 

정수 리터럴

 

정수와 BigInt 리터럴은 10진수, 16진수, 8진수 및 2진수로 표현될 수 있습니다.

// 정수 리터럴

// 0, 117, 123456789123456789 (10진수)

// 015, 0001, 0o77777777777n (8진수)

// 0x1123, 0x00111, 0x123456789ABCDEFn (16진수)

// 0b11, 0b0011, 0b11101001010101010101n (2진수)

 

부동 소수점 리터럴

 

부동 소수점 리터럴은 아래와 같은 부분으로 이루어 집니다.

• 부호없는 10진 정수
• 소수점
• 소수
• 지수

객체 리터럴

 

객체 리터럴은 중괄호( {} ) 로 묶인 0개 이상인 객체 속성명과 관련 값 쌍 목록입니다. 

var sales = "Kia";

function carTypes(name) {
    if (name === "Honda") {
        return name;
    } else {
        return "Sorry, we don't sell " + name + ".";
    }
}

var car = { myCar: "Saturn", getCar: carTypes("Honda"), special: sales};

console.log(car.myCar); // Saturn
console.log(car.getCar); // Honda
console.log(car.special); // Kia

 

속성명으로 숫자나 문자열 리터럴을 사용하거나 또다른 객체 리터럴 내부에 객체를 중첩할 수도 있습니다.

var car2 = { manyCars: { a: "Sedan", b: "Jeep"}, 7: "Mazda"};

console.log(car2.manyCars.b); // Jeep
console.log(car2[7]); // Mazda

 

객체 속성명은 빈 문자열 포함 어떤 문자열도 될 수 있습니다. 속성명이 유효한 JavaScript 식별자나 숫자가 아닌 경우, 따옴표로 묶어야 합니다. 또한 유효한 식별자가 아닌 속성명은 점 속성으로 접근할 수 없습니다. 대신 배열 같은 표기법([])으로 접근하고 값을 설정할 수 있습니다.

var PropertyNames = {
    '': 'An empty string',
    '!': 'Bang!'
}

console.log(PropertyNames.''); //Error
console.log(PropertyNames['']); // empty
console.log(PropertyNames.!); // Error
console.log(PropertyNames['!']); // Bang!

 

항상된 객체 리터럴

 

ES2015에서, 객체 리터럴은 구성에서 프로토타입 설정, foo: foo 할당을 위한 단축 표기, 메서드 정의, super 클래스 호출 및 식으로 동적인 속성명 계산을 지원하기 위해 확장됐습니다.

 

var obj = {
    // ___proto__
    __proto__: theProtoObj,
    // 'handler: handler'의 단축 표기
    handler,
    // Methods
    toString() {
        // Super calls
        return "d " + super.toString();
    },
    // Cumputed (dynamic) property names
    ["prop_" + (() => 42)()]: 42,
};

 

정규식 리터럴

 

정규식 리터럴은 슬래시 사이에 감싸인 패턴입니다.

var re = /ab+c/;

 

문자열 리터럴

 

문자열 리터럴은 큰 따옴표 혹은 작은 따옴표로 묶인 0개 이상의 문자입니다. 문자열은 같은형 따옴표로 구분합니다.

'foo';
"bar";
'1234';
'one lin \n another line';
"John's cat";

 

꼭 String 객체를 사용할 필요가 없는 경우 문자열 리터럴을 사용해야 합니다. 문자열 리터럴 값은 String 객체의 모든 메서드를 호출할 수 있습니다. JavaScript는 자동으로 문자열 리터럴을 임시 문자열 객체로 변환, 메서드를 호출하고 나서 임시 문자열 객체를 폐기합니다. 또한 문자열 리터럴에서도 String.length 속성을 사용할 수 있습니다.

// 공백을 포함한 문자열 내 심볼 갯수 출력
console.log("He is cat".length); // 9

 

템플릿 리터럴을 사용해 문자열 구성을 위한 구문을 제공합니다.

// 기본적인 문자열 리터럴 생성
`In JavaScript '\n' is a line-feed.`;

// 여러줄 문자열
`In Javascript, template string can run 
over multiple lines, but double and single
quoted strings cannot.`;

// 문자열 삽입
var name = "Bob";
   time = "today";
   `Hello ${name}, how are you ${time}`;

 

Tagged templates는 구문 분석을 위한 "태그" 함수에 대한 호출과 함께 템플릿 리터럴을 지정하기 위한 간결한 구문입니다. 템플릿 태그 함수의 이름은 코드처럼 템플릿 태그 함수가 이름인 것과 템플릿 리터럴 앞에 옵니다.

let myTag = (str, name, age) => `${str[0]}${name}${str[1]}${age}${str[2]}`;
let [name, age] = ["Mosk", 29];
myTag`Particpant "${name}" is ${age} years old.`;
// Participant "Mosk" is 29 years old.

 

문자열에서 특수 문자 사용

 

보통 문자에 더해서, 문자열에 아래 예제와 같이 특수 문자도 포함될 수 있습니다.

// 특수 문자 사용
console.log("one line \n another line");

 

문자 이스케이프

 

표에 없는 문자의 경우 진행 백슬래시는 무산되지만, 이 용법은 더 이상 사용되지 않으며, 사용을 피해야 합니다. 전행 백슬래시와 함께 문자열 안에 따옴표를 사용할 수 있습니다. 이것을 따옴표 이스케이프라고 합니다.

// 문자 이스케이프

var quote = "He read \"the Cremation of Sam McGee\" by R.W. Service.";
console.log(quote);

 

백슬래시를 문자열 내에 포함시키기 위해서, 백슬래시 문자를 이스케이프 해야 합니다. 

var home = "c:\\temp";

 

또한 줄바꿈 역시 전행 백슬래시로 이스케이프할 수 있습니다. 백슬래시와 줄바꿈 모두 문자열 값에서 사라집니다.

var str = 
    "this string \ 
    is broken \ 
    across multiple \ 
    lines.";
console.log(str);

 

JavaScript에는 "heredoc" 구문은 없지만. 줄바꿈 이스케이프와 각 줄 끝 이스케이프된 줄바꿈을 추가할 수 있습니다.

var poem = 
  "Roses are red,\n\
  Violets are blue,\n\
  Sugar is sweet,\n\
  and so is foo.";

  console.log(poem);

 

ECMAScript 2015에서는 템플릿 리터럴이라는 새로운 리터럴이 소개되었습니다. 이것은 다중 문자열을 포함한 많은 새로운 기능을 가지고 있습니다.

// 템플릿 리터럴
var poem = `Roses are red, 
Violets are blue.
Sugar is sweet,
and so is foo.`;
  
console.log(poem);

 

참고 자료

문법과 자료형 - JavaScript | MDN

 

GitHub - javascript-only/javascript-bloging