JavaScript Syntax Basics

1.변수

 

변수는 값을 할당하고 저장된 값을 참조하기위해 사용한다 . 한번쓰고 버리는값이 아니고 유지할 필요가 있는 값은 변수에 할당한다

 

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

 

변수는 위치를 기억하는 저장소다. 위치란 메모리 상의 주소를 뜻한다 .

변수란 메모리 주소에 접근하기위해 사람이 이해할수있는언어로 지정한 식별자다

 

변수를 선언할때 var 키워드를 사용하고, 할당 연산자 = 는 변수에 값을 할당하기 위해서 사용한다

(여기서 잠깐 ES5 이후로 var 은 사용하지않는다 , let 이나 const 를 주로 사용함 자세한건 추후에 다루겠음)

 

let x;
x = 3;

 

2.값

 

let str = 'Hello World';

위 예제는 str이라는 이름의 변수를 선언하고 문자열 리터럴 ‘Hello World’를 값으로 할당하였다.

 

이때 문자열 리터럴 ‘Hello World’는 문자열 타입의 값이다

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

값은 프로그램에 의해 조작될수있는 대상을 말한다. 값은 다양한 방법으로 생성해낼수있다

 

가장 간단한 방법은 리터럴 표기법을 사용하는것이다

 

// 숫자 리터럴
10.50
1001

// 문자열 리터럴
'Hello'
"World"

// 불리언 리터럴
true
false

// null 리터럴
null

// undefined 리터럴
undefined

// 객체 리터럴
{ name: 'Lee', gender: 'male' }

// 배열 리터럴
[ 1, 2, 3 ]

// 정규표현식 리터럴
/ab+c/

// 함수 리터럴
function() {}

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

 

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

 

// 산술 연산
10.50 + 1001

자바스크립트의 모든 값은 데이터 타입을 갖는다. 자바스크립트에는 7가지 데이터 타입을 제공한다

 

• 원시 타입 (primitive data type)
  • number
  • string
  • boolean
  • null
  • undefined
  • symbol (New in ECMAScript 6)
• 객체 타입 (Object data type)
  • object

 

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

 

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

(이로인해 오류가 생기는경우가 많다..실제경험 그래서 타입스크립트를 좋아하게됨)

이것을 동적타이핑이라 하고 자바스크립트가 다른언어와 구별되는 특징중 하나이다 

 

 

// Number
let num1 = 1001;
let num2 = 10.50;

// String
let string1 = 'Hello';
let string2 = "World";

// Boolean
let bool = true;

// null
let foo = null;

// undefined
let bar;

// Object
let obj = { name: 'Lee', gender: 'male' };

// Array
let array = [ 1, 2, 3 ];

// function
let foo = function() {};

 

3. 연산자

 

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

 

이때 연산의 대상을 피연산자라고 한다

 

// 산술 연산자
let area = 5 * 4; // 20

// 문자열 연결 연산자
let str = 'My name is ' + 'Lee'; // "My name is Lee"

// 할당 연산자
let color = 'red'; // "red"

// 비교 연산자
let foo = 3 > 5; // false

// 논리 연산자
let bar = (5 > 3) && (2 < 4);  // true

// 타입 연산자
let type = typeof 'Hi'; // "string"

// 인스턴스 생성 연산자
let today = new Date(); // Sat Dec 01 2018 00:57:19 GMT+0900 (한국 표준시)

 

피연산자의 타입은 반드시 일치할 필요는 없다. 이때 자바스크립트는 암묵적 타입 강제 변환을 통해 연산을 수행한다.

Type coercion | PoiemaWeb

 

let foo = 1 + '10'; // '110'
let bar = 1 * '10'; // 10

 

 

4.키워드 

 

키워드는 수행할 동작을 규정한것이다 예를 들어 let 키워드는 새로운 변수를 생성할것을 지시한다

// 변수의 선언
let x = 5 + 6;

// 함수의 선언
function foo (arg) {
  // 함수 종료 및 값의 반환
  return ++arg;
}

let i = 0;
// 반복문
while (1) {
  if (i > 5) {
    // 반복문 탈출
    break;
  }
  console.log(i);
  i++;
}

 

 

5.주석

 

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

 

코드는 이해하기 쉬워야한다 . 여러분이 작성한 코드를 다른사람이 읽는다면 이해를 못하는 순간이 있을것이다

 

우리가 해야할 일은 바로 그런부분에 대해 주석을 다는것이다

 

한줄 주석은 // 다음에 작성하며 여러 줄 /* 과 /* 의 사이에 작성한다 주석은 해석기가 무시하며 실행되지않는다

 

// 주석은 작성된 코드의 의미를 설명하기 위해 사용한다. 코드는 읽고 이해하기가 쉬워야한다

/*
  주석은 작성된 코드의 의미를 설명하기 위해 사용한다
  코드는 읽기 쉬워야한다
/*

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

 

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

// Good
let age = 10;

 

 

6.문

 

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

 

각각의 명령을 문이라 하며 문이 실행되면 무슨 일인가가 일어난다 ㅋㅋ

 

문은 리터럴, 연산자, 표현식, 키워드 등으로 구성되며 세미콜론으로 끝을 맺어야한다

 

let x = 5;
let y = 6;
let z = x + y;

console.log(z);

문은 코드블록(code block, {…})으로 그룹화할수있다 그룹화의 목적은 함께실행되어야 하는 문을 정의하기위해서.

 

// 함수
function myFunction(x, y) {
  return x + y;
}

// if 문
if(x > 0) {
  // do something
}

// for 문
for (let i = 0; i < 10; i++) {
  // do something
}

문들은 위에서 아래로 순서대로 실행된다. 이러한 실행 순서는 조건문이나 반복문의 사용으로 제어할수있다

 

이를 흐름제어라고 한다, 또는 함수 호출로 변경할수있다

 

let time = 10;
let greeting;

if (time < 10) {
  greeting = 'Good morning';
} else if (time < 20) {
  greeting = 'Good day';
} else {
  greeting = 'Good evening';
}

console.log(greeting);

다른 언어와 달리 자바스크립트에서는 블록 유효범위를 생성하지않는다

 

함수 단위의 유효범위만이 생성되기 때문에

 

7.표현식

 

표현식은 하나의 값으로 평가가 된다

 

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

 

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

 

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

 

// 표현식
5             // 5
5 * 10        // 50
5 * 10 > 10   // true
(5 * 10 > 10) && (5 * 10 < 100)  // true

 

8.문과 표현식의 비교

 

자연어에서 문이 마침표로 끝나는 하나의 완전한 문장이라고 한다면

 

표현식은 문을 구성하는 요소다. 표현식은 그자체로 하나의 문이 될 수도 있다

 

// 선언문(Declaration statement)
let x = 5 * 10; // 표현식 x = 5 * 10를 포함하는 문이다.
// 할당문(Assignment statement)
x = 100; // 이 자체가 표현식이지만 완전한 문이기도 하다.

표현식고 문은 매우 같아서 구별하기가 굉장히 어려울수도있다

 

표현식은 평가되어서 값을 만들지만 그 이상의 행위는 할수 없다. 문은 let,const, function 과 같은 선언 키워드를 사용해서

 

변수나 함수를 생성하기도하고, if,for,while 과 같은 제어문을 생성해서 프로그램의 흐름을 제어하기도한다 

 

표현식을 통해 평가한값을 통해 실제로 컴퓨터에게 명령을 하여 무언가를 하는것은 문이다

 

 

9.함수

 

함수란 어떤 작업을 하기위해 필요한 문들의 집합을 정의한 코드 블록이다

 

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

 

// 함수의 정의(함수 선언문)
function square(number) {
  return number * number;
}

함수는 호출에 의해 실행되는데 한번만 호출할수있는것이아니라 여러번 호출할수있다

 

// 함수의 정의(함수 선언문)
function square(number) {
  return number * number;
}

// 함수의 호출
square(2); // 4

 

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

 

코드중복을 방지하기위함 , 코드 재사용이 굉장히 유용해진다

 

 

 

10.객체

 

자바스크립트는 객체 기반의 스크립트 언어이고 자바스크립트를 이루고있는 거의 모든 것이 객체다

 

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

 

자바스크립트 객체는 키와 값으로 구성된 프로퍼티의 집합이다. 프로퍼티 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할수있다

 

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

 

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

 

let person = {
  name: 'Jung',
  gender: 'male',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};

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

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

 

이와 같이 객체는 데이터를 의미하는 프로퍼티와 데이터를 참조하고 조작할수 있는 동작의 의미한느 메소드로 구성된 집합이다

 

객체는 프로퍼티와 그 데이터에 관련되는 동작(메소드)를 모두 포함할수 있기 때문에 데이터와 동작을 하나의 단위로 구조화 할수있다

 

자바스크립트 객체는 객체지향의 상속을 구현하기 위해 "프로토타입"이라고 불리는 객체의 프로퍼티와 메소드를 상속받을수있다

 

이 프로토타입은 타 언와 구별되는 아주 중요한 개념이다

 

 

 

11. 배열

 

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

 

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

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

 

 

 

 

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

Syntax Basics | PoiemaWeb