Javascript
w3c에 Javascript는 다음과 같이 명시되어 있다.
JavaScript — adding behaviour to web pages
Finally, JavaScript is the scripting language that you use to add behaviour to your web pages — it can be used to validate the data you enter into a form (tell you if it is in the right format or not), provide drag and drop functionality, change styles on the fly, animate page elements such as menus, handle button functionality, and a million other things. Most modern JavaScript works by finding a target HTML element, and then doing something to it, just like CSS, but the way it operates, the syntax etc. is rather different.
이 글을 번역해보면 다음과 같다.
JavaScript — 웹 페이지에 동작 추가
자바스크립트는 웹 페이지에 동작을 추가하기 위해 사용하는 스크립트 언어로, 양식에 입력한 데이터의 유효성을 검사하거나(올바른 형식인지 여부를 알려주는), 드래그 앤 드롭 기능, 스타일 변경 기능, 메뉴와 같은 애니메이션 페이지 요소, 핸들 버튼 기능 등을 제공하는 데 사용할 수 있습니다. 대부분의 현대 자바스크립트는 CSS와 마찬가지로 대상 HTML 요소를 찾은 다음 이 요소에 무언가를 수행하는 방식으로 작동하지만, 작동 방식이나 구문 등은 다소 다릅니다.
한마디로 Javascript는 웹 페이지에 생명을 불어넣어 동작하게 하는 역할을 한다.
✅ 세미콜론
우리가 문장의 끝을 표현할 때 마침표를 찍듯이, Javascript에서는 세미콜론(;)을 찍어준다.
개발자들 사이에서 "세미콜론은 무조건 찍어야한다" vs "필요한 경우에만 찍으면 된다" 로 의견이 갈리지만, 초보자 입장에서는 세미콜론을 찍어서 코드의 혼동이 주지 않게 하는 것이 좋다.
✅ 주석 comment
주석(코멘트)는 작성한 코드가 어떤 코드인지 설명하기 위해 사용한다. 예전에 내가 작성한 코드가 왜 그랬는지 모를때도 도움을 받을 수 있고, 협업과정에서 다른사람이 볼 때에도 이해하기 쉽게하기 위해 사용한다.
한 문장을 주석으로 남길 때에는 문장 앞에 // 라고 치면 그 문장은 주석이 된다.
//안녕하세요 주석 예시입니다.하지만 이러한 경우에 줄바꿈을 하면 다음 줄은 주석에 포함이 안된다. 그럴때에는 아래와 같은 기호를 사용하면 된다.
/*
안녕하세요
여러 문장의 주석을 위해
사용합니다.
*/✅ 자료형 datatype
자료형의 종류는 이와 같다.
- 문자(Character) : 문자 한개
- 문자열(String) : 숫자, 문자로 이루어진 단어 또는 문장
- 불리언(Boolean) : true, false
- 정수(Integer)
- 실수(Floating-point number)
✅ 추상화
복잡한 것들을 목적에 따라 단순화 하는 것
예시)
아우디, 벤츠, 소나타 -> 자동차
위성사진 -> 네이버 지도
✅ 변수
어떤 값을 담기위해 이름이 붙은 상자
let espressoPrice;
espressoPrice = 3000변수명을 지을 때
🚫반드시 지켜야 할 룰!!
(1) JavaScript 식별자는 '문자(a-z, A-Z)', '밑줄(__)' 혹은 '달러 기호($)'로 시작해야 한다. 두 번째 글자부터는 '숫자(0-9)'도 가능하다.
(2) '대문자'와 '소문자'는 구별합니다. myname과 myName은 다른 이름입니다.
(3) '예약어(JavaScript가 찜해놓은 단어)'는 사용하면 안된다. 예를 들어서 if, for, let 같은 것들이 있다.
🟦추가적으로 알게 된 것들
var 과 let의 차이
var는 함수 레벨 스코프이고 let, const는 블럭 레벨 스코프다.
var : 호이스팅되면서 초기 값이 없으면 자동으로 undefined를 초기값으로 하여 메모리를 할당한다. 그래서 선언 전에 해당 변수를 사용하려고 해도 메모리에 해당 변수가 존재하기 때문에 에러가 발생하지 않는다.
let, const : 호이스팅이 되면서 초기 값이 없다면 var처럼 자동으로 초기값을 할당하지 않는다(const의 경우 선언시 초기값을 할당하지 않으면 문법 에러가 난다).
var의 경우 버그 발생과 메모리 누수의 위험 등이 있기 때문에 var말고 let, const를 사용하시는 것이 좋다.
스코프
Scope를 우리말로 번역하면 ‘범위’라는 뜻을 가지고 있다. 즉, 스코프(Scope)란 ‘변수에 접근할 수 있는 범위’라고 할 수 있다.
자바스크립트에선 스코프는 2가지 타입이 있습니다.
-
전역 스코프(Global Scope) : 말 그대로 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미
-
지역 스코프(Local Scope) : 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미
-
함수 레벨 스코프(Function-level Scope)
자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 된다. 그러므로 함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있는데요. 이걸 함수 스코프(function-scoped)라고 한다. 함수 스코프가 바로 지역 스코프의 예라고 할 수 있다.
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 함수 외부에서 선언한 변수는 모두 전역 변수이다. -
블록 레벨 스코프(Block-level Scope)
모든 코드 블록(함수,if문,for문,while문,try/catch문 등)내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.
undefined와 null의 차이점
undefined은 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다. 즉, undefined는 자료형이 없는 상태이다.
따라서 typeof를 통해 자료형을 확인해보면 null은 object로, undefined는 undefined가 출력되는 것을 확인할 수 있다.
- undefined
undefined는 원시값(Primitive Type)으로, 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당된다. 이 값은 전역 객체의 속성 중 하나로, 전역 스코프에서의 변수이기도 하다. 따라서 undefined 변수의 초기 값은 undefined 원시 값이다. - null
null은 원시값(Primitive Type) 중 하나로, 어떤 값이 의도적으로 비어있음을 표현한다. undefined는 값이 지정되지 않은 경우를 의미하지만, null의 경우에는 해당 변수가 어떤 객체도 가리키고 있지 않다는 것을 의미한다.
알아두면 좋은 것
typeof undefined는 출력하면 undefined이다.
typeof null은 출력하면 object이다. 하지만 이는 여전히 원시 타입(primitive value)로, JavaScript에서는 구현 버그로 간주한다.
undefined == null은 true이다.
