|
| 1 | +# 1 - 자바스크립트(JS)의 기본 문법 |
| 2 | +> 참고 : https://poiemaweb.com/js-syntax-basics |
| 3 | + |
| 4 | +## 1. 변수 (Variable) |
| 5 | + |
| 6 | +값(value)을 저장(할당)하고 참조하는 저장공간이 변수다. |
| 7 | + |
| 8 | +일회용이 아닌, 유지(캐싱)가 필요한 값은 변수에 담아쓴다. |
| 9 | +변수 이름으로 값을 담아쓰면 값의 의미를 변수의 이름으로 알수 있어서, 코드의 가독성이 좋아진다. |
| 10 | + |
| 11 | +변수의 값은 메모리 주소에 저장되는데, 이것을 접근하기 위해 사람이 아는 언어로 지정한 식별자(identifier)이다. |
| 12 | +그래서 사람은 식별자로 변수를 접근해서, 변수의 값이 있는 메모리 주소를 접근할 수 있는 것이다. |
| 13 | + |
| 14 | +```js |
| 15 | +var x // 변수를 선언 |
| 16 | +x= 10 // 변수에 정수(10)를 할당 |
| 17 | +``` |
| 18 | + |
| 19 | +변수를 선언할 때 ```var``` 키워드를 변수이름 앞에 사용한다. |
| 20 | +그리고 할당 연산자 ```=```으로, 변수에 값을 할당한다. |
| 21 | + |
| 22 | + |
| 23 | +## 2. 값 (Value) |
| 24 | + |
| 25 | +단어|뜻 |
| 26 | +:---:|:---: |
| 27 | +자료형(데이터 타입, Data Type)|프로그래밍 언어에서 사용할 수 있는 값의 종류 |
| 28 | +변수(Variable)|값이 저장된 메모리 공간의 주소를 가리키는 식별자(identifier) |
| 29 | +리터럴(literal)|소스코드 안에서 직접 만들어 낸 상수 값 자체를 말하며 값을 구성하는 최소 단위 |
| 30 | + |
| 31 | +**값,** 프로그램으로 조작가능한 대상이라 표현하며, 간편한 방법으로 리터럴 표기법(literal notation)을 사용한다. |
| 32 | + |
| 33 | +리터럴이란 단어가 생소한데, 아래와 같은 방법으로 표현하는 것이다. |
| 34 | + |
| 35 | +```js |
| 36 | +// 숫자 리터럴 |
| 37 | +10.50 |
| 38 | +1001 |
| 39 | + |
| 40 | +// 문자열 리터럴 |
| 41 | +'Hello' |
| 42 | +"World" |
| 43 | + |
| 44 | +// 불리언 리터럴 |
| 45 | +true |
| 46 | +false |
| 47 | + |
| 48 | +// null 리터럴 |
| 49 | +null |
| 50 | + |
| 51 | +// undefined 리터럴 |
| 52 | +undefined |
| 53 | + |
| 54 | +// 객체 리터럴 |
| 55 | +{ name: 'Lee', gender: 'male' } |
| 56 | + |
| 57 | +// 배열 리터럴 |
| 58 | +[ 1, 2, 3 ] |
| 59 | + |
| 60 | +// 정규표현식 리터럴 |
| 61 | +/ab+c/ |
| 62 | + |
| 63 | +// 함수 리터럴 |
| 64 | +function() {} |
| 65 | +``` |
| 66 | + |
| 67 | +위에서 봤듯이, 값들도 각각의 자료형(데이터 타입)이 있는데, js의 모든 값들은 7가지 자료형 중 하나에 속한다. |
| 68 | + |
| 69 | +원시 타입 (primitive data type) |
| 70 | +- number |
| 71 | +- string |
| 72 | +- boolean |
| 73 | +- null |
| 74 | +- undefined |
| 75 | +- symbol (ES6에서 추가됨) |
| 76 | +객체 타입 (Object data type) |
| 77 | +- object |
| 78 | + |
| 79 | +참고로 js는 변수를 선언할 때 위같은 자료형을 지정하지 않고, 알아서 변수에 할당되는 값의 자료형(동적)으로 변수의 자료형이 정해진다. |
| 80 | +(이것을 **동적 타이핑** 이라 한덴다.) |
| 81 | + |
| 82 | + |
| 83 | +## 3. 연산자 (Operator) |
| 84 | + |
| 85 | +```js |
| 86 | +// 산술 연산자 |
| 87 | +var area = 5 * 4; // 20 |
| 88 | + |
| 89 | +// 문자열 연결 연산자 |
| 90 | +var str = 'My name is ' + 'Lee'; // "My name is Lee" |
| 91 | + |
| 92 | +// 할당 연산자 |
| 93 | +var color = 'red'; // "red" |
| 94 | + |
| 95 | +// 비교 연산자 |
| 96 | +var foo = 3 > 5; // false |
| 97 | + |
| 98 | +// 논리 연산자 |
| 99 | +var bar = (5 > 3) && (2 < 4); // true |
| 100 | + |
| 101 | +// 타입 연산자 |
| 102 | +var type = typeof 'Hi'; // "string" |
| 103 | + |
| 104 | +// 인스턴스 생성 연산자 |
| 105 | +var today = new Date(); // Sat Dec 01 2018 00:57:19 GMT+0900 (한국 표준시) |
| 106 | +``` |
| 107 | +연산자로 연산되는 대상을 피연산자라고 하는데, |
| 108 | +js에서 피연산자의 타입은 무조건 같을 필요가 없이, 암묵적인 타입 강제 변환으로 연산을 수행한다. |
| 109 | + |
| 110 | +```js |
| 111 | +var wow = 1 + '1' // '11' |
| 112 | +var lol = 1 * '10' // 10 |
| 113 | +``` |
| 114 | + |
| 115 | + |
| 116 | +# 4. 키워드 (Keyword) |
| 117 | + |
| 118 | +```js |
| 119 | +// 변수의 선언 : var |
| 120 | +var x = 5 + 6; |
| 121 | + |
| 122 | +// 함수의 선언 : function |
| 123 | +function foo (arg) { |
| 124 | + // 함수 종료 및 값의 반환 : return |
| 125 | + return ++arg; |
| 126 | +} |
| 127 | + |
| 128 | +var i = 0; |
| 129 | +// 반복문 : while |
| 130 | +while (1) { |
| 131 | + // 조건문 : if |
| 132 | + if (i > 5) { |
| 133 | + // 반복문 탈출 : break |
| 134 | + break; |
| 135 | + } |
| 136 | + console.log(i); |
| 137 | + i++; |
| 138 | +} |
| 139 | +``` |
| 140 | +위같이 수행할 동작이 정해져있는 단어들을 키워드라 한다. 예약어라고도 하는 것 같다. |
| 141 | + |
| 142 | + |
| 143 | +# 5. 주석 (Comment) |
| 144 | + |
| 145 | +작성된 코드의 의미를 설명하려고, 실제 코드와는 상관없는 텍스트를 덧붙이는 것이 주석이다. (해석기(parser)도 주석은 무시해서 실행시키지 않는다.) |
| 146 | + |
| 147 | +```js |
| 148 | +// 한줄주석 |
| 149 | + |
| 150 | +/* |
| 151 | +여러줄 |
| 152 | +주석 |
| 153 | +*/ |
| 154 | +``` |
| 155 | +적절히 코드를 설명하는 용도로만 쓰자. 주석없이 읽을 수 있는 코드를 지향하자. |
| 156 | + |
| 157 | + |
| 158 | +# 6. 문 (Statement) |
| 159 | + |
| 160 | +프로그램(스크립트)은 컴퓨터(호스팅 환경에 따라 자세하게는 다름)에 의해 단계별로 수행될 명령들의 집합이다. |
| 161 | + |
| 162 | +각각의 명령을 **문(statement)**이라 하며 문이 실행되면 무슨 일인가가 일어나게 된다. |
| 163 | + |
| 164 | +문은 리터럴, 연산자(Operator), 표현식(Expression), 키워드(Keyword) 등으로 구성되며 세미콜론(;)으로 끝나야 한다. |
| 165 | +세미콜론을 생략해도, 인터프리터는 세미콜론 자동 삽입(ASI, automatic semicolon insertion)으로 세미콜론을 자동으로 붙여주기에 안붙여도 돌아가기는 한다. |
| 166 | + |
| 167 | +이 문은 **코드 블록(code block) {}** 으로 그룹으로 묶어줄 수 있다. |
| 168 | + |
| 169 | + |
| 170 | +# 7. 표현식 (Expression) |
| 171 | + |
| 172 | +표현식은 하나의 값으로 평가(Evaluation)된다고 한다. |
| 173 | +그니까 ```값(리터럴), 변수, 배열의 요소, 함수 호출, 메서드 호출, 피연산자와 연산자 조합```같은 것은 표현식으로, 이 표현식의 결과는 하나의 값이 되기에, 다른 표현식의 일부로 쓰여서 복잡한 표현식을 짤 수도 있다. |
| 174 | + |
| 175 | +```js |
| 176 | +// 표현식 |
| 177 | +5 |
| 178 | +5 * 10 |
| 179 | + |
| 180 | +``` |
| 181 | + |
| 182 | +그럼 문과 표현식은 뭔 차이냐면, |
| 183 | +문(statement)은 마침표로 끝나는 하나의 완성 문장이고, 표현식은 문을 구성하는 요소다. (표현식 자체로 문이 될 수도 있다.) |
| 184 | +그리고 표현식은 값에 대한 것 이외에는 하는 게 없지만, 문은 선언식으로 변수, 함수, 제어문 등을 생성해서 프로그램의 흐름을 제어할 수 있다. |
| 185 | + |
| 186 | +```js |
| 187 | +// 선언문(Declaration statement) |
| 188 | +var x = 5 * 10; // 표현식 x = 5 * 10를 포함하는 문이다. |
| 189 | +// 할당문(Assignment statement) |
| 190 | +x = 100; // 이 자체가 표현식이지만 완전한 문이기도 하다. |
| 191 | +``` |
| 192 | + |
| 193 | +# 8. 함수 (Function) |
| 194 | + |
| 195 | +한 작업을 수행하기 위해 필요한 문들의 집합을 정의한 코드 블록({})으로, **함수명, 매개변수**를 가질 수 있고, 함수를 원하는 때 호출할 수 있다. |
| 196 | + |
| 197 | +```js |
| 198 | +// 함수의 정의(함수 선언문) |
| 199 | +function square(number) { |
| 200 | + return number * number; |
| 201 | +} |
| 202 | + |
| 203 | +// 함수의 호출 |
| 204 | +square(3); // 9 |
| 205 | +``` |
| 206 | +이때 호출은 여러번 가능해서, 반복되는 코드를 재사용할 수 있다. |
| 207 | + |
| 208 | + |
| 209 | +## 9. 객체 (Object) |
| 210 | + |
| 211 | +js는 객체기반 스크립트 언어로, js의 대부분은 객체로 이뤄진다. (아까 자료형의 원시타입을 제외한 나머지는 모두(함수, 배열, 정규표현식 등이) 객체다.) |
| 212 | + |
| 213 | +js 객체는 키와 값으로 구성된 **프로퍼티(property)** 집합으로, 이 프로퍼티의 값에 js의 사용가능한 모든 값을 사용할 수 있다. |
| 214 | +**js의 함수는 일급 객체**여서 값으로 취급할 수 있는데, 그래서 프로퍼티의 값으로 함수가 들어갈 수 있으며, 그래서 프로퍼티의 값으로 들어가는 함수를, 일반함수와 구분하려고 메서드라 한다. |
| 215 | + |
| 216 | +```js |
| 217 | +var obj = { |
| 218 | + name: '횻홍홍', |
| 219 | + hi: function(){ |
| 220 | + console.log(name) |
| 221 | + } |
| 222 | +} |
| 223 | + |
| 224 | +console.log(typeof obj) // object |
| 225 | +console.log(obj) // (obj 객체의 구조) { name: '횻홍홍', hi: [Function: hi]} |
| 226 | +obj.hi() // 횻홍홍 |
| 227 | +``` |
| 228 | +객체는 프로퍼티 + 메서드 로 구성된 집합이다. |
| 229 | +js의 객체는 객체지향 상속을 구현하려고 **프로토타입** 이란, 객체의 프로퍼티, 메서드를 상속받을 수 있다. (이건 js만의 중요 개념이다) |
| 230 | + |
| 231 | + |
| 232 | +# 11. 배열 (Array) |
| 233 | + |
| 234 | +```js |
| 235 | +var arr = [1, 2, 3] |
| 236 | +console.log(arr[0]) // 1 |
| 237 | +``` |
| 238 | + |
| 239 | +1개의 변수에 여러 값을 순차적으로 저장할 때 배열을 사용한다. |
| 240 | +js에선 배열도 객체여서, 배열을 쓸 때 유용한 내장 메서드를 사용할 수 있다. |
0 commit comments