TIL 210621

jm·2021년 6월 21일
JavaScriptTIL
0

공부한 내용

JS 3. 데이터 타입

https://youtu.be/OCCpGh4ujb8

변수 Variable

프로그래밍 언어에서 처리해야 되는 데이터를 담고 있음, 변경될 수 있는 값

let

JS에서 변수를 선언할 수 있는 키워드

  • let은 값을 변경 할 수 있음(Mutable data)
let name = 'dustkim'; // name이라는 변수에 'dustkim'이라는 값을 할당함
console.log(name); // dustkim 출력

name = 'hello'; // name이라는 변수에 다시 'hello'라는 값을 할당함
console.log(name); // hello 출력

변수 선언 시 var를 쓰면 안되는 이유

  • 대부분의 프로그래밍 언어에서는 변수를 선언하고 나서 값을 할당하는 게 정상적
    → var는 선언하기 전에 값을 할당할 수 있고, 값을 할당하기 전에도 출력할 수 있음

⇒ var hoisting 어디에서 선언했는지 상관 없이 항상 제일 위로 선언을 끌어 올려 주는 것

  • var는 block scope이 없음
    → block을 철저하게 무시하고 어느 곳에서나 접근이 가능해짐
    → 어느정도 규모 있는 프로젝트를 하다보면 선언 하지 않은 값들이 할당됨

Constant

값을 선언함과 동시에 한번 할당하면 절대 값을 변경할 수 없음(immutable data), 읽기만 가능함

const dayInweek = 7;

변수의 값이 계속 바뀌어야 될 이유가 없다면 웬만해서는 const를 이용하는 것이 바람직함

  • 보안상의 이유 → 해킹으로 코드의 값이 바뀌는 것을 방지

  • 안전한 스레드

    애플리케이션이 실행되면 한가지 프로세스가 할당 되고 그 프로세스 안에서 다양한 스레드가 동시에 돌아가면서 애플리케이션이 조금 더 효율적으로 빠르게 동작할 수 있도록 도와줌

    → 다양한 스레드들이 동시에 변수에 접근해서 값을 변경 할 수 있는데 이는 안정적인 방법이 아님
    → 가능한 값이 변하지 않는 것을 사용하는게 좋음

  • 코드를 변경하거나 다른 개발자가 코드를 바꿀 때 실수를 방지해 줄 수 있음

Primitivie type (data type)

더 이상 작은 단위로 나누어질 수 없는 한 가지의 아이템

number

c언어와 java와는 다르게 JS에서는 숫자에 대한 number type은 number 하나만 존재함

const count = 17; // integer
const size = 17.1; // decimal number

number - special numeric values:

양수를 0으로 나누게 되면 무한대의 숫자값인 Infinity값이 생김

const infinity = 1 / 0;

음수의 값을 0으로 나누게 되면 -Infinity 값이 생김

const negativeInfinity = -1 / 0;

문자열을 숫자로 나누게 되면 NaN 값이 생김

const nAn = 'not a number' / 2;

DOM 요소를 JS를 이용해서 포지션을 바꾸거나 다양한 계산을 해야 될 때 나누고자 하는 값을 제대로 확인하지 않고 연산을 하면 이러한 값을 받을 수 있기 때문에 사용자에게 에러가 발생할 수 있음

bigInt

JS에서 number는 -2의 53승 부터 2의 53승 까지 범위의 숫자만 표현이 가능했으나 bigInt라는 type이 추가 되어 숫자끝에 n만 붙이면 bigInt로 간주됨

const bigInt = 1234567890123456789012345678901234567890n; // over (-2**53) ~ 2*53

String

JS에서는 한 글자 또는 여러 개의 글자이든 간에 스트링 타입으로 할당됨

const char = 'c';
const brendan = 'brendan';

일반 스트링과 다른 변수를 플러스 기호를 이용해서 스트링을 붙이는 것도 가능함

const greeting = 'hello' +brendan;

template literals

`을 이용해서 원하는 스트링을 적고 $과 기호를 이용하면 변수의 값이 자동적으로 붙여져서 나옴

const helloBob = `hi ${brendan}!`; 

// template literals을 사용 하지 않으면
console.log('value: ' + helloBob + 'type:' + typeof helloBob);

// template literals을 사용 하면
console.log(`value: ${helloBob}, type: ${typeof helloBob}`);

Boolean

참과 거짓으로 나누어지는 값

  • false: 0, null, undefined, NaN, ''(공백)
  • true: any, other, value
const canRead = true;
const test = 3 < 1; // false

null

명확하게 비어있는 값

let nothing = null;

undefined

선언은 되었지만 아무런 값이 할당되지 않은 경우

let x;

symbol

맵이나 다른 자료구조에서 고유한 식별자가 필요하거나 동시에 다발적으로 일어날 수 있는 코드에서 우선순위를 줄 때 쓰임

  • string은 다른 모듈이나 다른 파일에서 동일한 string을 썼을 때 동일한 식별자로 간주됨
  • symbol은 동일한 string를 작성했어도 다른 symbol로 만들어지기 때문에 고유한 식별자를 만들 때 사용됨
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2); // false
  • 스트링이 똑같은 동일한 symbol을 만들고 싶을 땐 Symbol옆에 .for를 붙여준다
const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id'); 
console.log(gSymbol1 === gSymbol2); //true
  • symbol을 바로 출력하면 에러가 발생하게 되는데 .description을 붙여 줘서 string으로 변환해서 출력해야 함
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`);

Object type

한 가지의 아이템들을 여러개 묶어서 한 단위로 관리할 수 있게 해주는 것 (box container)

  • 레퍼런스를 통해 실제로 오브젝트가 담겨 있는 메모리를 가리킴
const ellie = {name: 'ellie', age: 20 }; 
ellie.age = 20;

const로 지정 되어 있어 한번 할당된 오브젝트는 다른 오브젝트로 변경이 불가능함

→ 오브젝트 안의 레퍼런스는 dustkim.name, dustkim.age 이런식으로 하면 다른 값으로 할당이 가능함

Primitivie type은 데이터 자체가 변수에 담겨져있어서 데이터 자체가 복사되어 들어오지만 Object는 Object를 가리키고 있는 주소가 들어 있기 때문에 그 주소만 복사 되어서 들어옴

function

JS에서는 function도 다른 데이터 타입처럼 변수에 할당이 가능하고 그렇기 때문에 함수의 파라미터 인자로도 전달이 되고 함수에 리턴 타입으로도 function return 할 수 있는 것이 가능하다.

→ first-class function

JS 4. 연산자

https://youtu.be/YBjufjBaxHo

Operator

String concatenation 문자열 연결

  • +를 이용해서 문자열과 문자열를 합해서 새로운 문자열을 만들 수 있음
  • 문자열에 숫자를 더하게 되면 숫자가 문자열로 변환되어 합해 질 수 있음
console.log('my' + 'cat');
console.log('1' + 2);
  • string literlas $을 이용하면 변수값을 계산해서 문자열로 포함해서 문자열을 만들게 됨
    → 줄바꿈을 하거나 중간에 특수기호를 이용해도 문자열로 변환된다.
console.log(`string literlas: 

''''
1 + 2 = ${1 + 2}`);
  • 싱글쿼트('')로 문자열을 만들게 되면 중간의 싱글쿼트나 특수기호가 인식이 되지 않음
    → 백슬러시 \ 를 이용해서 싱글쿼트를 넣어줘야 인식함
console.log('ellie\'s book');

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); // exponentiatian, ~의 ~승

Increment and decrement operators, 증감 연산자

let counter = 2;

// 전치 연산자
// counter = counter + 1;
// preIncrement = counter;
const preIncrement = ++counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);

const preDecrement = --counter;
console.log(`preDecrement: ${preDecrement}, counter: ${counter}`);

//후치 연산자
// postIncrement = counter;
// counter = counter + 1;
const postIncrement = counter++;
console.log(`postIncrement: ${postIncrement}, counter: ${counter}`);

const postDecrement = counter--;
console.log(`postDecrement: ${postDecrement}, counter: ${counter}`);

Assignment operators, 대입 연산자

let x = 3;
let y = 6;
x += y; // x = x + y;
x -= y;
x *= y;
x /= y;

Comparison operators, 관계 연산자

console.log(10 < 6); // less than
console.log(10 <= 6); // less than or equal
console.log(10 > 6); // greater than
console.log(10 >= 6); // greatwe than or equal

Logical operators, 논리 연산자

  • || (or) 하나라도 참이면 참
  • && (and) 모두 참이면 참

익스프레션이나 연산을 많이 하는 함수를 호출할 때 제일 뒤에다가 배치하는 것이 효율적

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

console.log(`or: ${value1 || value2 || check()}`); // true
console.log(`and: ${value1 && value2 && check()}`); // false
//check는 true로 리턴 된다.

function check() {
  for (let i = 0; i < 10; i++) {
    console.log('🥲');
  }
  return true;
}
  • ! (not) 부정, 값을 반대로 바꿈
console.log(!value1); // true

Equality operators 동등 연산자

  • == type이 다르면 type을 변경해서 연산 함
  • === type이 다르면 연산 불가
const stringFive = '5';
const numberFive = 5;

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

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

Conditional operators: if

if 가 true면 그 안에 있는 블럭을 실행한다.

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

const name이 'coder'일 경우 if를 건너 뛰고 else if 안의 블럭 실행

const name이 'ellie'도 'coder'도 아닐 경우 else 안의 블럭 실행

Ternary operator: ?

조건이 true이면 왼쪽의 값을 false이면 오른쪽의 값을 가짐

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

Switch operators

스위치 안에 있는 값이 일치할 때 해당하는 값을 출력함

const browser = 'IE';
switch (browser) {
  case 'IE':
    console.log('go away!');
    break;
  case 'Chrome':
	case 'Firefox':
    console.log('love you!')
    break;
  default:
    case 'Chrome':
    console.log('same all!')
    break;
}
  • else if 를 여러번 반복한다면 스위치를 사용하는 것을 권장함

Loops 반복문

while

while은 statement가 false가 나오기 전까지 반복함

let i = 3;
while (i > 0) {
  console.log(`while: ${i}`);
  i--;
}
// while: 3
// while: 2
// while: 1

do while

먼저 블럭을 실행한 다음, 출력이 된 후에 조건의 참 거짓을 판단한 다음 멈춤

do {
  console.log(`do while: ${i}`);
  i--;
} while (i > 0);

// do while: 0

for loop

for (begin; condition; step)

처음에 begin을 한번만 호출하고 블럭을 실행하기 전에 컨디션이 참인지 거짓인지 검사한 다음 블럭이 실행되면 스텝을 진행함

for (i = 3; i > 0; i--) {
  console.log(`for: ${i}`);
}

inline variable declaration 블럭 안에 지역 변수를 선언해서 작성하는 방법

for (let i = 3; i > 0; i = i - 2) {
  console.log(`inline variable for: ${i}`);
}

nested loop

for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    console.log(`i: ${i}, j:${j}`);
  }
}

for문 안에 다시 for문을 작성하게 되면 i가 0일 때 j가 0부터 9까지 반복하게 되고 다시 i가 1일 때 j가 0부터 9까지 반복하게 된다.

정보처리기사 공부 안 했으면 연산자 파트 보면서 한숨 쉬고 있었을텐데 미리 공부 해놔서 정말 다행이다. 뭐든지 공부해놓으면 쓸모가 있다...

profile
jm
이전 포스트

TIL 210620

다음 포스트

TIL 210622

0개의 댓글