날아라쩡글이의 블로그입니다.
java script (함수까지 정리 ) 본문
java script까지 공부 후 node.js와 리엑트 공부를 진행하려고 한다.
.그러나 개발환경에 code를 하나하나 작성하고 비교를 하는 방법을 원했기 때문에 개발환경을 준비하기 위해서는 더 이상 사무실용 데스크탑을 이용하기에 어렵다는 생각이 들었고, 개인용 노트북으로 개발환경을 만들고 들고다니면서 실행을 했기 때문에 시간이 걸렸다.
java-script의 겨우 규칙과 문법으로 코딩을 진행하며 , 1. 언어제어인 스트립트언어 : web browser 2. 소스하나하나 해석하는 인터 프리터 언어이다. node.js를 이용하여, 작동이 되며 단순히 web 외에 electron등 어플리케이션을 이용해 모바일도 구현할 수 있는 언어로 변경이 되었다.
various javascript runtime : 자바스트립트의 프로그래밍 언어가 구동되는 환경은 버전에 따라서 갖는 부분이 다르며 다양한다. 표준화와 관리를 갖는 것은 ECMA-262 이며, 표준화와 명세서에 대해서는 ES5이후에 사용된 부분이다. ES5의 경우 문법이 base로 진행된다.
- 값을 만들어 함수인자로 사용이 가능하다. 값을 만들어내는 간단한 코드는 표현식이라고 명칭한다.
- 표현식+표현식+표현식 = 문장식이라고 명칭한다.
- alert (1000+900+90+4); ->실행되면서 메세지 창이 뜨게 만드는 함수
- var name = 'mark'; 한줄에 문장이 하나인 경우에는 세미클론을 붙이지 않아도 문제가 되지않으나, 붙이는 게 좋다.
- 관례적으로 한줄에 여러문장을 작성할 때 세미클론으로 구분이 가능하다. 마지막 문장은 마지막 문자의 결과값을 반환한다.
키워드와 예약어 (kewords & reserved words)
- 키워드 : 특정목적을 위해 사용되는 단어, 키워드는 예약어로 지정이 가능하다.
- 예약어 : 프로그램 작성시 변수명, 함수명 등 이름으로 사용하지 못하는 단어를 의미한다.
| reserved keyword :이미 특정한 목적을 위해 사용하기 때문에 사용할 수 없는 예약어 :runtime에 따라서 다름 | ||||
| break(반복문자체에서 탈출) | delate (객체속성을 삭제) | funtion (함수) | return (결과값 도출시 사용) | typeof (변수의 타입을 확인할 때 사용) |
| case(swith와 함께 사용하는 문) | do(적어도 한번이상은시행되는 반복문) | if(반복문) | switch(입력변수 if보다 정형화된 제어문) | var (선언된 변수의 스코프) |
| catch(try-catch 예외받기) | else(if/else/else 반복문에 사용함) | in (객체연산자, 객체존재시 true반환) | this(생성자함수때 사용, 다른생성자호출) 클래스이름대신 this, 첫줄에서만 호출가능) | void (표현식을 평가하여 undefined를 반환) |
| continue(반복문에서 멈추고, 다음반복으로) | finally (try선언 이후 실행된 선언 ,예외발생여부 상관없이 사용) | instanceof (생성자의 prototype의 속성이 프로토타입 체인 어디에 존재하는지 판별) | throw(예외값던질때 사용) | while(조건문) |
| defult(기본값) | for (~하는동안의 반복문) | new (생성자로 객체를 만드는 역활의 함수) | try(예외 받을때 사용) | with (명령문의 범위 체인을 확장) |
| future reserved keyword :앞으로 특정한 목적을 위해 사용할 가능성이 있어서 사용할 수 없는 예약어 | ||||
| abstract | debugger | protected | goto | short |
| boolean | double | public | implements | static |
| byte | enum | export | import | super |
| char | native | extends | int | synchronized |
| class | package | final | interface | throws |
| const | private | float | long | transient/volatile |
위의 내용은 java와 거의 중복되는 값이 많다.
식별자 : identifier : 선언자라고 생각하면된다. 코드내의 변수와 함수 혹은 속성을 식별하는 문자열로써 대소문자를 구분한다. '유니코드 문자' '$''_''숫자(0-9)'를 사용 가능한데, 숫자로 시작은 불가능 하다. '예약어'사용불가능 하며, '공백문자'도 사용 불가능 하다.
프로그램에서 사용하는 변수, 함수의 이름을 짓는 것은 언제나 어려운 일이며, 의미없는 이름이 아닌, 역활에 맞는 적절한 이름을 짓도록 노력해야한다.
주석:comments = 설명을 프로그램에 작성하여, 소스 코드를 이해할 수 있도록 돕는 역활로 사용한다.
변수와 상수 :어떤 값을 메모리에 보관할지 작성하는 부분이다.
- 변수 : var , let + 변수지칭, 선언 = 값; undefined의 값도 할당하는 것이다. 선언이 안된 변수 식별자에는 값을 할당 할 수 없다.
- 상수 : const + 식별자로 작성 : 변하지 않는 값을 작성하며, 바로 값을 할당한다
-
var : 변수 선언 키워드 let : 변수 선언 키워드 const : 상수이다. 중복선언이 가능하며, 중복 선언시 마지막 값이 변수에 저장된다.
초기화 없이 선언만 한 경우 선언문 자체가 무시된다.중복선언이 불가능
코드의 안정성을 높여줌중복선언이 불가능
코드의 안정성을 높여줌변수 선언과 초기화 이후에 반복하여 다른 값을 재할당이 가능한 변수이다 변수 선언과 초기화 이후에 반복하여 다른 값을 재할당이 가능한 변수이다 처음 선언시 초기화를 해주어야하며, 선언하고, 초기화하면 다른값은 재활당 할 수 없다. 함수 레벨 스코프
함수 내부{}에 선언된 변수만 지역변수로 한정하며, 나머지는 전역변수 이다. 블럭외부에서도 어디서나 참조가능블록 레벨 스코프
함수 내부 외에 if문이나 for문등 {}코드블럭에서 선언된 변수도 지역변수로 취급한다.
함수 내부 선언된 변수도 외부에서 참조 불가능하다블록 레벨 스코프
함수 내부 외에 if문이나 for문등 {}코드블럭에서 선언된 변수도 지역변수로 취급한다.
함수 내부 선언된 변수도 외부에서 참조 불가능하다호이스팅 발생:변수선언문을 뒤에 선언하더라도 앞에 코드가 참조할 수 있게 됨 실행전 엔진이1.변수선언, 2.undefined로 초기화 진행함 호이스팅이 발생되지 않음
실행 전 1. 변수 선언만 해두고, 2. 초기화는 코드 실행 과정에서 변수 선언문 만났을 때 수행함호이스팅이 발생되지 않음
실행 전 1. 변수 선언만 해두고, 2. 초기화는 코드 실행 과정에서 변수 선언문 만났을 때 수행함선언된 변수는 브라우저 전역개체 프로퍼티로 사용된다 선언된 변수는 전역객체 프로퍼티로 할당되지 않는다 선언된 변수는 전역객체 프로퍼티로 할당되지 않는다 - VAR 의 경우 사용하지 않고, LET과 CONST를 사용한다.
let 과 const의 작성, 선언자 선언 모습 
결과값 hello가 5회 출력되었다.
자료형으로는 data type 이있다.
1. 데이터 타입
| 기본타입 | boolean | null | undefined | number | string | symbol(ECMA script 6에 추가) |
2. 객체(objects) = 사용자정의와 표준내장객체를 이용하여, 실행환경을 만들 수 있음
null 과 undefined의 값은 == 로 확인했을 경우 같은 값으로 나오지만 === 동치로 확인했을때는 다른 값으로 나오는 걸 확인 할 수 있다. 그렇기 때문에 정확한 typeof의 비교를 하려면 === 으로 확인하는 것이 중요하다.
NaN = 숫자가 아니라는 의미의 단어
'MARK'의 경우 문자열로 string 을 작성하고 사용한다 . " ",' '을 이용한다.
문자열끼리 더해서 입력값을 출력할 수 있으며, `${ }`처럼 문자열을 직접삽입이 가능하다.
document.getElementByld()함수의 단축기로 = $()을 사용하고, 인자로 던져진 id를 가진 요소를 하나 반환한다.
param:<from>엘리먼트를 통해 입력된 데이터를 가져올때 사용하는 내장객체로 이름뒤에 . 그다음에 data의 이름을 작성한다. ${a.'lee'}처럼
Mark값은 똑같지만 c와 d의 인자는 다른 인자로 나오는 것을 확인 할 수 있다.
symbol의 경우 new symbol()의 생성자를 만들 수 없는 고유한 성격을 가지고 있다.
객체의 경우 새롭게 정의할 수 있으며, 표준내장 객체를 이용하는 것도 중요하다.
조건문 = 조건에 따라서 시행되는 것으로 중요하다. 표현식이 참으로 평가 될 때 실행이 가능하다.
| falsy | false | 0 | null | undefined | NaN | 빈문자열' ' |
| truethy | true | +37(숫자) | -37(숫자) | 'mark' | {}모든객체 | []빈배열 |
표현식은 참, 거짓으로 표현된다.
if (조건문) else (반대되는 조건문) else if(조건문에 해당되지 않으며, 여러조건을 확인할 수 있는 조건문)
중복값의 경우 const로 상수를 만들어주는 방법도 있다.
multipleofThree = n%3===0;과같은 형태로 만들어 중복값은 클린 코딩이 될 수 있게 수정해준다.
논리 연산자를 이용한 조건문 평가
| && | 나중에 기호입력 | ! |
| ∪그리고 | ∩,또는 | -,아님 |
| and | or | not |
삼항연산자
n%5===0? A: B
n의값이 0일경우 A에 입력, 0이 아닐 경우 B에 입력
switch 조건문 (switch, case )
for 반복문 (코드블럭을 반복하여 실행함)
while 조건문 = 조건이 거짓이 될 때 까지 반복 실행
- true : 계속
- false : 중단
do = 조건이 거짓이 될때까지 반복실행으로 1번은 실행 해야하는 값
while의 경우 한번도 안할 수 있음
| for of = interable (배열) | for in = property(모든프로퍼티) |
| for(const ; of {[1,2,3]} | test = funtion(){for(const ; in{a:1,b:2,c:3}} |
| 하나하나 출력 1, 2 ,3 | 1, 2 ,3,test출력 |
| 내장객체를 모두 사용함 | 객체안에서 사용하고, 하나하나 돌림, 의도대로 실행되지 않는 경우가 있음 |
함수 (funtion) = 함수를 만들 때 사용하는 키워드
1. 이름으로 선언하는 방식 funtion helllo1(name){ //funtion을 선언하고 매개변수 생성함
console.log('출력값'); return 'hello${name}';
}
2.상수에 입력을 하고 함수 만듦, 변수에 담아둠, 익명함수를 만들어서 변수에 할당법
const hello1 = funtion(매개변수){
console.log(hello1);
}
3. 생성자 함수로 함수를 만드는 법 , 익명함수처럼 작성하나 잘 사용 안함,
cost hello = new funtion();
| 이름으로 선언 | 익명함수 선언 | 생성자 함수 선언 |
| funtion(){} | const X =funtion(){} | const X = new funtion(); |
| -선언적 funtion으로 호이스팅이 가능함 | -호이스팅이 불가, 위에 생성하고 사용가능 | 매개변수로 문자열을 출력시 사용함, 잘 사용하지 않음, 전역함수를 불러올수 있음 golbal.a=0;을 작성해서 |
4. ( ) => { } :arrow funtion : 메소드 함수가 아닌곳에 적합한, 익명적 선언방식으로 생성자로써 사용이 불가
함수 객체 생성 =new funtion(); : 생성자 함수
함수안에서 함수를 만들어 리턴 함 , 함수안에서 인수를 이용하여 함수를 호출하는 방법
