[JAVASCRIPT 공부일지] 1주차 - 3 (자바스크립트 활용 및 유용한 문법)

이번 일지에서는 자바스크립트의 기초을 활용해 예제를 공부해보겠습니다.

---

<합을 구하는 함수 만들기>

Q.  0부터 n-1까지 더하는 함수 만들기

function get_sum(n){

    let sum = 0;
    for(let i = 0; i < n; i++){
        sum = sum + i;
        // = (sum += i) 
    }

    return sum
}

let result = get_sum(150)
console.log(result)

<배열에서 특정 원소 갯수 구하기>

Q1. 포도는 몇개일까?

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

let count = 0

for(let i = 0; i < fruit_list.length; i++){
	let fruit = fruit_list[i]

	if (fruit == "포도"){
		count++
	}

}

console.log("포도 개수는 = " + count)
// 포도 개수는 = 3

Q2. 미세먼지(IDEX_MVL)의 값이 40미만인 구 이름(MSRSTE_NM)과 값을 출력하기
미세먼지 지수가 40보다 작은 구 찾기

let mise_list = [
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "중구",
PM10: 22,
PM25: 14,
O3: 0.018,
NO2: 0.015,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 31,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "종로구",
PM10: 24,
PM25: 18,
O3: 0.013,
NO2: 0.016,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "용산구",
PM10: 0,
PM25: 15,
O3: 0.012,
NO2: 0.027,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "점검중",
IDEX_MVL: -99,
ARPLT_MAIN: "점검중",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "은평구",
PM10: 36,
PM25: 14,
O3: 0.019,
NO2: 0.018,
CO: 0.5,
SO2: 0.005,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "서대문구",
PM10: 28,
PM25: 9,
O3: 0.018,
NO2: 0.015,
CO: 0.6,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "마포구",
PM10: 26,
PM25: 8,
O3: 0.012,
NO2: 0.021,
CO: 0.5,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 36,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "광진구",
PM10: 17,
PM25: 9,
O3: 0.018,
NO2: 0.016,
CO: 0.6,
SO2: 0.001,
IDEX_NM: "좋음",
IDEX_MVL: 31,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "성동구",
PM10: 21,
PM25: 12,
O3: 0.018,
NO2: 0.017,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 33,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "중랑구",
PM10: 27,
PM25: 10,
O3: 0.015,
NO2: 0.019,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 34,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "동대문구",
PM10: 26,
PM25: 9,
O3: 0.016,
NO2: 0.017,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 34,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "성북구",
PM10: 27,
PM25: 8,
O3: 0.022,
NO2: 0.014,
CO: 0.5,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "도봉구",
PM10: 25,
PM25: 12,
O3: 0.024,
NO2: 0.011,
CO: 0.3,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "강북구",
PM10: 30,
PM25: 15,
O3: 0.022,
NO2: 0.02,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "노원구",
PM10: 21,
PM25: 14,
O3: 0.017,
NO2: 0.016,
CO: 0.4,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 36,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "강서구",
PM10: 36,
PM25: 16,
O3: 0.021,
NO2: 0.013,
CO: 0.4,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "구로구",
PM10: 23,
PM25: 10,
O3: 0.022,
NO2: 0.016,
CO: 0.3,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "영등포구",
PM10: 29,
PM25: 15,
O3: 0.01,
NO2: 0.022,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "동작구",
PM10: 29,
PM25: 15,
O3: 0.012,
NO2: 0.023,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "관악구",
PM10: 27,
PM25: 12,
O3: 0.012,
NO2: 0.022,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "금천구",
PM10: 25,
PM25: 15,
O3: 0.015,
NO2: 0.02,
CO: 0.4,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 43,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "양천구",
PM10: 0,
PM25: 14,
O3: 0.016,
NO2: 0.017,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "점검중",
IDEX_MVL: -99,
ARPLT_MAIN: "점검중",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "강남구",
PM10: 31,
PM25: 16,
O3: 0.018,
NO2: 0.018,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "서초구",
PM10: 34,
PM25: 13,
O3: 0.024,
NO2: 0.019,
CO: 0.3,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "송파구",
PM10: 25,
PM25: 6,
O3: 0.014,
NO2: 0.025,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "강동구",
PM10: 24,
PM25: 14,
O3: 0.016,
NO2: 0.02,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM25",
},
];

for(let i = 0; i < mise_list.length; i++){
	let mise = mise_list[i]

	if(mise["IDEX_MVL"] < 40){
		let gu_name = mise["MSRSTE_NM"]
		let gu_mise = mise["IDEX_MVL"]

		console.log(gu_name + " " + gu_mise)
	}
}

핵심은 if (mise["IDEX_MVL"] < 40) 

<앱개발에 자주 쓰이는 자바스크립트 문법>

1. 쉬운 함수 표현

기존 방식

let a = function() { 
	console.log("function");
}
a(); // 리터럴 함수 방식

 

유용한 방식

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

=> : 화살표함수로 함수를 말해주는 기호

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

//객체 
let blog = {
	owner : "gnob",
	url : "lefton.tistory.com",
	getPost() { 
		console.log("딕셔너리 안 함수"); 
	}
};

이처럼 딕셔너리에는 키값뿐만아니라 함수 또한 넣을 수 있는 것을 확인할 수 있습니다.
또한 "owner" : "noah" 처럼 큰따옴표가 있었어야했지만 위에 쓰인 것처럼 처음값은 키 인것을 이미 알고있기때문에 큰따옴표 문법을 써주지 않아도 됩니다.

기존 할당 방식

let owner = blog.owner
let getPost = blog.getPost()

// let owner = blog.owner 는
// let owner = blog["owner"] 와 같은 의미입니다.

비구조 할당 방식 (유용한 방식)

let { owner, getPost } = blog;       
// 각각 blog 객체의 owner , getPost() 의 데이터가 할당
// blog의 키 값과 이름이 같아야 합니다.

>> 이 방식은 리액트 네이티브 앱을 만들며 가장 많이 사용할 방식으로 '함수에 딕셔너리를 넘길때'  자주쓰입니다.

3. 함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기

let blogFunction = ({owner,url,getPost}) => {
	console.log(owner)
	console.log(url)
	console.log(getPost())
}

blogFunction(blog)

// 이처럼  ({owner,url,getPost}) 매개변수로 딕셔너리를 넘길 수도 있습니다.

4. 줄바꿈을 자유롭게 - 리터럴

최신 방식에서는 키보드에서 느낌표 옆에 있는 키 백틱(') 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다.
기존엔 줄바꿈을 쓸때 \n 을 썼어야했는데 ` ` 로 감싸주게되면 그 내부에 엔터가 얼마나 쓰이든 자동인식이 됩니다.

const message = ` 안녕
하
세
요`

5. 문자열 중간에 변수를 넣기

let name = "뱅고"
let str = "제 이름은 ${name} 입니다."

// 제 이름은 뱅고 입니다.

// 기존엔 let str = "제 이름은 " + name + "입니다." 으로 사용

6. 딕셔너리 짧게 만들기 - 객체 리터럴

기존 방식

var name = "뱅고";
var job  "developer";

var user = {
	name : name,
	job : job
}

console.log(user)

유용한 방식

var name = "뱅고";
var job = "developer";

var user = {
  name,
  job
}

console.log(user);
// {name: "뱅고", job: "developer"}

key: value 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.

7. 간결한 반복문 - map

기존 for문은 리스트의 길이 값을 알아야했지만, map은 리스트의 길이를 몰라도 되며, for와는 반대로 리스트 안에서 몇번째에 있는 값인지 순서를 알려줍니다.

let numbers = [1,2,3,4,5,6,7];
numbers.map((value,i) => { 
	console.log(value,i) 
})

// map에 함수가 넘어가지는데, value와 i를 매개변수로 넘긴다.

map의 인자는 value와 i가 있습니다.
value는 말그대로 리스트 안의 값, i는 인덱스를 표현합니다.
따라서 출력해보면 

console.log(value,i)

//1 0
//2 1
//3 2
//4 3
//5 4
//6 5
//7 6

<자바스크립트 파일을 모듈화 - Module System>

필요한 자바스크립트 파일을 불러와 사용할수도 있는 시스템을 모듈 시스템이라고 부릅니다.
(모듈시스템 = 파일 불러오기)

export = 밖에서 쓸 수 있음을 선언하는 키워드
import = 자바스크립트 파일을 안으로 불러오는 키워드

export function times(x){
	return x * x
}

import { times } from './util.js';
// 처럼 함수명을 그대로 지칭해 불러올 수 있음

import k from '.util.js' 
// 파일 자체를 k라고 명명해서 쓸 수도 있습니다.

---

자바스크립트를 활용해보고 유용한 방식도 있다는 것을 알게되었습니다.
다음 공부일지에서는 배웠던 내용을 토대로 과제한 것을 다뤄보겠습니다.

'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 작성하였습니다.