자바스크립트(JS) 기초 개념 (1)

🙌  자바스크립트 시작하기

자바스크립트를 시작하게 된 이유는 프론트에도 관심이 생기면서 백,프론트엔드 전부 만들고 싶어졌기 때문이다. 공부는 강의나 글을 조금보다가 DOIT이라는 시리즈의 '모던자바스크립트 프로그래밍의 정석'으로 시작한다. 아무도 안 읽을 기초 개념에 대한 글을 쓰게 된 이유는 일을 하느라 힘들다고 핑계대면서 게을러지는데 하루이틀 쉬더라도 꾸준히 이어갈 수 있도록 하기 위함이다.

자바스크립트를 배운 후에 가능하다면 타입스크립트도 좀 해보고 Vue.js 를 배워서 프론트를 직접 짜보고 싶다. 백엔드도 재밌었지만 프론트도 나름의 매력이 있는 것 같다. 다양한 요소들로 화면을 예쁘게 꾸며보는것도 재밌을 것 같다. 컴포넌트니 아톰이니 모르는 개념이 아직 많지만 조금씩 하다보면 풀스택이 되어 있을 것이다. ㅎㅎ Vue 를 하고 싶은 이유는 리액트를 공부하려 했다가 요즘 Vue를 쓰는 회사가 많아진 것으로 보여서 알아보았더니 소규모 프로젝트를 하기엔 Vue가 적절할 것 같아 보였다. 리액트가 아직은 프론트 시장을 장악하고 있지만... 혼자 프로젝트도 할 수 있을라면 Vue를 배우는게 좋을 것고 여러가지 갖다붙이기에도 Vue가 좋다고 한다.

👀  에크마스크립트? ES6?

우선 들어가기전 '자바스크립트' 이름에 왜 '자바'가 들어가있는 이유가 무엇일까?

전혀 비슷한 면도 없고 자바를 토대로 만든 언어도 아닌데 이름에 자바가 들어가는 이유는 따로있다. 우선 인터넷 초창기에 자바스크립트의 전신인 '라이브스크립트'를 '넷스케이프(Netscape)라는 회사가 개발했다. 그러다 '썬 마이크로시스템즈'가 라이브스크립트의 개발권을 넘겨받았는데, 그 회사가 '자바(java)'를 만든 회사라 그 이름을 따서 '자바스크립트'가 된것이다.

자바스크립트를 부를 때 '에크마스크립트(ECMAScript)'라고도 많이 한다는데 그 이유는 아까 '라이브스크립트'를 만든 '넷스케이프'에서 자바스크립트 기술 규격을 표준화하기 위해 '유럽컴퓨터제조연합(ECMA)'에 제출했는데, 이후 자바스크립트가 스크립트 표준으로 채택되면서 공식 이름이 '에크마스크립트'로 정해진 것이다.

그 이후 에크마스크립트는 새로운 기능이 추가되면서 업그레이드 됐는데 그때마다 edition이 달려서 ES2, ES3,... 이렇게 이어졌는데 에크마스크립트위원회에서 매년 업그레이드 되니까 이름뒤에 년도를 붙여서 '에크마스크립트 2015' 라고 부르게 되었다. 그래서 ES6라고도 하고 에크마스크립트 2015라고도 한다.

그럼 에크마스크립트는 자바스크립트인걸까? 아니다. 에크마스크립트는 자바스크립트를 기반으로 표준화된 스크립트 언어이다. 그래서 자바스크립트는 에크마스크립트의 표준사양을 따르는 가장 유명한 언어이지만, 그외에도 여러 스크립트 언어가 있다.

🖥  기본 입출력

▶︎ alert()

- 알림창 (확인만 가능)

- 괄호 안에 내용 작성

▶︎ confirm()

- '확인' or '취소' 가 가능한 창

- 확인 클릭하면 true, 취소 클릭하면 false 리턴

- 괄호안에 내용 작성

▶︎ prompt()

- 사용자가 값을 입력할 수 있는 창

- 입력후 '확인' or '취소'

- 괄호안에 사용자에게 보여줄 내용 작성

- 값 입력 후 확인 클릭하면 사용자가 입력한 값 리턴

- 값을 입력하지 않으면 빈 값 리턴

- 취소를 누르면 null 값 리턴

- prompt(내용, 기본값) 으로 기본값을 지정가능

▶︎ console.log()

- 콘솔 창에 내용 표시

✳︎ 기본적으로 자바스크립트에서 문자열에 변수를 삽입할 때 연결연산자 '+'를 사용하지만 '템플릿 리터럴' 방식으로도 가능

템플릿 리터럴 방식이란?

큰따옴표(" ") 대신 백틱(` `)을 이용해서 문자열을 감싸고 변수는 ${변수명}을 이용해서 문자열 안에 쉽게 넣는 것이다. 더 직관적이어서 틀릴 확률이 낮아지고 띄어쓰기, 이스케이프 문자를 그대로 표시할 수 있어서 편리하다.

name = "wisejade"
class = "javascript"
console.log(`${name}은 ${class}를 공부중입니다.`)

▶︎ document.write()

- 간단한 내용을 웹 브라우저 창에 보여줄 때 사용

⛅️  변수

변수는 다른 언어를 배웠을 때와 마찬가지로 사용하면 된다. 숫자가 앞에올 수 없고 공백을 포함하면 안된다. 단어 하나로 이루어져있을 경우 모두 소문자로 사용하면 되고 여러 단어로 이루어져있을 경우엔 카멜 표기법을 쓰거나 언더바(_)를 쓰면 된다.

유니코드 문자를 변수에 사용해도 되지만 인코딩할 떄 문제가 생길 수 있으므로 사용하지 말자!

변수 선언은 변수는 예약어 let을 사용하고 상수는 예약어 const를 사용한다.

(var도 많이 썼지만 호이스팅 문제 때문에 이제 안쓴다.)

😮 자료형

자바스크립트의 자료형은 크게 원시타입(Primitive type)과 객체(Object)로 나뉜다.

원시 유형은 하나의 값만 저장하는 자료형으로 number, string, boolean, undefined, null, symbol 이 있다.

이외의 모든 건 객체이다.

▶︎ typeof()

- 자료형을 알수 있는 함수

- 괄호 안에 값이나 변수를 넣으면 어떤 자료형인지 알려준다.

✳︎ 자바스크립트는 실수 계산에 적합하지 않다. 자바스크립트는 실수 정수 자료형 나누지 않고 모든 수는 number형으로 저장된다. 하지만 실수를 저장하는 방법 때문에 실수 계산이 틀릴 수도 있다.

▶︎ NAN

- Not a Number (숫자가 아님) 을 의미

- 변수를 선언만 하고 값이 할당되지 않은 상태에서 그 변수를 연산에 사용할 경우 NaN 값이 됨

▶︎ 자바스크립트에서 falsy로 인정하는 값

- 0

- ""

- NaN

- undefined

- null

▶︎ undefined vs null

- undefined는 값이 할당되지 않았을 때 변수의 초기값

- null은 변수에 값이 없거나 유효하지 않다는 의미로, 자바스크립트에서 반환하거나 사용자가 할당할 수 있는 값

🛌  객체(Object)

- 중괄호({}) 안에 key, value 쌍으로 여러개를 만들 수 있음

let object1 = {
    name : "table",
    color : "brown",
    height : 100
}

- key는 문자열이지만 큰따옴표 사용하지 않음

- 키:값 쌍을 객체의 프로퍼티(property)라고 함

- 객체 값 접근하기

object1.name
object1["name"]

첫번째 방법을 많이 사용한다.