JS - 공부노트 - 1

Jamwon·2021년 11월 4일
0

React-Native

목록 보기
4/5

ECMAScript 5,6
모든 브라우저가 이제는 이 표준을 따라하고 있다.

폴더에
console.log("Hello World") 가 적힌 main.js 파일을 만든다.

폴더의 terminal 에서 node가 깔려있다면 node main.js 라고 실행하면 Hello World가 출력된다.

문법

문법 강의 링크

log

웹 콘솔에 로그를 출력한다.
console.log("출력하고 싶은 로그")
로 log를 출력할 수 있다.

data types 와 변수

undefined, null, boolean, string, symbol, number, object 등등

변수 선언하는 법
var Name = "Jeff"
Name = "Jeff Lee" 이렇게 재정의 가능

let과 const로도 선언가능

var은 프로그램 전체에서 사용가능하고

let은 선언한 scope내에서만 사용이 가능하다. 또한 재할당은 가능하지만 재선언은 불가하다.
let cat="123"; let cat ="234 하면 에러가 뜬다. cat = "234"는 가능

const는 한번만 선언하고 재선언과, 재할당 모두 불가능하다.(read only) , 실수를 줄일 수 있다.

하지만 const로 선언된 배열은 update할 수 있다( 재할당은 불가능 하지만 []를 이용해서 원소를 바꾸는 거, push, pop 등등)

위와 같은 이유로 개발할때 var을 많이 쓰지않는다.

JS에서 변수들와 함수의 이름은 case sensitive하다고 한다. 그뜻은 대문자 구분이 중요하다는 것이다.

var Name 과 var NAme은 다르다!

따라서 특정한 규칙에 따라서 변수와 함수명을 지정하자( 강의에서는 camel 기법을 이야기했다)

연산

사칙연산은 그냥 그대로 사용하면 된다.

곱하기는 를 사용한다. * *

나누기는 / 를 사용한다. / / /

increment는 num++ 를 사용한다. decrementing은 num-- 를 사용!!!

2.0 * 2.5를 연산하면 값이 5가 출력된다. 5.0이 아니라

나머지는 % 를 사용한다. % % %

a = a + 12 를 사용하기 보단 a += 12를 사용하면 된다. -=, *= , /= 도 전부 가능하다.

String Quote

esacpe charectar를 사용한다.
var strstr = "I am a 'double quoted' string inside \"double quoted";

이를 출력하면
I am a 'double quoted' string inside "double quoted
가 출력된다. \" 이걸 이용해서 문장이 끝나지 않았다는 것을 알려준다!!!
또한 ''로 String을 생성하면 안에 ""를 쓰면 그냥 출력이된다. 반대도 가능

` single quote
\" double quote
\ basckslash
\n newline
\r carriage return
\t tab
\b backspace
\f form feed

위를 사용해서 string문을 작성할 수 있다.
var strstr = "FistLine\n\t\SecondLine\nThirdLine";
이렇게 작성하묜
FistLine
\SecondLine
ThirdLine
이렇게 출력된다!!!

String문은 서로 '+' 해서 하나의 string문으로 합칠 수 있다. += 도 사용할 수 있다.

string length

string.length로 구한다.

var firstName = "Jeff" ;
var firstNameLength = 0;

firstNameLength = firstName.length; 로 구할수있다.
integer 길이를 return 한다.

string bracket notation

위의 firstName[0]를 사용하여 첫번째 원소를 구할 수 있다.
파이썬과 똑같다.
firstName[-1]를 사용해서 마지막 원소를 구할 수 없다!!!
firstName[firstName.length -1] 를 사용해야 마지막 원소를 구할 수 있다.

String Immutability

String은 immutable이다. 이뜻은 String자체가 못바뀐다는 것은 아니고 한문자 한무자가 바뀔 수 없다는 것이다.
var myStr ="Jello World";
myStr[0] = "H";
첫번째 원소를 H로 바꾸려고 하면 immuatability 때문에 바꿀수 없다.
바꾸고 싶다면
myStr ="Hello World"; 이렇게 바꿔야 된다.

Arrays

배열을 이용해서 여러 원소를 저장할 수 있고 여러 data type를 넣어도 상관없다.

var myArray =["jeff","26"];
var yourArray = [];

nested array

var nestedArray = [["Jeff",26],["Lee",26"]];
다차원 배열을 사용할 수 있다.

위의 string에서와 같이 bracket notation을 이용하여 원소를 검색할 수 있다.

다른 언어와 동일.

push

myArray.push("Lee");
push문을 이용하여 배열에 원소를 추가할 수 있다. 추가된 원소는 맨 마지막에 추가된다.

pop

myArray.pop(); 를 사용하면 마지막 원소를 삭제하고 return한다.

shift()

var myArr =["Jeff","Lee","26"];
newArr = myArr.shift() 를 하면

newArr 은 ["Jeff"] 가 되고, myArr은 ["Lee","26"] 이 된다.

비트 shift처럼 왼쪽으로 움직이며 가장 왼쪽(첫째) 원소를 삭제한다.

함수

function functionName(인자){
함수가 실행될때 실행되는 함수들
}

functionName(); 이방법으로 실행됨.

global scope

var myGlobal = 10;
function fun1() {}

function fun2() {}

위와 같이 function위의 선언된 변수는 전역변수로 어느 함수에서나 참조가 가능하다.

참조 불가능한 것을 참조했을때 "undefined" 라고 출력된다.

함수안에 var을 사용해서 변수를 선언하면 scope내에서만 사용가능하고 var을 사용하지 않고 그냥 선언하면 전역변수로 된다.

fun1에서 그냥 var1 = 5; 이런식으로 선언하면
fun2에서 참조가 가능하다.

global vs local

같은 변수명의 전역변수와 지역변수가 존재할때

함수에서 지역변수가 존재하면 함수에서는 지역변수를 우선으로 사용한다.

var outerVar = "ohh";
function how() {
  var outerVar = "wow";
  return outerVar;
}

console.log(how());

따라서 위와같이 실행하면 지역변수인 wow를 출력한다.

하지만 그냥 consol.log(outerVar);를 출력하면 전역변수인 "ohh"를 출력한다.

boolean

true 와 false 로 사용

if 문

if (조건문) { } else{} 형식으로 사용된다.
elif도 사용가능.

equal 연산

if( val == 12) {} 와 같이 '=='를 사용하여 둘을 비교한다.

=== 를 사용하면
3 === 3 는 참이지만
3 === '3'은 거짓이라고 한다.

==를 사용하면 둘다 참이라고 한다.

!= 를 사용하여 둘이 다르면 true 같으면 false를 return 한다.

!== 를 사용하면 strict check를 할 수 있다. strict 체크를 하면 자동형변환을 하지 않고 비교한다.

비교 연산

다른 언어와 같에 >, < , >=, <= 를 사용해서 비교한다.

and를 && 로 사용.
or 를 || 로 사용.

Switch 문

var answer =""
swtich (val) {
	case 1: 
    	answer = "a";
    	break;  //switch 문 끝냄
    case 2:
    	answer = "b";
        break; //break없으면 case문 다음것도 계속 실행한다. 밑으로 쭉 
    case 3:
    	answer = "c";
        break; 
    default:
    	answer ="else";
        break;

위와 같이 작성 이런 문법들은 다른 언어랑 크게 다른게 없다.

default

if 문의 else와 비슷한 역할.
위와 같이 case가 선언되어있지 않은 val을 사용한다면 default문이 실행되게 된다.

object

object는 array와 비슷하지만 index를 사용하지 않는다.

var Dogs = {
  name: "Wall",
  legs: 4,
  tails: 1,
};

위와 같이 선언한다. {} 괄호를 사용해서 선언!.

object property에 접근하기

Dogs.name Dogs.legs. Dogs.tails 이런식으로 '.'을 사용해서 접근할 수 있다.

브라켓 노테이션으로 접근할 수 있다.
Dogs["name"]; 이런식으로

Dogs.name = "wall wall";
이라고 개의 이름값을 수정할 수 있다.

Dogs['bark'] = "woof!";
로 object에 프로퍼티를 추가할 수 이있다.

delete Dogs.bark 를 사용하여 프로퍼티를 삭제할 수 있다.

hasOwnProperty

hasOwnProperty를 사용하여 오브덱트에 프로퍼티가 있는지 확인할 수 있다.

Dogs.hasOwnProperty("name"); 을 하면 name 프로퍼티가 존재하기 때문에 true를 반환
없다면 false를 반환할 것이다.

while 문

var i =0;
var myArray =[];
while (i<5){
myArray.push(i);
i++;
}
위와 같이 사용

do while loop

do while loop은 무조건 한번 실행한뒤에 조건문을 확인한다.

var myArray =[];
var i =10;

do{
	myArray.push(i);
    i++;
 } while(i<5)

위처럼 do while문을 적으면 조건문은 만족하지 않지만 실행문을 한번 실행한다.

for문

for (var i=0; i<5; i++){}
위와 같이 사용
다른 언어와 똑같다.

파이썬과 같이 배열 자체에 for 문을 돌릴수도 있다.
var myArr = ["jeff","Lee","26"];
for (z in myArr){
console.log(z);
}
를 출력하면 배열의 값이 아닌 index값이 출력된다. 0 1 2 이렇게!
z는 배열의 값이 아니라 배열의 index 값인 거다!

random number

Math.random(); 으로 0이상 1미만의 숫자를 랜덤으로 생성한다.

정수 random number

Math.floor(Math.random() *20);
floor는 가장가까운 정수를 만들어준다. 따라서 위에 20을 곱해주면 0부터 19까지의 숫자를 만들어 준다.

range 안의 random number

Math.floor(Math.random() * (Max값 - Min값 +1))+ Min값;
Max값과 Min값 사이의 random 숫자를 생성한다.

parseInt

String을 integer로 만들어준다.

string이 int로 바뀌지 못한다면

parseInt(str) 로 사용

radix parseInt

진수를 골라서 int로 바꿀수있다. parseInt의 두번째 원소로 진수를정한다,

var str1 = "10011";
parseInt(str1, 2);

그러면 위의 string문을 2진수로 인식하고 10진수로 변환해 19를 return 한다.

삼항 조건 연산식

(가독성 떨어져서 안좋아한다 나는)
condition? statement-if-true: statement-if-false;

if (a===b){
	return true;
    }
else {
	return false;
    }
}

를 삼항 조건 연산식으로 바꾸면

return a===b? true: false
로 간단하게 바뀐다...뭐 이라인은 return a===b로 하면되긴하다.

이름이 없는 함수, arrow 함수

var magic = function() {
return new Date();
}

위와 같은 건
var magic = () =>{
return new Date(); }; 로

var magic = () => new Date(); 로 까지 줄일 수 있다.

... rest operator

...는 배열로 오는 모든 원소를 나열한다.

const sum =(function() {
	return function sum(...args){
    	return args.reduce((a,b) => a+b,0);
        };
})();
console.log(sum(1,2,3,4));

와같이 배열의 모든원소를 나열해서 더하는 함수를 만들 수 있다.

profile
한걸음씩 위로 자유롭게

0개의 댓글