5. Syntax Basics 자바스크립트의 기본 문법

https://poiemaweb.com/js-syntax-basics

Syntax Basics | PoiemaWeb

 

 

1. 변수
변수(Variable)는 값(value)을 저장(할당)하고 그 저장된 값을 참조하기 위해 사용한다. 

한번 쓰고 버리는 값이 아닌 유지(캐싱)할 필요가 있는 값은 변수에 담아 사용한다. 

또한 변수 이름을 통해 값의 의미를 명확히 할 수 있어 코드의 가독성이 좋아진다.

변수는 위치(주소)를 기억하는 저장소이다. 

위치란 메모리 상의 주소(address)를 의미한다. 

즉, 변수란 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)이다.

변수를 선언할 때 var 키워드를 사용한다. 

할당 연산자 =는 변수에 값을 할당하기 위해 사용한다.

 

 var x; // 변수의 선언

 x = 6; // 정수값의 할당

 

 

 

 

2. 값

 

 

 var str = 'Hello World';

 

 

데이터 타입 : 프로그래밍 언어에서 사용할 수 있는 값의 종류

변수 : 값이 저장된 메모리 공간의 주소를 가리키는 식별자

리터럴 : 소스코드 안에서 직접 만들어 낸 상수 값 자체를 말하여 값을 구성하는 최소 단위 

 

값 은 프로그램에 의해 조작될 수 있는 대상을 말한다. 

 

 

// 숫자 리터럴

10.50

1001

// 문자열 리터럴

'Hello'

"World"

// 불리언 리터럴

true

false

// null 리터럴

null

// undefined 리터럴

undefined

// 객체 리터럴

{ name: 'Lee', gender: 'male' }

// 배열 리터럴

[ 1, 2, 3 ]

// 정규표현식 리터럴

/ab+c/

// 함수 리터럴

function() {}

 

 

숫자, 문자열, 불리언과 같은 원시 타입의 리터럴은 다양한 연산자의 피연산자가 되어 하나의 값으로 평가될 수 있다. 

이렇게 리터럴은 연산에 의해 하나의 값이 될 수 있다.

 

자바스크립트의 모든 값은 데이터 타입을 갖는다. 

원시 타입 (primitive data type)

• number
• string
• boolean
• null
• undefined
• symbol (New in ECMAScript 6)

 

객체 타입 (Object data type)

• object

자바스크립트는 C나 Java외는 다르게 변수를 선언할 때 데이터 타입을 미리 지정하지 않는다. 

다시 말해, 변수에 할당된 값의 타입에 의해 동적으로 변수의 타입이 결정된다. 

이를 동적 타이핑이라 하며 자바스크립트가 다른 프로그래밍 언어와 구별되는 특징 중 하나이다.

 

---

 

동적 타이핑

변수의 데이터 타입을 런타임(runtime) 시점에 결정하는 방식을 말합니다.

이는 변수를 선언할 때 명시적으로 데이터 타입을 지정하지 않아도 되는 특성을 가집니다.

 

타입 오류 

변수가 예상한 데이터 타입과 다른 종류의 값을 할당하는 경우 타입 오류(Type Error)가 발생할 수 있습니다.

이는 런타임 시점에 확인되며, 대부분의 경우 실행 중에 오류가 발생하는 원인이 됩니다.

 

타입스크립트(TypeScript)는 동적 타이핑 언어에서 발생할 수 있는 타입 오류를 사전에 방지하고 코드의 안정성을 높이는 데 큰 도움이 됩니다.

 

---

 

3. 연산자(Operator)
하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다. 

이때 연산의 대상을 피연산자(Operand)라 한다.

 

// 산술 연산자

var area = 5 * 4; // 20

// 문자열 연결 연산자

var str = 'My name is ' + 'Lee'; // "My name is Lee"

// 할당 연산자

var color = 'red'; // "red"

// 비교 연산자

var foo = 3 > 5; // false

// 논리 연산자

var bar = (5 > 3) && (2 < 4);  // true

// 타입 연산자

var type = typeof 'Hi'; // "string"

// 인스턴스 생성 연산자

var today = new Date(); // Sat Dec 01 2018 00:57:19 GMT+0900 (한국 표준시)

 

 

 

피연산자의 타입은 반드시 일치할 필요는 없다. 

이때 자바스크립트는 암묵적 타입 강제 변환을 통해 연산을 수행한다.

 

var foo = 1 + '10'; // '110'

var bar = 1 * '10'; // 10

 

 

---

 

4. 키워드 (예약어)
키워드(keyword)는 수행할 동작을 규정한 것이다. 예를 들어 var 키워드는 새로운 변수를 생성할 것을 지시한다.

 

var , function , while , if .. 

 

---

 

5. 주석
주석(Comment)은 작성된 코드의 의미를 설명하기 위해 사용한다.

한줄 주석  // 다음에 작성하며

여러 줄 주석  /*   */의 사이에 작성

 

주석은 해석기(parser)가 무시하며 실행되지 않는다.

 

 

하지만 과도한 주석은 오히려 가독성을 해칠 수 있다. 주석 없이도 읽을 수 있는 코드가 최선이다.

// Bad

// 변수 x는 나이를 나타낸다. x에는 정수 10을 할당한다.

var x = 10;

// Good

var age = 10;

 

 

6. 문장 (statement) , 명령

 

프로그램은 컴퓨터에 의해 단계별로 수행될 명령들의 집합이다.

 

statement 는 프로그래밍 언어에서 실행 가능한 최소 단위의 명령을 말합니다.

리터럴, 연산자(Operator), 표현식(Expression), 키워드(Keyword) 등으로 구성되며 세미콜론( ; )으로 끝나야 한다.

 

1. 기본적인 명령: 문장은 프로그램에서 기본적인 명령을 나타냅니다. 예를 들어, 변수 선언, 할당, 함수 호출 등이 문장의 예입니다.
2. 흐름 제어: 조건문(if, else), 반복문(for, while), switch 문 등과 같은 흐름 제어 구조도 문장의 일종입니다. 이들은 프로그램의 흐름을 제어하고, 조건에 따라 다른 명령을 실행하거나 반복 실행하는 역할을 합니다.
3. 선언문: 함수 선언, 클래스 선언, 변수 선언 등도 문장의 형태를 가집니다. 이들은 프로그램에서 다른 코드에서 참조할 수 있는 구성 요소를 정의합니다.
4. 특정 목적의 명령: 특정 목적을 위해 디자인된 특수한 명령도 문장으로 취급될 수 있습니다. 예를 들어, 데이터베이스에 쿼리를 보내는 SQL 문장이 그 예입니다.

각 프로그래밍 언어는 자체적으로 문장을 정의하고 있으며, 문장의 종류와 구문은 언어마다 다를 수 있습니다.

JavaScript에서의 문장은 다음과 같은 예시를 들 수 있습니다:

• 변수 할당문: let x = 10;
• 조건문: if (x > 5) { ... } else { ... }
• 반복문: for (let i = 0; i < 5; i++) { ... }
• 함수 선언문: function add(a, b) { return a + b; }

 

일반적으로 위에서 아래로 순서대로 실행되며,

흐름제어(Control Flow) [조건문(if, switch), 반복문(while, for)] 또는  함수 호출로 실행 순서가 변경 될 수 있다. 

 

 

자바스크립트에서는 블록 유효범위(Block-level scope)를 생성하지 않는다.

함수 단위의 유효범위(Function-level scope)만이 생성된다.

 

 

함수 단위의 유효범위 (Function-level scope):

• 자바스크립트에서 변수는 함수 내에서 선언되면 그 함수 내에서만 유효합니다.
• 함수 내에서 선언된 변수는 그 함수의 지역 변수(local variable)로 취급됩니다.
• 함수 단위의 유효범위에서는 변수가 선언된 함수 내에서만 접근할 수 있고, 함수 외부에서는 접근할 수 없습니다.
•  function myFunction() {

      var x = 10; // 함수 내에서 선언된 변수 x

      console.log(x); // 10 출력

   }

   console.log(x); // 에러: x는 정의되지 않았습니다 (함수 외부에서 접근 불가)

 

 

블록 유효범위 (Block-level scope):

• 코드 블록({}) 내에서 변수가 유효한 범위로 조건문(if, for 등)이나 반복문 내에서 변수를 선언할 때 적용됩니다.
• 블록 내에서 선언된 변수는 블록 내에서만 유효하고, 블록 외부에서는 접근할 수 없습니다.
• 이는 코드의 가독성과 변수의 스코프를 좀 더 명확하게 구분할 수 있게 해줍니다.
• 자바스크립트는 ES6 (ECMAScript 2015)에서 let과 const 키워드를 도입하여 블록 유효범위를 지원하기 시작했지만, 이전에는 var 키워드를 사용할 때 함수 단위의 유효범위만 적용되었습니다.
•  if (true) {

      var y = 20; // var 키워드 사용

      let z = 30; // ES6에서 도입된 블록 유효범위 변수

      console.log(y); // 20 출력

      console.log(z); // 30 출력

   } 

   console.log(y); // 20 출력 (var 키워드는 함수 단위의 유효범위를 가짐)

   console.log(z); // 에러: z는 정의되지 않았습니다 (블록 외부에서 접근 불가)

 

---

 

7. 표현식
표현식(Expression)은 하나의 값으로 평가(Evaluation)된다. 

 

값(리터럴), 변수, 객체의 프로퍼티, 배열의 요소, 함수 호출, 메소드 호출, 피연산자와 연산자의 조합은 모두 표현식이며 하나의 값으로 평가(Evaluation)된다. 

 

표현식은 결국 하나의 값이 되기 때문에 다른 표현식의 일부가 되어 조금 더 복잡한 표현식을 구성할 수도 있다. 

아래의 예에서 5 * 10은 50으로 평가(연산)된다.

 

// 표현식

5             // 5

5 * 10        // 50

5 * 10 > 10   // true

(5 * 10 > 10) && (5 * 10 < 100)  // true

 

앞에 연산 과정보다는 연산하고 나온 값 에 중점을 둔다는 뜻

 

 

8. 문장과 표현식 (Expression) 의 비교

 

표현식 (Expression) 은 값으로 평가되는 코드 조각이고,

문장 (statement)은 프로그램의 동작을 설명하거나 제어하는 구조적인 요소입니다.

 

JavaScript에서는 표현식이 문장의 일부로 사용될 수 있지만, 문장 자체는 값으로 평가되지 않습니다.

 

---

 

9. 함수
함수란 어떤 작업을 수행하기 위해 필요한 문장(statement)들의 집합을 정의한 코드 블록이다. 

함수는 이름과 매개변수를 갖으며 필요한 때에 호출하여 코드 블록에 담긴 문들을 일괄적으로 실행할 수 있다.

 

동일한 작업을 반복적으로 수행해야 한다면 미리 정의된 함수를 재사용하는 것이 효율적이다.

이러한 특성은 코드의 재사용이라는 측면에서 매우 유용하다.

 

// 함수의 정의(함수 선언문)

function square(number) {

    return number * number;

  }

 

  // 함수의 호출

  square(2); // 4

 

 

---

 

10. 객체 (object)
자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 

원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.

자바스크립트 객체는 key - value 로 구성된 프로퍼티(property)의 집합이다. 

프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 

 

자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 

따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.

 

var person = {

    name: 'Lee',

    gender: 'male',

    sayHello: function () {

      console.log('Hi! My name is ' + this.name);

    }

  };

 

  console.log(typeof person); // object

  console.log(person); // { name: 'Lee', gender: 'male', sayHello: [Function: sayHello] }

 

  person.sayHello(); // Hi! My name is Lee

 

 

 

11. 배열
배열(array)은 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 자바스크립트의 배열은 객체이며 유용한 내장 메소드를 포함하고 있다.

 

var arr = [1, 2, 3, 4, 5];

console.log(arr[1]); // 2