Javascript_basic

1. 크롬브라우저 f12를 누르면 개발자 콘솔이 열린다.

2. list

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를 출력

3. 딕셔너리: 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}을 출력

4. 대문자로 바꾸고 싶을때

**또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**

let myname = 'coding'

myname.toUpperCase() // CODING

5. 특정 문자로 나누고 싶은 경우

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

let txt = '서울시-마포구-망원동'

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

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

let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)

6. and조건(&&)은 두개가 맞아야. or조건(||)는 하나만 맞아도 됨.

7. 반복문

for (let i = 0; i < 100; i++) {
	console.log(i);
}

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

function get_sum(n) {
    let sum = 0
    for (let i = 0; i < n; i++) {
        sum += i;         // sum을 i만큼 증가시켜라. sum = sum + i 와 동일!
    }
    return sum
}

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

9. 딸기 갯수 구하기

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);

10. 화살표 함수

[기존 방식]

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

[최신 방식]

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

11. 비구조할당방식

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

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

**//비구조 할당 방식**
**let { owner, getPost } = blog;  **     
//각각 blog 객체의 owner , getPost() 의 데이터가 할당
//blog의 키 값과 이름이 같아야 해요!
//(예 - owner가 아니라 owner2를 넣어보세요! 아무것도 안 들어온답니다.)

**** 앞으로 리액트 네이티브 앱을 만들며 가장 많이 사용할 방식****

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

blogFunction(blog)**

12. 줄바꿈은 백틱 ( ` ) 을 이용하여

13. 변수명만 작성하면 동일한 필드와 변수값이 대입됨

[최신 방식]

var name = "나윤정";
var job = "developer";

var user = {
  name,
  job
}

console.log(user);
//{name: "나윤정", job: "developer"}

14.map함수

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

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

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

// 아래와 같다는 점! 눈치 채셨나요?

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

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

15.export, import

//times, plusTwo 함수를 외부로 내보낼 준비를 합니다.
export function times(x) {
  return x * x;
}
export function plusTwo(number) {
  return number + 2;
}

해당 파일에 위와 같이 함수앞에 export 키워드를 단 함수 두 개를 선언 했습니다. 이 두 함수는 같은 폴더 라인에 위치한 파일에서 이렇게 가져와서 사용할 수 있습니다.

다음은 외부의 index.js 파일에서 util.js에서 내보낸 함수들을 사용하는 모습입니다.

import { times, plusTwo } from './util.js';
console.log(times(2));
console.log(plusTwo(3));

이번엔, util.js 파일에 export default 키워드를 앞에 둔 하나의 함수가 있다고 가정해보겠습니다. 그리고 코드의 하단 부처럼, 작성된 함수 이름은 times지만 가지고 올 때는 k로 가져왔습니다.

// 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

이렇게 export default로 선언한 함수는 해당 파일에서 유일해야 하며, 가져올 땐 이름을 달리해서 가져와서 사용 할 수 있습니다.

16.주석달기

ctrl / 같이 누르면 그줄이 주석으로 처리된다.

17.Visual studio에서 이동바를 없애고 창크기만큼 보이게 하기

alt와 z를 누르면 됨