Today's JavaScript
코드개념 타입(Number, String, Boolean)
JavaScript 기초배우기,, 분명 기초인데 너무 어렵다,, 코플릿🤢🤢,,
=== 과 = 을 자꾸 헷갈리고 있음(는는는!!!!! 동치연산자!!!)
JavaScript
브라우저에서 실행하기 위해 만들어진 프로그래밍 언어
JavaScript는 브라우저, 서버, 모바일 개발이 가능한 멀티 패러다임 프로그래밍 언어
코드 개념 ✍️
주석(Comment)
//다음에 작성 : 가능하면 코드 위에 작성/* */사이에 작성 : 여러줄의 주석 처리 가능
값과 표현식
1995; // 값(1995)
1000 + 900 + 90 + 5; // 표현식(1000+900+90+5) & 연산자(+)
1900 + 95; // 표현식(1900+95) & 연산자(+)- 값(value) : 평가가 완료되어 하나의 의미를 가지는 코드
- 표현식(expression) : 값으로 평가될 수 있는 코드 한 줄
- 연산자(operator) : 산술이나 논리연산 등 특정 연산을 수행하는 기호나 코드
SyntaxError(문법 에러)
= // SyntaxError: Unexpected token '='자바스크립트 에러로 문법적으로 유효하지 않은 코드를 해석하려고 시도할 때 발생하는 오류를 의미
Console.log ()
console.log('hello world'); // hello world개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 도와주는 메서드
REPL이 아니고 코드를 직접 실행하는 경우 메서드 로 출력한다.
Glossary
자바스크립트엔진 : js코드를 실행할 수 있는 프로그램으로 크롬에 내장된 v8이 대표적
REPL : Read Evaluate Print Loop
읽고 평가하고 출력하고 반복하는 가장 간단한 개발환경
-> 내가 작성한 코드가 맞는지 간단하게 실행
자연어 : 인간이 쓰는 언어
기계어 : 컴퓨터가 이해할 수 있는 숫자로만 구성된 언어
프로그래밍언어 : 개발자가 프로그램 작성 위한 언어 (JavaScript 등)타입 ✍️
타입(Type) 은 값(value) 의 종류
자바스크립트의 모든 값은 타입을 가지고 있음 (타입이 있어 여러 값을 쉽게 분류 가능)
각 타입은 고유한 속성과 메서드를 가짐(효율적으로 값을 변경하거나 다룰수 있음)
Number 타입
JavaScript 의 여러 데이터 타입 중 일상생활에서 흔히 접하는 숫자를 자바스크립트에서 표현하기 위한 데이터 타입. 정수(integer)와 실수(float) 모두 표현
typeof 연산자
typeof 100; // 'number'
typeof -100; // 'number'
typeof 100.123; // 'number'해당값이 어떤 타입인지 확인 가능한 연산자
typeOf 안됨, 무조건 소문자!! 반환값들도 소문자임
typeof 참고링크
산술연산자(arithmetic operator)
console.log(1+2); // 3
console.log(1-2); // -1
console.log(1*2); // 2
console.log(1/2); // 0.5
console.log(9%2); // 1 (9를 2로 나눈 나머지 구하기)숫자 값 간에 간단한 사칙연산 할 수 있음
Math 내장객체
Math.floor(100.621); // 100 괄호 한의 숫자를 내림 반환
Math.ceil(100.621); // 101 괄호 한의 숫자를 올림 반환
Math.round(100.621); // 101 괄호 한의 숫자를 반올림 반환
Math.round(100.421); // 100
Math.abs(-100); // 100 괄호 한의 숫자를 절대값 반환
Math.abs(100); // 100
Math.sqrt(4); // 2 괄호 한의 숫자를 루트값 반환
Math.sqrt(2); // 1.41421356...
Math.pow(2, 3); // 8 괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수인 숫자 반환(제곱)- Math.floor(): 괄호 안의 숫자를 내림 반환
- Math.ceil(): 괄호 안의 숫자를 올림 반환
- Math.round(): 괄호 안의 숫자를 반올림 반환
- Math.abs(): 괄호 안의 숫자의 절대값 반환
- Math.sqrt(): 괄호 안의 숫자의 루트값 반환
- Math.pow() : 괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수인 숫자 반환(제곱)
String 타입
JavaScript 데이터 타입인 문자열(Spring) 은 자연어를 표현하기 위한 데이터 타입
따옴표(') , 쌍따옴표(") , 백틱(`) 으로 감싸서 표현
- 한자, 이모지 같은 특수문자도 문자열로 표현 가능
- 숫자와 문자를 조합해 문자열로 표현 가능
- 백틱으로 만든 문자열은 줄바꿈 가능
문자열 연결 연산자
+
'안녕하세요' + '^^'; // 안녕하세요^^
'^^' + ' ' + '반갑습니다'; // ^^ 반갑습니다
12+'3' // 123
12+3 // 14
'1' + '23' // 123 문자열 연산자로 쓰이며, 문자열과 문자열을 이어붙일 수 있음
다른 타입과 이어붙이려고 하면 모두 문자열로 변환 (특히, 숫자 조심)
concat()
'hello '.concat('world'); // 'hello world' 문자열 연결 연산자 + 처럼 문자열을 이어붙일 수 있음
length 속성
console.log('欢迎你'.length); // 3
console.log('어렵지만 화이팅!'.length); // 9 (띄어쓰기 포함)문자열의 길이 확인. 문자열 값에 .length 붙이면 됨
인덱스 (Index)
let str = 'codestates';
console.log(str[0]); // 'c'
console.log(str[4]); // 's'각 문자는 순서를 가지는데 각 문자가 몇번째에 위치하는지 인덱스로 확인 가능
But 첫번째 문자의 인덱스는 0
JavaScript 는 0부터 순서를 셈 (Zero-based numbering)
indexOf(검색할 값, 시작 위치)'🍎🍓🍉🍇'.indexOf('🍎'); // 0 '🍎🍓🍉🍇'.indexOf('🖥'); // -1 'JavaScript 어렵지만 화이팅!'.indexOf('어렵'); // 11 'JavaScript 어렵지만 화이팅!'.indexOf('안녕'); // -1문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인
시작 위치가 생략된 경우 시작 위치를 0으로 인식
만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회하고,
포함되어 있지 않다면-1을 반환
** 끝에서부터 샐때는lastIndexOf()
문자열 자르기
slice(시작위치, 자를 위치)
let txt = 'JavaScript 화이팅!'; // 14글자
console.log(txt.slice(1, 6)); // avaSc
console.log(txt.slice(4)); // Script 화이팅!
console.log(txt.slice(6, 14)); // ript 화이팅 문자열 일부 자르기, 자를 위치가 생략된 경우 그냥 쭉 보여줌(글자수 넘어가도 그냥 쭉 보여줌)
자를 위치에 있는 값은 포함되지 않고 그 앞에서 잘라서 노출
문자열 주요 메소드
toLowerCase(): 문자열을 소문자로
'HeLlo WOrlD'.toLowerCase(); // 'hello world'toUpperCase(): 문자열을 대문자로
'HeLlo WOrlD'.toLowerCase(); // 'HELLO WORLD'trim(): 문자열의 앞 뒤 공백 제거
' hihi '.trim(); // 'hihi'repeat(): 문자열을 주어진 횟수만큼 반복해 이어붙인 새로운 문자열 반환
'hello'.repeat(3); // 'hellohellohello'replace(): 첫번째 인자와 일치하는 부분을 두번째 인자로 주어진 문자열로 교체한 새로운 문자열 반환
⇒ 일치하는 문자열 중 첫번째 문자열만 바뀜
'Hi Hello Hello'.replace('Hello', 'Bye') // 'Hi Bye Hello'replaceAll(): 첫번째 인자와 일치하는 부분을 두번째 인자로 주어진 문자열로 교체한 새로운 문자열 반환
⇒ 일치하는 문자열 전체 다 바뀜
'Hi Hello Hi Hello Hi Hello'.replaceAll('Hello', 'Bye')
// 'Hi Bye Hi Bye Hi Bye'substring(): 문자열의 주어진 시작 인덱스부터 주어진 마지막 인덱스 -1 까지를 새로운 부분 문자열로 반환
'Hello World'.substring(0, 6) // 'Hello '
'Hello World'.substring(3, 7) // 'lo W'split(): 주어진 구분자를 기준으로 자른 뒤 그 결과를 배열로 반환
'Hello World wow'.split(' ') // ['Hello', 'World', 'wow']includes()
'🍎🍓🍉🍇'.indexOf('🍎'); // 0
'🍎🍓🍉🍇'.indexOf('🖥'); // -1
'JavaScript 어렵지만 화이팅!'.indexOf('어렵'); // 11
'JavaScript 어렵지만 화이팅!'.indexOf('안녕'); // -1 문자열 내에 특정 문자가 포함 되어 있는지 확인
true , false 로 반환
Boolean 타입
불리언은 사실 관계 구분 위한 타입
타입 값은true,false둘 중 하나
falsy 값 (Boolean 타입은 아님)
false, 0, -0, 0n, "", '', ``, null, undefined, NaN JavaScript에서 false 로 여겨지는 값이 일부 있음
비교연산자(comparison operator)
불리언은 비교연산자로 두값이 같은지 다른지 확인할 때 유용
동치연산자중에 엄격한 성격(?)을 띄고 있는 애
123 === (100+23); // true (123은 100+23 이니까 사실)
123 === '123'; // false (숫자 123과 문자열 123은 다르니까 false)
123 !== (100+23) // false (1번처럼 원래 true인데 사실이 아니라고 해서)
123 !== '123' // true (123 과 '123'은 다른데 다른걸 다르다고해서 true) === (같다) : 두 피연산자의 값과 타입이 같으면 true, 다르면 false
!== (다르다) : 두 피연산자의 값과 타입이 같으면 false, 다르면 true
- 느슨한(?)
동치연산자
12 == '12' // true (타입이 다른 형태인데 true 라고 나옴) 비교적 느슨한 성격을 가진 동치연산자인 == 와 != 가 있는데
타입이 달라도 값이 같으면 true 와 false 를 반환하기 때문에 현대에서는 권장하지 않음
(참고로 다른 프로그래밍 언어에서는 주로 사용하는데 Javascript 상의 === 와 !== 랑 비교해야 됨)
- 대소관계 비교 연산자
123 > 234; // false
123 < 234; //true
123 >= 123; // true
123 <= 234; // ture
123 >= 234; // false < , > , <= , >= 두 피연산자의 값을 크기 비교
논리연산자(logical operator)
논리연산자로 두값의 논리 관계 확인
||논리합(OR)
false || true //true
true || false //true
200>100 || 100>200 //true
// 두 값 중 하나만 true 여도 true
false || false //false
100>200 || 10>20 //false
// 두 값이 모두 false여야 false 두 값 중 하나만 true 여도 true 값이 나오며,
두 값 모두 false 여야 false 값이 나옴
&&논리곱(AND)
false && true // false
false && false // false
true && true // true
200>100 && 100>200 // false
200>100 && 20>10 // true 두 값 모두 true 여야 true 값이 나오며,
두 값 중 하나만 false 여도 false 값이 나옴
!논리부정연산자(NOT)
!true // false
!(100>200) // true
// 오른쪽 피연산자와 반대 사실 반환
!0 // true
!'' // true
!1 // flase
!'자바스크립트' // false
// falsy, truthy의 반대값 반환 오른쪽 피연산자와 반대 사실 반환
falsy, truthy의 반대값 반환
