알면 알수록 답답해 죽겠는 자바스크립트 너란 존재 ... 😱 머리 속에 무지막지하게 뒤엉켜버린 이론들을 조금씩이라도 정리해보려고 한다 ..!! 이런 누추한 게시글을 누가 들여다보겠냐만은 😰 ;; 혹시라도 잘못된 지식을 바로 잡아 주시려거든 댓글 부탁드립니다 ..!!
참고: 얄팍한 코딩사전 <제대로 파는 자바스크립트 끝장내기>
https://www.youtube.com/watch?v=RHoPpjKRT38&t=2031s
자바스크립트 (javascript)
자바스크립트는 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다. 정적인 마크업 언어인 html css 언어와는 다르게 웹 페이지를 동적으로 바꿔주는 언어가 바로 javascript 이다. 자바스크립트는 프로토타입 기반의 객체지향 언어이자, 인터프리터 언어이다.
인터프리터 언어란, 고급 프로그래밍 언어를 기계어로 번역해주는 방식 중 하나로 컴파일 과정을 거치지 않는 언어이다. 전체 파일을 한번에 스캔하여 한번에 번역하는 컴파일 언어와는 다르게 프로그램 실행 시 한번에 한문장씩만 번역하기 때문에 실행 속도가 조금 느리고, 프로그램 오류 또한 실행 후에 알 수 있지만 컴파일 언어보다 메모리 효율이 좋기때문에 개발 과정이 빠르고 유연하다는 장점이 있다.
컴파일 언어의 대표적인 언어는 C , C++ , JAVA 등이 있다.
인터프리터 언어의 대표적인 언어는 Python , Ruby , Javascript 가 있다.
동적 자료형을 가지는 javascript 언어는 숫자를 저장한 변수의 값을 다른 형태의 자료형으로 바꿀 수 있는 자유로운 코딩 규칙을 가진다. 자바스크립트는 자유로운만큼 오류의 여지가 많아 이를 보완하여 엄격한 과정을 거치는 Typescript 도 많이 사용되고 있다.
console
javascript 의 기능이 아닌, 환경의 기능
자바스크립트 런타임 환경 (runtime environment) : 자바스크립트 코드를 실행할 수 있는 소프트웨어
- 대표적으로 브라우저(Web API) 와 Node.js
- 콘솔 등은 자바스크립트 런타임 환경의 기능
- 개발자용 기능으로 소프트웨어 외적으로는 영향을 끼치지 않음
콘솔에 출력하기
console.log( 출력값 );
console.log( 값1, 값2, 값3 ... );Node.js 의 REPL
VSCode 의 new terminal - node 입력 - 명령 입력모드 진입Node.js 환경에서 .js파일로 실행
VSCode 의 프로젝트 폴더 - .js 파일 생성 - 저장 - control+option+N 실행주석 (Commenting)
프로그래밍에 있어 코드 외적으로 파악해야 할 부연 설명과 내용을 메모한다.
소스 코드를 더 쉽게 이해할 수 있게 만드는 것이 주 목적이며 주석처리 된 코드는 프로그램 실행 시 영향을 주지 않기에 개발자 본인만 알아볼 수 있는 표식으로도 활용한다.
- 사람에게 보여줄 목적으로 작성
- 코드에 대한 설명, 추후 진행 사항 등...
- 주석으로 달고자 하는 내용 드래그 후
command + /
if (273 < 100) {
// 안녕하세요.
// 케이크코더입니다.
alert(273 < 100 => true')
}
cosnt num = 2 //이렇게도 가능
const array = [ 273, 'String', 'ture' ] /* 이렇게도 가능 */
주석이 많이 쓰이면 시간이 지나 소스 코드를 유지보수 하기 유리하고, 협업 시 소통이 원활하다.
하지만, 코드가 지저분해진다는 치명적인 단점을 가진다.주석 없이도 한눈에 보기 편한, 가독성이 있는 코드를 짜자 !
변수와 상수 (variable and constant)
데이터를 담는 주머니
- 선언된 변수명 또는 상수명으로 값의 의미 유추 가능
- 할당된 값의 재활용
console.log('Hello,', '지나');
// 값 그대로 사용
const introduce = 'Hello,';
let person = '지나';
console.log(introduce, person);
// 값을 주머니에 담아서 사용
person = '서영';
console.log(introduce, person);
// 주머니 안의 값 변경
변수(variable)
- 담긴 값이 바뀔 수 있는 주머니
let사용
🍒 'x'라는 변수 주머니를 만듬
let x;
🍒 'x' 안에 '1' 이라는 값을 넣음
x = 1;
🍒 변수 선언과 값 할당을 동시에
내부적으로는 undefined 할당 후 재할당
let x = 1;🍒 x가 가진 값을 y에 할당
x가 가리키는 데이터값의 주소를 y도 가리키게함
let x = 1;
let y = x;
🍒 x값 재할당
x는 새로운 데이터값 가리키고, y가 가리키는 데이터값의 주소는 그대로
x = 'Hello!';
console.log(x, y)
🍒 변수 재선언 불가
주머니에 새로운 값을 할당하는 것은 가능
이미 만들어진 (선언된) 주머니 (변수) 를 다시 만들수는 없음
let x = 1;
let x = 2;🍋 var를 쓰면 안되는 이유
- var 를 사용하던 때에는 이미 만들어진 주머니를 다시 만드는 것이 가능했다.
- 즉, 중복 선언이 가능했다는 것.
Hosting : var 키워드를 사용하여 변수 선언 시, 해당 변수가 속한 범위 (scope) 최상단으로 올려지는 현상을 말한다.
또한 var 는 블록 스코프(block scope) 인 let, const 와 달리 함수 스코프(function scope) 이기 때문에 함수의 코드 블록 내에서만 지역스코프로 인정되고, 해당 함수 밖에서도 변수 var 가 사용될 수 있어 전역변수 남발 사태가 일어날 수 있다. 다양한 오류 여지로 지금은 let 과 cosnt 사용을 권장하고 있다.
상수 (constant)
- 담긴 값이 바뀔 수 없는 주머니
- 'cosnt' 사용
🍌 여러 곳에서 사용될 공통값일 경우 대문자로 명명
상수 값이 여러 프로그램에서 널리 쓰이는 경우에 해당
const PI = 3.14;
console.log('원주율 :', PI);🍌 주머니만 만들기 불가
선선언 후할당이 불가하다. 꼭 선언하는 즉시 값을 할당해주어야 한다.
const PI;
PI = 3.14;
// 잘못된 방식🍌 상수는 값을 변경할 수 없다.
값이 바뀔 일이 없는 데이터를 상수로 선언할 것
const PI = 3.14;
PI = 3.14159;
// 오류 (상수는 값 변경 안됨)식별자 (identifier)
코드 내의 상수와 변수, 함수를 식별할 수 있는 이름을 의미한다.
- 영문, 한글 및 유니코드 글자, 숫자 사용 가능
- 특수문자는
$또는_사용 - 숫자로 시작할 수 없다.
- 공백(스페이스) 을 사용할 수 없다.
예약어 (Reserved words)
프로그래밍 언어에서 의미가 약속되어 있는 단어 혹은 명령어를 의미한다.
- 식별자로 사용할 수 없다.
- (=상수명 혹은 변수명으로 사용할 수 없다.)
let typeof = 2;
// 오류 : typeof 는 예약어이다.