0부터 n-1까지 더하는 함수를 만들고 싶다면?
<script>
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(100) // return 결과인 sum이 result에 저장
console.log(result) // 4950를 출력
</script>다음에서 '딸기'는 몇 개일까?
(배열에서 특정 원소 구하기)
<script>
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)
2
</script>반복문을 정의하고 그 안에서 돌면서 딸기인지 아닌지를 체크해서 숫자를 증가시켜 카운트 하는 것
JSON 데이터 안에서 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
미세먼지 지수가 40보다 작은 구 찾기!
<script>
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)
}
}
중구31
종로구39
용산구-99
</script>리스트 안에서 반복문을 돌리고 그 중에 40보다 적은 값의 경우 구 이름+ 미세먼지 값을 출력하도록 만들기
함축적인 Javascript
최근 리액트 네이티브에서 많이 쓰이는 함축적인 방식들.
1. 함수
[기존 방식]
<script>
let a = function() {
console.log("function");
}
a();
</script>[최신 방식]
<script>
let a = () => {
console.log("arrow function");
}
a();.
</script>2. 할당 방식
let blog = {
owner : "noah",
url : "noahlogs.tistory.com",
getPost() {
console.log("ES6 문법 정리");
}
};"owner" : "noah"가 아니라 owner : "noah"로 적어도 전혀 무방함
앞쪽에만 위치하면 키(key)값이라는 것을 인식함
<script>
//기존의 할당 방식 (세 가지 다 같은 방식)
let owner = blog.owner
let owner = blog["owner"]
let getPost = blog.getPost()
</script><script>
//비구조 할당 방식
let { owner, getPost } = blog;
</script>단, 이때 사용되는 키값은 //blog의 키 값과 이름이 같아야 함.
만약 owner2로 이름이 지어지면 출력되지 않음.
줄바꿈을 자유롭게하는 리터럴
최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ` ) 을 이용해 워드처럼 줄바꿈을 자유롭게 사용할 수 있다.
맥북에서는 opt + ₩를 누르면 `이 출력된다.
<script>
const id = "myId" ;
const url = `http://noahlog.tistory.com/login/${id}` ;
const message = "줄바꿈을 하려면 \n 이 기호를 써야 했죠!"
const message = ` 줄바꿈도 마음대로
사용이 가능합니다.
</script>큰 문자열 안에 바뀌여야 하는 변수가 있는 경우
<script>
let name = "vegan"
let str = "my name is " + name
console.log(str)
my name is vegan
</script>이 경우 코드 내에서 다소 가독성이 떨어진다.
<script>
let str2 = `my name is ${name}`;
console.log(str2)
my name is vegan
</script>이렇게 $를 활용해 가독성을 높인 코드 작성 가능!
딕셔너리의 축약형
<script>
[기존 방식]
var name = "스파르타";
var job = "developer";
var user = {
name: name,
job: job
}
console.log(user);
//{name: "스파르타", job: "developer"}
</script><script>
[최신 방식]
let name = 'vegan'
let job = 'developer'
let dic = {
name,
job
}
console.log(name)
vegan
</script>줄을 최대한 줄요한 최대한의 퍼포먼스를 낼 수 있다.
축약해서 효율적으로 코드를 짜는 습관을 들이자!
map-반복문의 효율화
기존의 반복문
<script>
let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
console.log(numbers[i]);
}
</script>map을 활용하면 다음과 같다.
<script>
let num_list = [1,2,3,4,5,6,7];
num_list.map(function(value, i){
console.log(value, i)
})
//위의 코드를 축약해서 쓰면 아래와 같다.
num_list.map((value, i) => {
console.log(value, i)
})
1 0
2 1
3 2
4 3
5 4
6 5
7 6
</script>.map을 찍어주면 num_list에서 값(value)을 하나씩 꺼내서 함수에 넣어줌.
리스트의 값을 하나씩 넘겨주면서 i(index)로 순서도 하나씩 넘겨준다.
모듈 시스템-파일을 불러오기
export는 자바스크립트의 값, 함수, 딕셔너리(객체) 또는 자바스크립트 파일 자체를 외부로 내보내는 키워드
import는 반대로 자바스크립트 파일 안으로 가져오는 키워드
하나의 파일 및 그 파일 안의 함수를 다른 외부 파일에서도 유용하게 사용할 수 있도록 하는 기능
<script>
//(내보낼 파일에서) times, plusTwo 함수를 외부로 내보낼 준비를 합니다.
export function times(x) {
return x * x;
}
export function plusTwo(number) {
return number + 2;
}
</script><script>
//(받는 파일에서) util.js이라는 파일의 times, plusTwo 함수를 불러오는 모습
import { times, plusTwo } from './util.js';
console.log(times(2));
console.log(plusTwo(3));
</script>util.js파일 자체를 k로 명명해서 times라는 함수를 사용하는 모습
<script>
// in util.js
export default function times(x) {
return x * x;
}
// in app.js
import k from './util.js';
console.log(k(4)); // returns 16
</script>