[ codeit ] 프로그래밍 기초 in JS - 프로그래밍 핵심개념 in JS (1)

 자료형 

1강. 숫자형

//덧셈
console.log(1 + 8); //9

//뺄셈
console.log(6 - 7); //-1

//곱셈
console.log(2 * 2); //4

//나눗셈
console.log(5 / 2); //2.5

//나머지
console.log(7 % 3); //1

//참고: 몫 구하기
const a = Math.trunc(4/3)
console.log(typeof a, a)

//거듭제곱
console.log(2 ** 3); //8 (= 2의 3승);

//사칙연산 순서
console.log(2 + 3 * 2); //8
console.log((2+3) * 2); //10

 

2강. 숫자 연산 익히기

우선순위 () > ** > *, / > +, -

 

3강. 문자열 기본

console.log(7); //7
console.log(3.14); //3.14
console.log(코드잇); //Uncaught
  -> console.log('코드잇'); //코드잇

문자열 구분 ' 또는 "

 

4강. 문자열 활용

console.log('I'm Iron man'); //error
//↓
console.log("I'm Iron man");
console.log("He said \"I\'m Iron man\"");
console.log(`He said "I'm Iron man`);

console.log('Hello ' + 'Codeit'); //Hello Codeit
console.log('3' + '5'); //35

 

5강. 문자열 연습 I

줄바꿈 : \n

console.log(`한국 영화 역사상 아카데미상을 받은 것은 '기생충'이 처음이다.`);
console.log(`아리스토텔레스는 "인간은 사회적 동물이다."라고 말했다.`);

 

6강. 문자열 연습 II

console.log(`영화 '베테랑'에서 "어이가 없네~"라는 대사가 유명했다.`);

 

7강. 불 대수

불 대수 : 일상적인 논리를 수학적으로 표현한 것 (수학자 조지불) / 진리값 - true, false

AND, OR, NOT : 참, 거짓으로 구분 가능한 명제에서만

AND : x와 y가 모두 참 일때만 x AND y 가 참이 됨

OR : x와 y 둘 중 하나라도 참이면 x OR y가 참이 됨

NOT : 참 -> 거짓, 거짓 -> 참

 

8강. 불린형

//불린 (Boolean)
console.log(2 > 1); //true
console.log(2 < 1); //false
console.log(2 <= 1); //false, 등호는 부등호 뒤에
console.log(3 === 3); //true
console.log(3 !== 3); //false

console.log('Codeit' === 'Codeit'); //true
console.log('Codeit' !== 'Codeeat'); //true

//AND연산
console.log( true && true); //true
console.log( true && false); //false
console.log( false && true); //false
console.log( false && false); //false

//OR연산
console.log( true || true); //true
console.log( true || false); //true
console.log( false || true); //true
console.log( false || false); //false

//NOT연산
console.log(!true); //false
console.log(!false); //true

console.log(!!true); //true
console.log(!!false); //false

 

9강. 불린형 연습

사칙연산 -> 불린

 

10강. 불린 익히기

 

11강. typeof 연산자

typeof 값

console.log(typeof 101); //number
console.log(typeof 'Codeit'); //string
console.log(typeof true); //boolean 
console.log(typeof 'true'); //string

let name = 'Codeit';
function sayHello(){
    console.log('Hello');
};

console.log(typeof name); //string
console.log(typeof sayHello); //function(함수)

 

typeof는 사칙연산보다 우선순위가 높음!

console.log(typeof 'Hello' + 'Codeit'); //stringCodeit 
//+ 보다 우선순위가 높은 typeof 연산자
//typeof 'Hello' => string + 'Codeit' => stringCodeit

//()로 우선순위를 바꿔줌
console.log(typeof ('Hello' + 'Codeit')); //string


console.log(typeof 8 - 3); //NaN (not a number)
//- 보다 우선순위가 높은 typeof 연산자
//typeof 8 => number -3 => NaN

//()로 우선순위를 바꿔줌
console.log(typeof (8 - 3)); //5, number

 

+aaa를 쓸 경우

console.log('a', repeat(3)); //aaa

repeat() 메소드의 파라미터인 횟수는 반드시 0 이상 무한대 이하의 정숫값 이어야 합니다.

음수 혹은 무한대가 들어갈 경우 RangeError가 일어나며 3.5 와 같은 실수형일 경우 정수형으로 내림한 값( 3 )이 적용됩니다.

console.log('a'.repeat(0));   // 
console.log('a'.repeat(-1));  // Uncaught RangeError:...
console.log('a'.repeat(1/0)); // Uncaught RangeError:...
console.log('a'.repeat(3.5)); // aaa

 

12강. typeof 연산자 익히기

 

13강. 연산자 우선순위

우선순위	연산자 유형	기호
21	그룹	( )
17	논리 NOT, typeof	!, typeof
16	거듭제곱	**
15	곱셈, 나눗셈, 나머지	*, /, %
14	덧셈, 뺄셈	+, -
12	미만, 이하, 초과, 이상	<, <=, >, >=
11	동등, 부등, 일치, 불일치	==, !=, ===, !==
6	논리 AND	&&
5	논리 OR	||
3	할당	=

14강. 형 변환 I (Type Conversion)

//형 변환(Type Conversion)
console.log('10' + '5'); //105 (string)
console.log( 10 + 5); //15 (number)

//string, number, boolean
console.log(Number('10') + Number('5')); //15 (number)
console.log(String(10) + String(5)); //105 (string)

 

type of Number(ture) = 0

type of Number(false) = 1

//string, number, boolean
console.log(Number('10') + Number('5')); //15 (number)
console.log(String(10) + String(5)); //105 (string)

//숫자 -> 문자
let x = 123;
console.log(x); //123
console.log(String(x)); //123
console.log(typeof x); //number
console.log(typeof String(x)); //string

//불린 -> 문자
let y = true;
console.log(y); //true
console.log(String(y)); //true
console.log(typeof y); //boolean
console.log(typeof String(y)); //string



//문자 -> 숫자
let x = '123';
console.log(x); //문자
console.log(Number(x)); //NaN
console.log(typeof x); //string
console.log(typeof Number(x)); //number

//불린 -> 숫자
let y = true;
console.log(y); //true
console.log(Number(y)); //NaN xx ->1 / false = 0;
console.log(typeof y); //boolean
console.log(typeof Number(y)); //string



//문자 -> 불린
let x = 문자;
console.log(x); //문자
console.log(Boolean(x)); //true
console.log(typeof x); //string
console.log(typeof Boolean(x)); //boolean

//숫자 -> 불린
let y = 123;
console.log(y); //123
console.log(Boolean(y)); //true
console.log(typeof y); //number
console.log(typeof Boolean(y)); //boolean



//빈문자
let x = '';
console.log(x); //__
console.log(Boolean(x)); //false
console.log(typeof x); //string
console.log(typeof Boolean(x)); //boolean

//빈숫자
let y = 0;
console.log(y); //0
console.log(Boolean(y)); //false
console.log(typeof y); //number
console.log(typeof Boolean(y)); //boolean

//NaN
let z = NaN;
console.log(z); //NaN
console.log(Boolean(z)); //false
console.log(typeof z); //number     NaN도 number종류?
console.log(typeof Boolean(z)); //boolean



//대부분 true
//'', 0, NaN 는 false 'falsy'

 

15강. 형 변환 익히기 I

 

16강. 형 변환 II

자바스크립트의 특징 연산식에서 + 외의 연산은 자동으로 number type으로 연산됨

//형 변환(Type Conversion)
console.log('4' - true); //3

//산술연산자(+, -, *, /, %, **)
console.log(4 +'2'); //42 '+' 연산에서 문자열 > 숫자열 => 문자열 연산
console.log(4 + 2); //6
console.log(4 - true); //4-1=3
console.log(4 * false); //4*0=0
console.log(4 / '2'); //NaN xx ->4/2=2 '+'이외 연산에서 숫자열 > 문자열 => 숫자열 연산
console.log(4 ** true); //4**1=4
console.log(4 % 'two'); //4/two=NaN

//관계비교 연산(<, <=, >, >=)
console.log(2 < '3'); //true
console.log(2 > true); //true
console.log('2' <= false); // 2>0 false
console.log('two' >= 1); // string >=1 비교불가인 경우 false 출력

//같음 비교 연산(===,!==, ==, !=) ===, !== : 일치, 불일치 / ==, != : 동등, 부등
console.log(1 === '1'); //false
console.log(1 === true); //false
console.log(1 == '1'); // '1'이 숫자열로 형변환 true
console.log(1 == true); // true가 숫자열로 형변환 true

==에서는 형변환이 일어남

 

17강. 형 변환 익히기 II

console.log(typeof('4'+3));
//typeof 43 : 덧셈연산에서는 문자열>숫자열 => string

console.log(typeof(3-true));
//typeof 2 => number

console.log(typeof(Boolean(5) * true));
//typeof (true * true)';
//typeof (1 * 1) => number

console.log(typeof(true < false));
//typeof(1 < 0);
//typeof(false) => boolean

 

18강. 템플릿 문자열 template: 일정한 틀, 형식

`, ${}

//템플릿 문자열(template strings)
//template : 일정한 틀, 형식
let year = 2018;
let month = 3;
let day = 11;

console.log('생년월일은' + year + '년' + month + '월' + day + '일 입니다.');
//생년월일은 2018년 3월 11일 입니다.

// ↓ 문자와 숫자를 연결하는 + 생략가능

console.log(`생년월일은 2018년 3월 11일 입니다.`);
console.log(`생년월일은 ${year}년 ${month}월 ${day}일 입니다.`);

let myNumber = 3;

function getTwice(x){
    return x * 2;
}

console.log(`${myNumber}의 두 배는 ${getTwice(myNumber)}입니다.`);
//3의 두 배는 6입니다.

 

19강. 템플릿 문자열 연습하기

function calcWage(name, time, wage){
   let total = time * wage;
}

console.log(`${name}님의 근무 시간은 총 ${time}이며, 최종 급여는 ${total}입니다.`);

calcWage(김윤식, 208, $$);
calcWage(성규재, 175, $$);
calcWage(손태웅, 161, $$);
calcWage(허우선, 222, $$);

 

20강. null과 undefined

JS자료형 : 숫자, 문자, 불린, null, undefined

- null : 값이 없다는 것을 의도적으로 표현할 때 사용하는 값

- undefined : 값이 없다는 것을 확인하는 값

//null과 undefined
let codeit;
console.log(codeit); //undefined, 지정된 값이 없음

codeit = null;
console.log(codeit); //null, 의도적 빈 값

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

let cup;
console.log(cup); //undefined
cup = '물';
console.log(cup); //물
cup = null;
console.log(cup); //null

 

21강. null과 undefined 익히기

let x;
console.log(x); //undefined
let y = x;
x = null;
console.log(y); //undefined
console.log(x); //null
x = y;
console.log(x); //undefined

let x;
let y = null;

console.log(x === y); //false
console.log(x == y); //true
console.log(x == null); //true
console.log(y === undefined); //false

 

22강. 자료형 응용하기

let material1 = 1; //num
let material3 = 3; //num
let material5 = 30; //num

let material2 = '3'; //string
let material4 = '4'; //string

let result1 = material2 + material4;
console.log(result1);
console.log(typeof result1);

let result2 = material1 + material3 + material5;
console.log(result2);
console.log(typeof result2);