TIL 210621
공부한 내용
JS 3. 데이터 타입
변수 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. 연산자
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까지 반복하게 된다.
정보처리기사 공부 안 했으면 연산자 파트 보면서 한숨 쉬고 있었을텐데 미리 공부 해놔서 정말 다행이다. 뭐든지 공부해놓으면 쓸모가 있다...
Author And Source
이 문제에 관하여(TIL 210621), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jmdev/TIL-210621저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)