드림코딩 Javascript

let

added in ES6
변수를 선언하는 키워드

let name = 'ellie';
console.log(name);
name = 'hello';
console.log(name);

어플리케이션마다 제한적인 저장공간을 갖고 있다
let 이라는 키워드를 통해서 변수를 지정하면, 저장공간 하나를 차지하는 포인터가 된다

Block Scope

중괄호({ })를 사용하여 블럭 안에 내용을 작성하게 되면, 블럭 밖에서는 해당 내용을 사용할 수 없게 된다
블럭 밖에서 console.log 메서드를 사용하면 제대로 작동하지 않는다
블럭 밖에서 바로 정의해서 사용하는 변수를 Global Scope 라고 한다
- 정말 필요한 경우가 아니라면 Global Scope를 쓰는 경우는 제외하자

var

ES6 이전에 변수를 선언하는 키워드로 이젠 사용하지 말아야 함

age = 4;
console.log(age);
var age;

Block Scope가 적용되지 않음
키워드로 변수를 선언하기도 전에 값을 할당하는 미친짓이 가능하다
- var hoisting 이라고 불리는 이것은 var키워드를 사용하여 변수를 선언하는 순간 스크립트 맨 위로 올린다
- 일시적으로 유연성있게 사용하기에는 좋겠지만, 프로젝트의 규모가 커지게 되면 헷갈리게 할 상황을 야기함
- ES6이 적용됨에 따라 var대신 let을 사용함이 지당하다!

const

변수는 가리키고 있는 포인터가 잠겨 있다
따라서 할당한 값을 임의로 변경할 수 없다(Immutable)

const daysInWeek = 7;
const maxNumber = 5;

favor immutable data type always(변경할 수 없는 데이터 타입을 사용해라)
- security
- thread safety
- reduce human mistakes

Variable Types

Primitive Type(Single Item) : number, string, boolean, null, undefined, symbol
- 더 이상 나눠질 수 없는 작은 한 가지의 타입
- 숫자, 문자 등
1. number
  - Javascript에서는 다양한 숫자 타입을 모두 number로 통일하며, 타입을 정의하지 않아도 동적으로 결정한다
  - const count = 17; // integer const size = 17.1; // decimal number
  - 숫자가 아닌 밸류 중 infinity, -infinity, NaN 이 있다
    - infinity : 무한대. 1을 0으로 나눔
    - -infinity : -무한대. -1을 0으로 나눔
    - NaN(Not a Number) : 숫자가 아닌 것을 숫자로 나눔
```
const infinity = 1 / 0;
const negativeInfinity = -1 / 0;
const nAn = 'not a number' / 2;
```
2. string
  - Javascript에서는 문자 하나와 문자열 모두 string으로 통일한다
  - const char = 'c'; const brendan = 'brendan'; const greeting = 'hello' + brendan; const helloBob = `hi ${brendan}!`;
  - 문자열을 더하기를 하는 것으로 붙일 수 있다
  - 백틱()을 사용하여 일일이 스페이스와 따옴표를 넣지 않고도 한 번에 작성할 수 있다. 달러사인(${ })을 사용하여 변수를 넣어줄 수 있다
3. boolean
  - 참과 거짓을 표현하는 타입이다
  - 거짓 : flase, 0, null, undefined, NaN, ‘’
  - 참 : 이외의 다른 value
  - const canRead = true; const test = 3 < 1; // false
4. null
  - 명확하게 비어있는 empty 값이라고 지정함
  - let nothing = null;
5. undefined
  - 키워드를 통해 변수를 선언했지만, 값이 할당되어 있지 않은 상태
  - let x = undefined; let x; // 둘 다 undefined임
6. symbol
  - 고유한 식별자가 필요할 때 사용함
  - const symbol1 = Symbol('id') const symbol2 = Symbol('id') console.log(symbol1 === symbol2);
Object Type(Box Container)
- 위의 Single Item을 하나로 묶어 관리할 수 있게 해줌
- 오브젝트를 선언하면 하나의 포인터에 각각의 오브젝트 요소를 할당함
- const ellie = {name:'ellie', age:20}
- const 로 정의된 오브젝트 ellie는 다른 오브젝트로 할당할 수 없음
- 그러나 내부의 ellie.name, ellie.age 의 값은 다른 값으로 할당이 가능함
  - 변경할 수 없는 것은 선언된 오브젝트(다른 오브젝트로의 변경이 불가한 것)이므로 오브젝트 내부에서 따로 자리를 내어 할당한 값 자체는 변경이 가능함
Function(First-Class Function)
- 변수에 함수를 담기 가능
- 함수의 인자에 함수 담기 가능

Dynamic Typing

Javascript는 Dynamically Typed Language 라고 부름
선언할 때 어떤 타입인지 선언하지 않고, 프로그램이 실행될 때 할당된 값에 따라서 타입이 변경될 수 있음을 말함

let text = 'hello' //**string 'hello'**
text = 1; // string -> **number 1**
text = '7' + 5; // string + number -> **string '75'**
text = '8' / '2' // string(number) / string(number) -> **number 4**

타입이 자주 변경된다면, 내가 원래 목적으로 작성했던 코드의 자료형이 아니게 되어 수 많은 오류와 싸움을 하게 될 것이다 → 해소하기 위해 생긴 것이 Type Script

📌 Operator

자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6)

String Concatenation

console.log('my' + 'cat');
console.log('1' + 2);
console.log(`string literals: 1 + 2 = $

더하기(+) 기호를 사용해서 문자, 문자열과 숫자를 더해서 문자열로 만드는 기능
백틱() 기호와 달러사인(${ })을 활용하여 다양한 특수문자와 변수를 문자열로 한꺼번에 써주는 것이 가능하다

Numeric Operators

산술 연산자로 사칙연산을 포함한 다양한 연산을 가능하게 해줌

console.log(1+1) // add 덧셈
console.log(1-1) // substract 뺄셈
console.log(1/1) // divide 나눗셈
console.log(1*1) // multiply 곱셈
console.log(5%2) // remainder 나머지
console.log(2**3) // exponentiation 제곱

Increment and Decrement Operators

Increment : 변수 앞, 뒤에 ++를 붙여주는 것으로 값을 1 증가시킴
Decrement : 변수 앞, 뒤에 — 를 붙여주는 것으로 값을 1 감소시킴

let counter = 2;
const preIncrement = ++counter;
// counter = counter + 1; **3**
// preIncrement = counter; **3**

const postIncrement = counter++;
// postIncrement = counter; **3**
// counter = counter + 1; **4**

Assignment Operators

할당 연산자는 등호(=)를 사용하는 것으로 변수에 값을 할당(저장)하는 것을 의미한다
일반적으로 사용하는 변수 초기화 방법

let x = 3;
let y = 6;

Comparison Operators

비교연산자는 비교를 위해 사용한다
부등호(≤, ≥, <, >)를 사용한다

console.log(10 < 6);
console.log(10 > 6);
console.log(10 <= 6);
console.log(10 >= 6);

Logical Operators

논리 연산자는 OR, AND, NOT 을 사용하여 값이 참인지 거짓인지를 판별한다
OR 연산자(||) 는 하나라도 참이라면 참을 리턴하며, 모두 거짓이어야 거짓을 리턴한다
- OR의 속성을 사용하여 읽는 속도가 빠른 변수를 앞에 배치하고 뒤에 속도가 느린 함수를 배치한다
AND 연산자(&&)는 모두 참이어야 참을 리턴하며, 하나라도 거짓이면 거짓을 리턴한다
- AND의 속성을 사용하여 상대적으로 속도가 느린 함수를 뒤에 배치한다
NOT 연산자(!)는 값을 반대로 변경한다

const value1 = true;
const value2 = 4 < 2;

// || (or) finds the first truthy value
console.log(`or: ${value1 || value2 || check()}`);

// && (and) finds the first falsy value
console.log(`and: ${value1 && value2 && check()}`);

function check() {
    for (let i=0; i<10; i++) {
        console.log('^~^');
    }
    return true;
}

// ! (not)
console.log(!value1);

Equality

두 값이 동일한지 검사하는 연산자. 참, 거짓 값을 리턴한다

loose equality : 두 개의 등호(==)로 검사해 같은지, (!=)를 사용해 다른지 검사한다
- 타입이 다르더라도 값이 같아면 참을 리턴
strict equality: 세 개의 등호로(===)로 검사해 같은지, (!==)를 사용해 다른지 검사한다
- 타입까지 확인해 값이 같아도 거짓을 리턴
- 값을 면밀하게 따지기에 좋기 때문에 strict equality를 사용해 검사하는 편이 좋다

const stringFive = '5';
const nubmerFive = 5;

// == loose eqality, with type conversion
console.log(stringFive == numberFive);
console.log(stringFive != numberFive);

// === strict eqality, no type conversion
console.log(stringFive === numberFive);
console.log(stringFive !== numberFive);

console.log(0 == false); // true
console.log(0 === false); // false
console.log('' == false); // true
console.log('' === false); // false
console.log(null == undefined); // true
console.log(null === undefined); // false<<<

오브젝트의 경우 포인터로 다른 값을 가리키고 있기 때문에 같아보이더라도 다른 값
- === 를 사용해 검사하면 false가 나오게 된다

const ellie1 = {name: 'ellie'};
const ellie2 = {name: 'ellie'};
const ellie3 = ellie1;
console.log(ellie1 == ellie2); // false
console.log(ellie1 === ellie2); // false
console.log(ellie1 === ellie3); // true

Conditional Operators

조건문은 여러 조건에 따른 분기마다 다른 값을 리턴한다
if 조건에 해당하면if 조건 블럭에 해당하는 내용이 실행된다
if 조건에 해당하지 않는데 else if 조건에 해당하면 else if 조건 블럭이 실행된다
모두 해당하지 않는다면 else 블럭이 실행된다

const name = 'ellie';
if (name === 'ellie') {
    console.log('Welcome, Ellie!);
} else if (name === 'coder') {
    console.log('You are amazing coder');
} else {
    console.log('unknown');
}

Ternary Operator

한 줄로 가볍게 적을 수 있는 조건문을 축약시킨 연산자
condition ? value1 : value2; 형식으로 사용한다

console.log(name === 'ellie' ? 'yes' : 'no');

길게 쓰게 될 조건문이라면 이 형식이 오히려 가독성을 떨어뜨릴 수가 있다

Switch Operators

스위치 오퍼레이터는 확인해야 할 값이 여러 개일 때 사용한다
enum과 같은 밸류를 체크할 때 사용한다

const browser = 'IE';
switch (browser) {
    case 'IE':
        console.log('go away!');
        break;
    case 'IE':
        console.log('go away!');
        break;
    case 'Chrome':
            console.log('love you!');
            break;
    case 'Firefox':
            console.log('love you!');
            break;
    default:
        console.log('same all!');
        break;
    }

Loops

while
- false 값이 나오기 전까지 무한 루프하는 구문
- let i = 3; while (i > 0) { console.log(`while: ${i}`); i--; }
do-while
- 블럭을 실행한 다음 반복할 조건 검사
- do { console.log(`do while: ${i}`); i--; } while (i > 0);
for-loop
- 어디부터 어디까지 반복할 지를 정하고 시작하는 반복문
- for(시작; 조건; 단계;) 의 방식으로 반복문을 설계함
- for (i=3; i>0; i--) { console.log(`for: ${i}`); }
nested-loop
- for 문 안에 또 for 문을 이중으로 작성하는 이중 반복문을 의미함
- 반복에 반복을 사용하여 여러 문제를 처리할 수 있음
- 시간 복잡도가 O(N²) (상당히 높은 시간이 걸림)이므로 되도록 피해주는 것이 좋다
- for (let i=0; i<10; i++) { for (let j=0; j<10; j++) { console.log(`i: ${i}, j: ${j}`); } }

break, continue

break
- 구문을 완전히 종료함

continue

지금 것만 넘기고, 다음 구문을 실행함

for (let i=0; i<10; i++) {
 if (i%2 === 0) {
     continue;
 };
 console.log(i);
}
for (let j=0; j<10; j++) {
 console.log(j);
 if (j===8) {
     break
 }
}

'개발_TIL' 카테고리의 다른 글

개발_TIL \| 2022-07-26 (68) (0)	2022.07.26
개발_TIL \| 2022-07-25 (67) (0)	2022.07.26
개발_TIL \| 2022-07-21 (65) (0)	2022.07.21
개발_TIL \| 2022-07-20 (64) (0)	2022.07.20
개발_TIL \| 2022-07-19 (63) (0)	2022.07.19

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Hee

개발_TIL | 2022-07-22 (66)

드림코딩 Javascript

let

Block Scope

var

const

Variable Types

Dynamic Typing

📌 Operator

String Concatenation

Numeric Operators

Increment and Decrement Operators

Assignment Operators

Comparison Operators

Logical Operators

Equality

Conditional Operators

Ternary Operator

Switch Operators

Loops

'개발_TIL' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

개발_TIL | 2022-07-22 (66)

드림코딩 Javascript

let

Block Scope

var

const

Variable Types

Dynamic Typing

📌 Operator

String Concatenation

Numeric Operators

Increment and Decrement Operators

Assignment Operators

Comparison Operators

Logical Operators

Equality

Conditional Operators

Ternary Operator

Switch Operators

Loops

'개발_TIL' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역