오늘은 6일차입니다. 이제는 자연스러워진 느낌입니다. 자 그러면, 오늘도 배운 것을 복습해보겠습니다!!
자바스크립트란
최초 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어!
따로 nodejs라는 자바스크립트 런타임을 컴퓨터에 설치해야 브라우저 밖에서 사용 가능
console.log() 개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 돕는 메서드
“컴퓨터는 0과 1로 이루어져 있다.” 이를 기계어라고 부릅니다.
그런데 자바스크립트(JavaScript)는 그렇지 않습니다. 영어도 있고, 기호도 있고, 숫자도 있습니다. 이렇게 사람이 다룰 수 있게 일정한 문법과 의미를 지닌 언어를 프로그래밍 언어라고 부릅니다. JavaScript 엔진은 코드를 위에서부터 아래로 코드를 읽고, 해석하고, 평가하다가 문제가 있으면 에러를 발생시키고, 해당 지점에서 코드 실행을 바로 중단합니다.
초창기 많은 개발자는 개발을 하면서 메모를 할 필요성을 느끼기 시작했습니다. 아무리 직관적이고 간결하게 코드를 작성하려 해도, 내가 작성한 코드를 다른 개발자에게 쉽게 설명하기 어려웠습니다.
그래서 코드에 간단히 메모를 하기 위해 주석(comment)를 추가했습니다.
JavaScript에서 주석은 // 다음에 작성하거나, /*, */ 사이에 작성하면 됩니다.
주석 처리된 코드는 JavaScript 엔진이 인식하지 않기 때문에 자유롭게
사람의 언어, 자연어를 작성할 수 있습니다.// : 한줄
/**/ : 여러줄읽고, 평가가 완료되어 하나의 의미를 가지는 코드가 값(value)입니다.
1990 + 5와 같이 하나의 값으로 평가될 수 있는 코드를 표현식(expression)이라고 합니다.
산술 연산이나 논리 연산 등을 할 수 있는 기호를 연산자(operator)라고 합니다.
type : 값의 종류! => 분류 ( value => 정보전달 ) => 모든 값은 type을 가진다!
각 타입은 고유한 속성과 메서드를 가진다!
원시 자료형 VS 참조 자료형 ( 조금 있다가 배우게 될듯? )
JavaScript의 여러 데이터 타입 중 Number는 일상생활에서 흔히 접할 수 있는 숫자를 자바스크립트에서 표현하기 위한 데이터 타입입니다. 정수(integer)와 실수(float)를 모두 표현할 수 있습니다.
typeof 연산자로 해당 값이 숫자 타입인지 확인할 수 있습니다.
같은 숫자 값 간에는 간단한 사칙연산을 할 수 있습니다. 아래 예시에서 사용한 수학 기호 (+ - * / )를 자바스크립트에서는 산술 연산자(arithmetic operator)라고 부릅니다.
Math 내장 객체
Math 내장 객체의 대표적인 메서드에 대해서 알아보겠습니다.
Math.floor(): 괄호 안의 숫자를 내림하여 반환합니다.
Math.ceil(): 괄호 안의 숫자를 올림하여 반환합니다.
Math.round(): 괄호 안의 숫자를 반올림하여 반환합니다.
Math.abs(): 괄호 안의 숫자의 절대값을 반환합니다.
Math.sqrt(): 괄호 안의 숫자의 루트값을 반환합니다.
Math.pow() : 괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수인 숫자를 반환합니다.
JavaScript 데이터 타입 String(문자열)은 인간의 언어, 자연어를 JavaScript에서 표현하기 위한 데이터 타입입니다. 따옴표(’), 큰따옴표(”), 백틱(`)으로 감싸면 됩니다.
한자나 이모지와 같은 특수문자도 문자열로 만들 수 있고, 숫자와 문자를 조합해서 문자열로 만들 수도 있습니다. 특히 백틱으로 만든 문자열은 줄 바꿈도 가능합니다.
플러스 연산자로 문자열을 이어 붙일 수 있습니다. 다른 타입과 이어 붙이려고 하면 모두 문자열로 변합니다. 특히, 숫자와 이어 붙이기를 시도하다가 예상 못한 결과를 얻지 않도록 조심합니다. 위 이유로 가능하면 다른 타입 간의 연산을 하지 않도록 조심해야 합니다.
문자열의 length 속성
문자열의 length 속성을 이용하여 문자열의 길이를 확인할 수 있습니다. 문자열 값에 .length 를 붙이면 됩니다.
인덱스(Index)
문자열의 각 문자는 순서를 가지고 있습니다. 각 문자가 몇 번째에 위치하는지 인덱스(Index)로 확인할 수 있습니다. 첫 번째 문자의 인덱스는 0입니다.
문자열 주요 메서드
문자열의 유용한 메서드 일부를 소개합니다.
toLowerCase() : 문자열을 소문자로 변경합니다.
toUpperCase() : 문자열을 대문자로 변경합니다.
concat() : 문자열 연결 연산자 +처럼 문자열을 이어 붙일 수 있습니다.
slice() : 문자열의 일부를 자를 수 있습니다.
indexOf() : 문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인합니다.
만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회합니다.
포함되어 있지 않으면 -1을 반환합니다.
includes() : 문자열 내에 특정 문자나 문자가 포함되어 있는지 확인합니다.
Boolean 타입
Boolean(불리언)은 사실 관계를 구분하기 위한 타입입니다. 불리언 타입의 값은 true 혹은 false 둘 중 하나입니다.
falsy
불리언 타입은 아니지만, 자바스크립트에서 false로 “여겨지는” 값이 일부 있는데, 이를 falsy 값이라고 합니다. 반대로 true로 “여겨지는” 값은 truthy 값이라고 합니다. truthy 값은 매우 많아서, falsy 값을 암기하면 구분하기 쉽습니다.
// 대표적인 falsy 값
false
0
-0
0n
""
''
``
null
undefined
NaNJavaScript에서는 ===, !== 로 비교해야 합니다.
논리연산자(logical operator)
논리연산자(logical operator)로 두 값 간의 논리 관계를 확인할 수 있습니다.
|| : 논리합(OR)
두 값 중 하나만 true여도 true로 판단합니다
&& : 논리곱(AND)
두 값이 모두 true면 true로 판단합니다.
두 값 중 하나만 false여도 false로 판단합니다
논리 부정 연산자(!)의 경우, 사실 관계를 반대로 표현합니다.
! : 부정(NOT)
오른쪽 피연산자와 반대의 사실을 반환합니다.변수(variable) => 데이터를 다루는 방식
=> 데이터 보관함(메모리), 보관함의 크기는 동일!, 각 보관함의 이름 -> 변수
1. 보관함 확보 ( 선언 ) declaration
let age;
2. 보관함에 데이터 저장 (assignment)
3. 동시에도 가능
표현식의 평가(evaluation)
JavaScript에서도 특정 데이터에 이름을 붙일 수 있는데, 이를 변수라고 합니다.
아무것도 할당하지 않은 변수
아무것도 할당되지 않은 변수는 undefined가 자동으로 할당됩니다. 이는 초기화라는 JavaScript의 독특한 특징입니다.
let 키워드가 아닌 const 키워드를 사용하면 재할당이 금지됩니다.
네이밍 규칙
변수명은 다음과 같은 네이밍 규칙을 준수해야 합니다.
식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다
예약어는 식별자로 사용할 수 없다.
예약어: 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어를 말한다.
- ex) let, const, true, false, typeof 등
변수명은 변수의 존재 목적을 이해할 수 있도록 의미를 명확히 표현해야 합니다
하나 이상의 영어단어를 사용하여 식별자를 만들 경우 네이밍 컨벤션을 잘 지키면 가독성을 높일 수 있습니다. JavaScript에서는 일반적으로 카멜 케이스(camelCase)를 사용합니다.
템플릿 리터럴(template literal)
값을 큰따옴표(”), 작은따옴표(’), 백틱(`)으로 값을 감싸면 문자열(string)
타입이 된다는 것을 이전에 학습했습니다.
이 중에서 백틱을 사용하는 방법을 템플릿 리터럴이라고 합니다.
템플릿 리터럴은 큰따옴표, 작은따옴표를 사용한 표기 방법과는 다른 기능을 가지고 있습니다.
특히, 문자열 내부에 변수 삽입할 수 있는 기능은 매우 유용하게 사용되므로
반드시 알아두어야 합니다.템플릿 리터럴 내부에 ${}를 사용하여 변수를 삽입할 수 있습니다.
이때, 문자열이 할당되지 않은 변수도 문자열로 취급됩니다.
조금 배운거 같은데 이렇게 정리하고보니 정말 많이 배운 것 같다...
