1) 프로그래밍 표기법
① dash-case(kebab-case)
: 일반적으로 마이너스 기호를 사용하여 단어와 단어 사이를 꼬챙이 - 로 꽂은듯한 표기법.
: HTML, CSS에서 주로 이용
② snake_case
: 언더바를 사용하여 단어와 단어 사이를 잇는 표기법
: HTML, CSS에서 주로 사용
③ camelCase (낙타의 혹)
: 첫글자만 소문자로 표기하고 다음에 오는 단어부터 맨 앞글자를 대문자로 적는 표기법.
: JavaScript에서 주로 사용
④ PascalCase
: 카멜케이스와 유사하지만, 첫 단어의 맨 앞글자도 대문자로 적는 표기법.
: JavaScript에서 많이 사용.
2) Zero-based Numbering
: 일반적으로 숫자는 1부터 번호를 매기지만, 프로그래밍에서는 특수한 경우를 제외하고 0부터 숫자를 시작합니다.
let fruits = ['apple', 'banana', 'cherry']; // fruits변수에 apple, banana, cherry를 배열을 넣음.
| apple | banana | cherry |
| 0 | 1 | 2 |
3) 주석
① 한줄 주석
// 한줄메모
/* 한줄메모 */
② 여러줄 주석
/* 여러줄메모 */
4) 데이터 종류(자료형)
① String : 문자데이터 (따옴표를 이용해 표현)
let myName="ESTER"; // 문자데이터(ESTER)를 myName 변수에 삽입.
let email = 'abcd@naver.com';
let hello = `hello ${myName} !!` // 백틱( ` , 그레이브)으로 작성한 문자열 데이터의 경우
문자열 보간(${변수명})이 가능하다.
② Number : 숫자데이터 (정수 및 부동소수점 숫자)
③ Boolean : 불린데이터 (true, false 두가지 값 밖에 없는 논리데이터)
④ Undefined : 값이 할당되지 않은 상태
let undef; //변수에 값을 할당하지 않음.
let obj={ abc : 123 }; // obj 변수에 abc 객체 데이터만 들어있는 상태에서
console.log(obj.xyz); // xyz 데이터 출력을 요청하면 undefined (값이 할당되지 않은상태).
⑤ Null : 어떤 값이 의도적으로 비어있음을 의미
⑥ Object : 객체 데이터 (여러 데이터를 Key: Value 형태로 저장)
let user = { //user라는 변수 안에 객체 데이터를 저장.
name: ester; // 중괄호 { } 내의 Key: Value의 형태로 저장.
age: 85
};
⑦ Array : 여러 데이터를 순차적으로 저장. 대괄호로 [ ] 표현.
let fruits = ['apple', 'banana', 'cherry']
5) 변수
: 데이터를 저장하고 참조(사용)하는 데이터의 이름
: 변수의 종류는 var, let, const가 있고 var는 현재는 잘 이용하지 않는 변수이다.
let a=2; //변수 선언 (변수는 재사용이 가능함)
* let과 const의 차이
: let은 변수의 값 재할당이 가능하고 const는 값 재할당이 불가하다.
let a=1; // let으로 선언한 변수는
a= 999; // 값을 재할당 할 수 있다.
const a=1; // const로 선언한 변수는
a= 999; // 값을 재할당 할 수 없다. (TypeError 발생)
6) 예약어 (Reserved Word)
: 특별한 의미를 가지고 있어 변수나 함수 이름 등으로 사용할 수 없는 단어(ex: this, if)
https://www.w3schools.com/js/js_reserved.asp
JavaScript Reserved Words
JavaScript Reserved Words In JavaScript you cannot use these reserved words as variables, labels, or function names: abstract arguments await* boolean break byte case catch char class* const continue debugger default delete do double else enum* eval export
www.w3schools.com
7) 함수
: 특정 동작(기능)을 수행하는 일부 코드의 집합
function sum(a, b) { //a와 b는 매개변수(Parameters)
return a+b;
}
let a=sum(1, 2) // 1과 2는 인수(Arguments)
* 위와 같은 기명함수(이름이 있는 함수)를 선언할때는 "함수 선언"이라고 하고,
익명함수(이름이 없는 함수)는 "함수 표현"이라고 한다.
let world=function () { //익명 함수 표현
console.log('World~');
}
world(); // 함수 호출
* 함수는 데이터처럼 활용될 수 있다. 대표적으로 객체데이터의 특정 속성에다가 함수를 데이터처럼 삽입할 수 있는데 여기서 삽입된 함수를 메소드(Method)라고 부른다.
const me = { // me라는 변수를 선언하여 객체데이터를 저장.
name: 'ESTER',
age: 85,
getName: function () { //객체 데이터 내에 getName이라는 Key를 갖는 함수 표현
return this.name; //여기서 속성 내에 표현된 함수를 "메소드(Method)"라고 부른다.
}
}
console.log(me.getName());
8) 조건문
: 조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문(if,else)
let isShow=true;
if (isShow) { // if 뒤의 괄호 ( ) 부분의 값이 True이면 중괄호 { } 코드 실행.
console.log('show!'); //값이 false이면 코드 실행 안함.
} else { // if 뒤의 괄호 ( ) 부분의 값이 false이면 else 뒤의 중괄호 { } 코드 실행.
console.log('hide!'); //값이 true이면 코드실행 안함.
}
9) 메소드 체이닝 : 메소드를 이어 작성하는 방법
메소드가 객체를 반환하여 여러 메소드를 순차적으로 선언할 수 있도록 한다.
메소드 체이닝을 이용하면 코드가 간결해져 하나의 문장처럼 읽히게 할 수 있고 장기적으로는 유지보수가 용이하다.
ex:) const b = a.split('').reverse().join('';) //메소드를 나누어 작성하지 않고 연결하여 작성함.
// split(문자를 인수기준으로 쪼개서 배열로 반환) -> reverse(배열을 뒤집기) -> join(배열을 인수기준으로 문자로 병합해 반환)의 형태로 순차적으로 메소드를 실행함.
10) defer : 가져온 JS파일을 HTML 문서 분석 이후에 실행하도록 지시하는 HTML 속성(attribute)
일반적으로 HTML에서 js 파일을 연결할때는 정보를 명시하는 <head> 태그 내에 명시한다.
HTML 파싱 중에 <script>를 만나면 HTML 파싱이 중단되고 script를 먼저 다운받아 실행한 뒤 HTML 파싱이 재개되게 된다.
이 경우 브라우저 상에서 JS를 설치하고 실행하는 시간 만큼 사용자들이 화면을 보기까지의 시간이 지연되고, 또한 body 내부의 태그를 읽기전에 JS가 실행되므로 JS 내부에서 DOM 조작을 하는 경우, DOM트리가 랜더링 되지않았기때문에 오류가 발생된다.
이러한 단점을 보완하기 위한 속성이 defer 이며 <script defer src="main.js"></script>의 형태로 defer 속성을 추가하여 선언하게 되면 병렬적으로 JS와 HTML 파싱을 완료하고 이후 JS가 실행되어 위의 오류를 보완할 수 있다.
'Spec UP - Frontend > 패스트캠퍼스_FrontEnd' 카테고리의 다른 글
| Node.js (0) | 2021.12.13 |
|---|---|
| JS 선행(DOM API) (0) | 2021.10.21 |
| CSS 속성 Part 2. (0) | 2021.10.17 |
| CSS 속성 Part 1. (박스모델) (0) | 2021.10.17 |
| CSS 선언방식/주석/선택자 (0) | 2021.10.16 |
댓글