[스파르타코딩클럽/앱개발 종합반] 1주차_Javascript 기초 문법

console.log("Hello World!");

 

• 변수

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

 

let value_box = '값'
value_box = '변경한 값';

console.log(value_box) //콘솔엔 '변경한 값'이 찍힌다.

const value_fix = '값';
value_fix = '변경한 값';

console.log(value_fix) //const로 선언한 변수엔 새로운 값을 재할당할 수 없다!

코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언하면 good

 

• 리스트(배열) & 딕셔너리(객체)

리스트 : 순서를 지켜서 가지고 있는 형태

리스트를 배열(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

딕셔너리가 필요한 이유 :

순서를 표시할 수 있고, 정보를 묶을 수 있다.

딕셔너리를 활용한다면 고객 별로 정보를 묶을 수 있고,

순서를 나타내기 위해 리스트를 사용하면 보기에도 깔끔해지고, 다루기도 쉬움.

새로운 고객이 더 오더라도 .push함수를 이용해 간단하게 대응할 수 있다.

 

• JSON 데이터 구조

리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조

서울 미세먼지 값 Open API JSON 데이터 구조

큰 딕셔너리 값 안에 딕셔너리 또는 리스트가 얽혀있는 모습

 

• 자바스크립트 기본 제공 함수

let a = 20
let b = 7

a % b = 6 //나눗셈 나머지 구하고 싶은 경우

let myname = 'abcdefg'

myname.toUpperCase() // ABCDEFG : 모든 알파벳을 대문자로 바꾸고 싶은 경우

// 특정 문자로 문자열을 나누고 싶은 경우 1

let myemail = 'sparta@gmail.com'

let result = myemail.split('@') // ['sparta', 'gmail.com']

result[0] // sparta
result[1] // gmail.com

let result2 = result[1].split('.') // ['gmail', 'com']

result2[0] // gmail
result2[1] // com

myemail.split('@')[1].split('.')[0] // gmail

// 특정 문자로 나누고 싶은 경우 2

let txt = '서울시-마포구-망원동'
let names = txt.split('-'); // ['서울시', '마포구', '망원동']

// 특정 문자로 합치고 싶은 경우

let result = names.join('>'); // '서울시>마포구>망원동'

 

• 함수

// 만들기
function 함수이름(필요한 변수들) {
	내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);

// 예시
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
	console.log('num1: 1', num1, ',num 2: ', num2);
    
    //return으로 값을 돌려주는, 뱉는 구조로 변수에 값을 전달할 수도 있다.
    return num1 + num2;
}

sum(3,5); //8
sum(4, -1); //3
let result = sum(10,10)
console.log(result) // 20

//또다른 함수 선언 방식
let a = function(){
	console.log("리터럴 방식 이라고 한다.");
}

a()

 

• 조건문

function is_adult(age){
	if(age > 20){
    	alert('성인이에요')
    } else {
    	alert('청소년이에요')
    }
}

is_adult(25)

// if, else if, else if, else if else

function is_adult(age){
	if(age>20){
    alert('성인이에요')
    } else if (age>10) {
    alert('청소년이에요')
    } else {
    alert ('10살 이하!')
    }
}

is_adult(12)

// AND조건과 OR조건

// AND조건
function is_adult(age, sex){
	if (age > 20 && sex =='여'){
    alert('성인 여성')
    } else if (age > 20 && sex == '남'){
    alert('성인 남성')
    } else {
    alert('청소년이에요')
    }
}

// OR조건
function is_adult(age, sex){
	if (age > 65 || age < 10) {
    alert('탑승하실 수 없습니다')
    } else if (age > 20 && sex == '여'){
    alert('성인 여성')
    } else if (age > 20 && sex == '남'){
    alert('성인 남성')
    } else {
    alert('청소년이에요')
    }
}

is_adult(25,'남')

 

• 반복문

// 예를 들어 0부터 99까지 출력해야 하는 상황이라면
console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99)

// 이렇게 쓰기엔 무리

// 반복문 이용!
for (let i = 0; i < 100; i++) {
	console.log(i)
}

let people = ['철수','영희','민수','형준','기남','동희']

for (let i = 0; i < people.length; i++){
	console.log(people[i])
}

let scores = [
	{'name':'철수', 'score':90},
	{'name':'영희', 'score':85},
	{'name':'민수', 'score':70},
    {'name':'형준', 'score':50},
    {'name':'기남', 'score':68},
    {'name':'동희', 'score':30},
]

for (let i = 0; i < scores.length; i++){
	console.log(scores[i]);
}
// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,


for (let i = 0; i < scores.length; i++) {
	if (scores[i]['scores']<70) {
    	console.log(scores[i]['name']);
    }
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수 있다.

// 0부터 n-1까지 더하는 함수를 만들고 싶다면?

function get_sum(n) {
	let sum = 0
    for (let i = 0; i < n; i++) {
    	sum += i;
    }
    return sum
}

let result = get_sum(10); // return 결과인 sum이 result에 저장
console.log(result) //45를 출력

// 배열에서 특정 원소 갯수 구하기
// 다음에서 '딸기'는 몇 개일까?

let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

let count = 0;
for (let i = 0; i<fruit_list.length; i++{
	let fruit = fruit_list[i];
    if (fruit == '딸기'){
    	count += 1;
    }
}
console.log(count);

// 서울특별시 미세먼지 지수가 40보다 작은 구 찾기

for (let i = 0; i < mise_list.length; i++){
	let mise=mise_list[i];
    if (mise["INDEX_MVL"] < 40) {
    	let gu_name = mise["MSRSTE_NM"];
        let gu_mise = mise["IDEX_MVL"];
        console.log("40보다 작은 구: " + gu_name + "," + gu_mise);
    }
}

 

• 앱개발에 자주 쓰이는 Javascript

함수를 더 짧게 표현하는 화살표 함수(Arrow Function)

// 기존 방식

let a = function() {
	console.log("function");
}
a();

// 최신 방식
let a = () => {
	console.log("arrow function");
}
a();

 

딕셔너리 키와 값을 빠르게 꺼내기 - 비구조 할당

// 객체 
let blog = {
	owner : "noah",
	url : "noahlogs.tistory.com",
	getPost() { 
		console.log("ES6 문법 정리"); 
	}
};

// 기존 할당 방식
let owner = blog.owner
let getPost = blog.getPost()

// 비구조 할당 방식
let {owner, getPost } = blog;

// 함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
let blogFunction = ({owner,url,getPost}) => {
	console.log(owner)
    console.log(url)
    console.log(getPost())
}
blogFunction(blog)

 

자바스크립트 안에서 줄바꿈 자유롭게 하기 - 리터럴

const id = "myId";
const url = `http://noahlog.tistory.com/login/${id}`;

const message = "줄바꿈을 하려면 \n 기호를 써야 했지만"

const message = `줄바꿈도 마음대로 
사용 가능.`

 

딕셔너리를 짧게 만들어보기 - 객체 리터럴

var name = "스파르타";
var job = "developer";

var user = {
	name,
    job
}

console.log(user); // {name: "스파르타", job: "developer"}

 

map - 반복문의 또 다른 방식

map은 리스트의 길이값을 몰라도 되며, for와는 반대로 리스트안에서 몇 번째에 있는 값인지 순서를 알려준다.

let numbers = [1,2,3,4,5,6,7];

numbers.map((value,i) => {
	console.log(value,i)
})