자바스크립트 기초 문법 - 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.

기타

consol.log() : print(출력)
// , /* */ : 주석
각 줄 끝에는 ;를 잊지 말자

**Q) 자바스크립트에서는 ""(큰따옴표)와 ''(작은따옴표) 구분하지 않는 듯 --> 맞나..?