코딩 유료강의를 찾다가 드림코딩이 괜찮다고 해서 강의를 신청하였다. HTML, CSS, JavaScript를 생활코딩에서 배웠으므로 유료강의중 이 3가지를 모두 활용하는 브라우저 101를 선택하였다. 가격은 $100불로 117,000원 정도이다. 하지만 진도를 나가자마자 콱 막히게 되었다. 까먹은 부분이 매우 많았으며 또 사용하는 코드도 달랐다. 다시 강의를 자바스크립트 강의를 듣자니 또 너무 시간이 걸리지 않나 하고 생각했지만 드림코딩 엘리님의 강의를 듣고 나니 겸손해졌다. 생활코딩도 물론 좋지만 강의가 너무 오래돼서 인지 엘리님과의 코드와는 많이 달랐다. 그래서 2배속으로 한번 훑어보자는 마음을 접고 다시 차근차근 배워나가기로 했다. 매일 1강씩 출발!
프로그래밍 언어에서 가장 중요한것은 입력 / 연산 / 출력 이다.
// 1. Use strict
// added in ES 5
// use this for Valina Javascript
'use strict';안전성을 위해 JS 파일 맨 위에다가 쓰면 좋다. 이걸 쓰면 엔진이 JS를 좀 더 빠르게 분석을해준다.
1. Variable
변경될 수 있는 값을 말한다.
2. Block scope
괄호를 이용해서 블럭을 이용해서 코드를 블럭안에 작성하게 되면 블럭 밖에서는 블럭 안에 있는 내용들을 볼 수 없게 된다 => 콘솔 로그를 이용해서 블럭 밖에서 name 이라는 변수에 접근하게 되면 아무 값도 나오지 않는다
반대로 블럭을 쓰지 않고 파일 안에다가 바로 정해서 쓰는 변수들 => global scope 라고 부른다
- 이 글로벌한 아이들은 어느 곳에서나 접근이 가능하다.
- 글로벌한 변수들은 어플리케이션이 실행되는 순간부터 끝날 때까지 항상 메모리에 탑재되어 있기 때문에 최소한으로 쓰는 것이 좋다.
- 가능하면 class, if, function 등 필요한 부분에만 이렇게 정리해서 쓰는 것이 좋다.
블럭 밖에서도 globalName을 출력해볼 수도 있고, 블록 안에서도 당연히 바깥에 있는 아이들이 보이기 때문에 이렇게 글로벌 이름이 출력되는 것을 확인해 볼 수 있다.
// 2. Variable
// let (added in ES6)
let globalName = 'global name';
{
let name = 'ellie';
name = 'hello'
console.log(name);
console.log(globalName);
}
console.log(name);
console.log(globalName);#JS에서 변수를 선언할 수 있는 키워드는 딱 하나 'let'. 'var'는 이제 한물갔다.
why can't use var?
- 대부분의 프로그래밍 언어에서는 변수를 선언하고 나서 값을 할당하는 것이 정상적이다.
- var을 쓰면 선언도 하기 전에 값을 쓸 수 있다 => var hoisting 이라고 부른다 = 어디에서 선언한지 상관없이 항상 제일 위로 선언을 끌어올려 주는 것을 말한다. (hoi st = 끌어올려 주다)
- let을 쓰면 선언하기 전에도 값을 넣었다며 에러가 뜬다.
- 규모있는 프로젝트를 할 때 선언하지도 않은 값들이 할당되는 경우가 생긴다.
// var (don't ever use this!)
// var hoisting (move declaration from bottom to top)
// has no block scope
{
age = 4;
var age;
}
console.log(age);3. Constants(상수 = 수식에서 변하지 않는 값) => const
ax+b = c => 3x+6=12 이라할 때, 6과 12는 상수, x는 변수이다.
우리가 변수를 이용하면 이 변수가 메모리 어딘가에 할당된 박스를 가리키고 있어서 이 포인터를 이용해서 값을 계속 바꿔나갈 수 있었는데 const 이 값이 잠겨있다. 한 번 할당하면 값이 절대 바뀌지 않는 것이다. 값을 constants와 동시에 할당한 뒤로는 절대 다시는 값을 변경할 수 없다. variable은 메모리의 값을 읽고 쓰는 것이 가능하다. 하지만 웬만해서는 const 키워드를 이용해서 코드를 작성하는 것이 더 바람직하고 좋은 습관이다.
- let 은 값이 변경 될 수 있고, mutable 타입이라한다.
- constants 는 값을 변경할 수 없고, immutable 타입이라 한다.
why?
많은 개발자들이 말한다. "값을 할당한 이후로는 다시는 변경되지 않는 그런 데이터 타입을 사용해라"
- for securtiy => 한 번 작성한 값을 다른 해커들이 코드를 이상한걸 삽입해서 변경하는 것을 방지한다.
- for thread safety => 스레드들이 동시에 변수에 접근해서 값을 변경 할 수가 있는데 이것은 위험하다.
- for reduce human mistakes => 개발자들의 실수를 방지
// 3. Contants
// favor immutable data type always for a few reasons
// - security
// - thread safety
// - reduce human mistakes
const daysInWeek = 7;
const maxNumber = 5;4. variable types
어떤 프로그래밍 언어든 'primitive', 'object' 타입 2가지로 나누어져 있다.
- primitive = > 더 이상 작은 단위로 나누어질 수 없는 한 가지의 아이템을 말한다.
e.g.) number, string, boolean, null, undefined, symbol - object => 싱글 아이템들을 여러개 묶어서 한 단위로 한 박스로 관리할 수 있게 해주는 것이다.
JS에서는 function도 데이터 타입 중 하나이다. first-class function의 뜻은 이 프로그래밍 언어에서는 function도 다른 데이터 타입처럼 변수의 할당이 가능하고, 그렇기에 함수의 파라미터를 인자로도 전달이 되고, 함수에 return 타입으로 function을 return 할 수 있는 것이 가능하다.
primitive => value로 값이 저장되고
object => object를 가리키는 reference가 저장된다.
| 데이터 타입 | 변경 가능 유무 | 예시 | 비고 |
| Immutable data | 데이터 자체를 절대 변경하지 못한다. => primitive types, frozen objects |
ellie 라는 string을 정의하면, ellie를 통채로 메모리에 올렸다가 다른 string으로 변경이 가능하지 ellie 라는 string 자체의 i를 빼고 다른 것으로 바꾼다 던지 이 데이터 자체를 변경하는 것은 불가능하다. | 다른 언어에서는 Immutable, Mutable 두 가지를 분리해서 데이터 타입이 따로 존재하는 경우도 있다. |
| Mutable data |
데이터 변경이 가능하다 => all objects |
ellie 라는 string을 object로 선언하고 나서, name이나 age 변경이 가능하다. |
JS에서는 기본적으로 모든 object를 변경할 수 있다. e.g.) JS에서 array 배열은 Mutable 데이터 이다. |
Number
- c 언어 - low level - 개발자들이 프로그래밍을 짜면서 조금 더 세세하게 메모리를 관리함. 숫자에 관한 변수들만 보더라도 매우 다양하다. 한 반에 있는 학생수를 구할 때 long 보다는 short or int를 쓰는 것이 적합.
- Java - 또한 숫자에만 관련된 데이터 타입이 굉장히 많다.
- JS - 타입이 다이나믹하게 결정되기 때문에 let a = 12; 이렇게 하면 된다.
또 number는 -2의 53승 ~ 2의 53승 까지 표현이 가능하다.
최근에 bigInt 라는 타입이 추가되었다. 그래서 숫자 끝에 n을 붙이면 bigInt로 간주되어진다.
사실 프로그래밍에서 이렇게 큰 범위가 쓰이지는 않을테지만 알고만 있어라.
// 4. variable types
// primitive, single item: number, string, boolean, null, undefined, symbol
// object, box container
// function, first-class function
const count = 17; // integar
const size = 17.1; // decimal number
console.log(`value: ${count}, type: ${typeof count}`);
console.log(`value: ${size}, type: ${typeof size}`);
const infinity = 1 / 0;
const negativeInfinity = -1 / 0;
const nAn = 'not a number' / 2;
console.log(infinity);
console.log(negativeInfinity);
console.log(nAn);
// bigInt (fairly new, don't use it yet)
const bigInt = 123456789n; // over (-2**53) ~ 2*53)
console.log(`value: ${bright}, type: ${typeof bigInt}`);String
template literals or template string => ` back 틱 기호(숫자 1번 옆)와 원하는 string을 적고
$사인과 { } 중괄호를 이용하면. { } 안의 변수의 값이 자동적으로 붙여져서 나온다. 중간에 씌어진 스페이스로 인한 문자열을 그대로 나오게하여 백틱은 간단하게 스트링을 만들 수 있게 해준다.
const char = 'c';
const brendan = 'brendan';
const greeting = 'hellp ' + brendan;
const helloBob = `hi ${brendan}!`; // template literals (string)
결과 = value: hi brendan!, type: stringconsole.log(`value: ${helloBOB}, type: ${typeof greeting}`);
이것을 알고있던 방식으로 만들면 ' ' 안에 value 넣어주고 + 해주고 space 신경 쓰고.. 등 귀찮다. ↓
console.log('value: ' + helloBob + ' type: ' + typeof helloBob);
// string
const char = 'c';
const brendan = 'brendan';
const greeting = 'hellp ' + brendan;
const helloBob = `hi ${brendan}!`; // template literals (string)
console.log(`value: ${helloBob}, type: ${typeof helloBob}`);
console.log('value: ' + helloBob + ' type: ' + typeof helloBob);boolean
- false 값 => 0, null, undfined, NaN, ' '
e.g.) const test = 3 < 1 ; - ture 값 => any other value
e.g.) const canRead = true 바로 값 할당 - null => 명확하게 텅텅 비어있는 empty 값
- undefined => 선언은 되어있지만 아무것도 정의되지 않은 상태
e.g) let x; - symbol => 식별자로 맵이나 다른 자료구조에서 고유한 식별자가 필요하거나 아니면 동시에 다발적으로 칸칸 차게 일어날 수 있는 그런 코드를 우선순위를 주고 싶을 때 쓰여진다.
- symbol은 동일한 스트링을 작성했어도 다른 symbol로 만들어지기 때문에 주어지는 string에 상관없이 고유한 식별자를 만들 때 사용되어진다.
- 동일한 symbol을 만들고 싶으면 for 을 이용하면 된다.
- symbol은 바로 출력하게되면 error가 발생하니 .description 을 이용해서 string으로 변환해서 출력해야한다.
// boolean
// false: 0, null, undefined, NaN, ' '
// true: any other value
const canRead = true;
const test = 3 < 1; // false
console.log(`value: ${canRead}, type: ${typeof canRead}`);
console.log(`value: ${test}, type: ${typeof test}`);
// null
let nothing = null;
console.log(`value: ${nothing}, type: ${typeof nothing}`);
// undefined
let x; // 선언은 됐지만 아무 값이 지정되어 있지 않다.
console.log(`value: ${x}, type: ${typeof x}`);
// symbol, create unique indentifiers for objects
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2); /// false ==와 === 차이점은 데이터 타입도 알아낸다는 거 알제?
const gSymbol1 = Symbol.for('id');
const gSymbol1 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2); /// 똑같다 true
console.log(`value: ${gSymbol1.description}, type: ${typeof Symbol1}`);
// 결과는 value: id,type: symbol (string이 아니다)
// object, real-life object ,data structure
const ellie = {name: 'ellie', age: 20};
ellie.age = 21;5. Dynamic typing
- JS = Dynamically typed language => 선언할 떄 어떤 타입인지 선언하지않고, 프로그램이 동작할 때 할당된 값에 따라서 타입이 변경될 수 있다 = 내가 좋은 아이디어가 있고 빠르게 protoype 하고 싶을 때 유연하게 쓸 수 있다.
하지만 runtime 할 때 타입이 정해지기 때문에 예시의 에러가 생기는 경우가 많다. 이것 때문에 TypeScript가 나오게 되었다. 자바스크립트 위에 type이 올려진 언어가 타입스크립트이다. - C, JAVA = Statically typed language => 변수를 선언할 때 어떤 타입인지 결정해서 타입을 같이 선언. 다수의 엔지니어 혹은 규모가 있는 프로젝트할 때 유용하다.
// 5. Dynamic typing: dynamically typed language
let text = 'hello';
console.log(text.charAt(0)); // 많은 개발자들이 이 text라는 변수 이름을 통해서 string의 타입을 예상한다.
//이 때 '어 나는 젤 첫 번째에 있는 character를 받아와야지' 생각한다. 프로그래밍 언어에서 배열을 쓸 때 1이 아니라 0부터 인덱스가 매겨진다.
// 그래서 결과는 h 가 된다.
console.log(`value: ${text}, type: ${typeof text}`);
// 결과는 value: hello, type: string
text = 1;
console.log(`value: ${text}, type: ${typeof test}`)
// 결과는 value: 1, type: number
text = '7' + 5;
console.log(`value: ${text}, type: ${typeof test}`)
// 결과는 75 => JS는 문자열에 +가 있으니까 number 5를 string으로 변환해서 sting과 string을 합해준다.
text = '8'/'2';
console.log(`value: ${text}, type: ${typeof test}`)
// 결과는 value: 4, type: number (위와 반대로 JS는 숫자들을 나눌 수 있는 / 연산자를 썼고, 실제로 숫자값이니 숫자와 숫자를 나누자해서 number로 타입이 변한다)
console.log(text.charAt(0));
// 위에와 다르게 중간에 타입을 숫자로 바꿔버렸다. 근데 한 개발자가 이 text가 string 인 줄 알고 이렇게 함수를 부르게 되면 에러가 발생한다.
// 이렇듯 JS는 runtime 할 때 타입이 정해지기 때문에 예시의 에러가 생기는 경우가 많다. 그래서 Typescrit가 나온 것이다. JS 위에 TYPE이 올려진 언어이다. JS를 배우고 TS로 가야한다.#object
object => 우리가 일상생활에서 보는 물건과 물체들을 대표할 수 있는 박스 형태를 말한다.
- 그냥 변수이름 age는 아무것도 설명이 되지 않지만, ellie라는 object를 만들어서 'ellie의 이름은 ellie 이고 나이는 20살이다' 라고 얘기할 수 있다.
- ellie는 const로 지정되어 있어서 이 한 번 할당된 object는 다른 업데이트로 변경이 불가능하지만 ellie object 안에는 name 과 age라는 변수들이 존재한다.
- 그래서 ellie.name / ellie.age 이런식으로 각각 화살표가 가리키고 있는 메모리에 다른 값이 할당이 가능한 것이다.
const ellie = {name: 'ellie', age: 20};
ellie.age = 21;
엘리쌤과 노트를 vscode에다가 작성하였는데 이것은 우리의 'Playground' 코딩 놀이터이다.
이해가 되지 않는 부분은 실제로 console.log를 이용하여 프로그래밍 하면서 공부하면 굿!
#JS 강의 GitHub
https://github.com/dream-ellie/learn-javascript/tree/master/notes
GitHub - dream-ellie/learn-javascript: 자바스크립트 입문편 노트 컬렉션 ✨
자바스크립트 입문편 노트 컬렉션 ✨. Contribute to dream-ellie/learn-javascript development by creating an account on GitHub.
github.com
'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글
| [드림코딩 엘리] function 사용법 코딩 return이란? (0) | 2021.07.30 |
|---|---|
| [드림코딩 엘리] 자바스크립트 연산, 반복문. 헷갈리는 ++i, i++ 이해 / 짝수, 홀수 구하는 방법 (0) | 2021.07.25 |
| [생활코딩] jQuery ajax란? (2) | 2021.07.10 |
| [생활코딩] jQuery 동적인 애니메이션 효과 알아보기 (0) | 2021.07.07 |
| [생활코딩] jQuery 탐색(traversing)이란? (0) | 2021.07.04 |
