자바스크립트 기초 문법 - ParkEunwoo/seoul-smart-app GitHub Wiki
자바스크립트란
- interactive 웹에 쓰이는 하나뿐인 프로그래밍 언어
- 웹이 빠르게 발전하면서 JS도 빠르게 발전하고 있음
- 실시간 위치, 날씨, TODO 리스트 정보 등을 가져올 수 있음
- 웹, 웹앱, 모바일 어플리케이션, 데스크톱 앱 등을 만들 수 있음
- ES5, ES6 등의 ECMA Script는 언어가 아닌 Specification(설명서)의 버전을 나타내는 것. 각 브라우저는 Specification을 받아서 실행
- 모든 웹브라우저에는 JS가 설치되어 있음
- 바닐라 자바스크립트란 JS의 한 종류로, Library가 없는 것
변수(variable)
- 변수를 만들 때에는 1. 생성(Create)하고 2. 초기화(Initialize)한 후 3. 사용(Use)하면 된다. 필요시에 생성과 초기화를 동시에 할 수 있다.
- let : 처음 생성(선언) 시, 변수 앞에 명령어 let을 써줘야 함
- const : 상수 변수로 지정해주는 명령어. 값이 변하지 않음
const a = 221;
let b = a-5;
a = 4;
console.log(b, a);
위와 같은 코드에서는 const로 선언한 상수변수 a의 값을 아래에서 변경했으므로 에러 발생!
- var : variable. var도 let처럼 값 변경 가능. (
var는 function-scoped이고 let은 block-scoped라는 차이점이 있지만 우선 패스.)
자료형
자바스크립트는 따로 자료형을 지정하지 않고 모든 변수를 var 키워드로 선언하고 사용한다.
- String : 문자열(텍스트)
const a = "Hi";
- Boolean : True(1) , False(0) 자체가 변수 값임. 텍스트x
const b = True;
- float : 실수형(소수점ㅇ)
배열
- [] 로 배열 생성
- 인덱스로 접근
//1. 배열 전체 출력
const something = "Something";
const daysOfWeek = ["Mon", "Tue", "Wed", true, 54, something]; //변수도 배열에 넣을 수 있음
consol.log(daysOfWeek);
출력결과 : ['Mon', 'Tue', 'Wed', true, 54, 'Something' ]
//2. 배열의 인덱스로 한 값만 출력
const daysOfWeek = ["Mon", "Tue", "Wed", true, 54];
consol.log(daysOfWeek[2]);
출력결과 : Wed
객체(object)
- 한 변수에 여러 데이터를 담을 때, 배열을 이용할 경우 인덱스(ex. [3])로만 접근 해야하기 때문에 비효율적. 따라서 객체 이용!
- { }로 객체 생성
- 변수명으로 접근
//1. 객체 전체 출력
const jiwonInfo = { // jiwonInfo : 객체
name:"Jiwon", // name, age, gender, isPretty : 속성(Key)
age:23,
gender:"Female",
isPretty:true
}
//여기서 name, age, gender, isPretty는 모두 변수다!
consol.log(jiwonInfo);
출력결과 : { name:'Jiwon', age:23, gender:'Female', isPretty:true }
//2. 객체의 한 변수값만 출력
const jiwonInfo = {
name:"Jiwon",
age:23,
gender:"Female",
isPretty:true
}
consol.log(jiwonInfo.gender);
출력결과 : Female
- ※위에서 객체는 const로 선언되었기 때문에 jiwonInfo자체는 바꿀 수 없지만, const 객체 안 속성들의 값은 바꿀 수 있다!!
- 객체 안에 배열 넣을 수 있음. 배열 안에 객체 넣을 수도 있음
//1. 객체 안의 배열
const jiwonInfo = {
name:"Jiwon",
age:23,
gender:"Female",
isPretty:true
favMovies:["Along the Gods", "LOTR"] // 객체 안의 배열
}
//2. 객체들의 배열
const jiwonInfo = {
name:"Jiwon",
age:23,
gender:"Female",
isPretty:true
favMovies:["Along the Gods", "LOTR"] // 객체 안의 배열
favFoods: [ // 객체들의 배열
{ //객체1
name: "Kimchi",
fatty: false
},
{ //객체2
name: "Cheese burger",
fatty: true
}
]
} // jiwonInfo 끝
함수(function)
어떤 것을 수행하려는 한 부분. 원하는 만큼 쓸 수 있다.
function sayHello(name, age){ //()안에는 인자(Arguement), name에는 문자열, age에는 숫자 들어감
console.log('Hello!', name, " You have ", age, " years of age." );
}
sayHello("Jiwon", 23);
실행결과 : Hello!Jiwon You have 23 years of age.
기타
- Unsplash API : 저작권 free 배경사진
- consol.log() : print(출력)
- // , /* */ : 주석
- 각 줄 끝에는
;
를 잊지 말자
**Q) 자바스크립트에서는 ""(큰따옴표)와 ''(작은따옴표) 구분하지 않는 듯 --> 맞나..?