Javascript 기초 문법 - 1
1) 자바스크립트란?
1. 자바스크립트에 대하여
👉 보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
- 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며
- 마감까지 얼마 남았는지 카운팅이 되는 모습도 작성할 수 있습니다
💡 그렇기 때문에 항상 자바스크립트 == 웹 기술! 이라는 고정관념이 생겼는데요! 이제 더 이상 자바스크립트는 옛날의 자바스크립트가 아닙니다.
2. 자바스크립트로 어떤 것들을 할 수 있을까?
👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!) 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
2) 자바스크립트 공부 준비!
👉 자바스크립트 공부 할 땐! 우리에겐 크롬 브라우저만 있으면 충분합니다.
크롬 브라우저를 실행한 다음
윈도우는 : F12
맥은 : alt(option) + command + i 를 눌러서 개발자 콘솔을 열어주세요!
👉 console.log(변수) 는 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!
console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 콘솔 창에 붙여 넣어보세요.
console.log("Hello World!");
▶Q&A
1) 코드를 마칠 때, 코드 마지막에;를 써도되고 안써도 됩니다!
let num = 1;
let num = 1
2) 변수를 선언할 때 let을 써야 하야 var를 써야 하는가?
둘 다 무엇을 써도 똑같은 기능을 하지만 우리가 같이 공부할 땐 let을 쓰도록 합시다!
3) 딕셔너리랑 객체라는 단어를 혼용해서 쓰던데 뭐가 맞는것이냐?
둘다 똑같습니다!
4) 마찬가지로 배열과 리스타라는 어휘도 똑같은 개념이라고 보시면 됩니다!
3) 변수
- 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것! (2를 a라는 변수에 넣는다)
- let으로 변수를 선언합니다.
let num = 20
num = 'Bob'
// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.
- 사칙연산 그리고 문자열 더하기가 기본적으로 가능합니다.
let a = 1
let b = 2
a+b // 3
a/b // 0.5
let first = 'Bob'
let last = 'Lee'
first+last // 'BobLee'
first+' '+last // 'Bob Lee'
first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
- 변수명은 아무렇게나?
let first_name = 'bob' // snake case라고 합니다.
또는,
let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.
과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
다른 특수문자 또는 띄워쓰기는 불가능합니다!
- const로 변수 선언
let value_box = '값'
value_box = '변경한 값';
console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다.
const value_fix = '값';
value_fix = '변경한 값';
console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.
👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?
4) 리스트(배열) & 딕셔너리(객체)
💡 리스트를 배열(Array)이라고도 부릅니다
- 리스트: 순서를 지켜서 가지고 있는 형태입니다.
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_list = [1,2,'hey',3] // 로 선언 가능
b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력
// 리스트의 길이 구하기
b_list.length // 5를 출력
- 딕셔너리: 키(key)-밸류(value) 값의 묶음
👉 딕셔너리는 객체로도 불립니다
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력
- 리스트와 딕셔너리의 조합
names = [{'name':'bob','age':20},{'name':'carry','age':38}]
// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'
new_name = {'name':'john','age':7}
names.push(new_name)
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'
- 딕셔너리의 자주쓰는 또 다른 표현
let b_dict = {'name':'Bob','age':21}
//bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다.
b_dict['name']
b_dict.name
둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
- 왜 필요할까요?
💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다.
대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요.
변수만을 사용한 모습은 다음과 같습니다.
let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};
👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
- JSON 데이터 구조
- 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조가 JSON 데이터 구조입니다