한 번에 끝내는 프론트엔드 개발 초격자 패키지 Online -JavaScript(1)

패스트캠퍼스의 한 번에 끝내는 프론트엔드 개발 초격자 패키지의 JS 선행부분을 정리한 글 입니다. 😊

표기법

• dash-case(kebab-case)
  • Html,Css에서 주로 사용한다.
  • ex) the-quick-grown-fox-jumps-over-the-lazy-dog 
• snake_case 
  • Html,Css에서 주로 사용한다.
  • ex) the_quick_brown_fox_jumps_over_the_lazy_dog
• camelCase 
  • javaScript에서 주로 사용한다.
  • 앞에 영단어가 소문자로 오는것에 주의하자 
  • ex)theQuickBrownFoxJumpsOverTheLazyDog
• PascalCase 
  • javaScript에서 주로 사용한다. (보통은 camelCase를 자주 사용하고 특이케이스에 PascalCase를 쓴다.)
  • ex)TheQuickBrown 
  • camelCase와 다른점은 앞또한 대문자라는것 

Zero-based Numbering 

-> 0기반 번호 매기기 , 특수한 경우를 제외하고 0부터 숫자를 시작한다.

->season이라는 배열에서 spring 에 접근하기 위한 인덱스는 0이다.

-> 즉 시작이 0 

 

주석

1)// 한 줄 메모

2)/* 한 줄 메모 */

3) /**

 *여러 줄 

 * 메모 1

 * 메모 2 

*/

 

데이터 종류(자료형)

• string 
• Nubmer 
• Boolean
• Undefined
• Null
• Object
• Array 

String(문자 데이터)

1)let myName = "HEROPY"

2)let email = 'thescon@gmail.com'

->문자데이터는 "와 '을 가리지 않는다.

3)let hello = `Hello ${myName}?!`

->벡틱으로 보간이라는 방법을 지원해준다.

->$ {} :벡틱을 사용해 이스케이프 문자를 사용하지 않고 문자열에 myName이라는 변수를 추가한다.

(보간이란?보간은 여러 줄 문자열에 대해 연결 또는 이스케이프 문자를 사용하지 않고 변수, 함수 호출 및 산술 표현식을 문자열에 직접 삽입 할 수있는 기능)

 

Number(숫자 데이터)

: 정수 및 부동소수점 숫자를 나타낸다.

1)let number=123;

2)let number=1.57;

(부동 소수점? 컴퓨터에서 실수를 표현하는 방법)

 

Boolean(불린 데이터)

:true,false 두 가지 값 밖에 없는 논리데이터

1)let checked =true;

2)let isShow=false;

 

Undefined 

: 값이 할당되지 않은 상태를 나타낸다. 

let undef;

-> console.log(undef) 를 통해 확인할 경우 undefined라고 출력된다.

let obj={abc:123};

->console.log(obj.xyz) 를 통해 obj에 없는 값에 접근할 때 undefined라 출력된다.

 

Null

:어떤 값이 의도적으로 비어있음을 의미한다. 

let empty =null ;

->console.log(empty)을 통해 확인하면 null이 출력되는 것을 볼 수 있다.  

 

Object(객체 데이터)

//let 이라는 키워드를 사용해 a라는 변수를 선언하고 12라는 정수값을 할당했다.
//12가 할당된 a에 할당된 값을 999로 변경할 수 있다.
let a=12;
console.log(a); //12 출력 

a=999;
console.log(a); //999 출력

: 여러 데이터를 key:value 형태로 저장한다.

let user={

//Key: Value

userName: 'TEST'

};

->key: value를 설정하고 뒤에 세미콜론을 추가하지 않는다. 마지막 중괄로 닫을때만 세미콜론 추가!

 

Array(배열 데이터)

: 여러 데이터를 순차적으로 저장한다. 

let fruits = ['apple','banana','cherry']

-> console.log(fruits[0])  //apple 

 

변수 

:데이터를 저장하고 참조(사용)하는 데이터 이름 

• var,let,const 을 사용해 변수를 선언한다. 
• var라는 키워드는 되도록이면 사용하지 않는것이 좋다. 
• let은 재사용이 가능한 변수 선언  

//let 이라는 키워드를 사용해 a라는 변수를 선언하고 12라는 정수값을 할당했다.
//12가 할당된 a에 할당된 값을 999로 변경할 수 있다.
let a=12;
console.log(a); //12 출력 

a=999;
console.log(a); //999 출력

• const는 재사용이 불가능한 변수

//한번 const를 통해 선언된 변수에 값이 할당되면 이후 값을 변경할 수 없다.
const a =12;
a=999; //TypeError : Assignment to constant variable.

예약어

: 특별한 의미를 가지고 있어 변수나 함수 이름등으로 사용할 수 없는 단어

ex) this,if,break 등은 변수나 함수이름등으로 사용할 수 없다 

 

함수 

: 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

//함수 선언
//function -> 함수선언 키워드 helloFunc->함수이름 
function helloFunc(){
//실행 코드 
 console.log(1234);
}

//함수 호출 
helloFunc(); //1234

//multiplication함수는 매개변수를 a,b를 갖고있는 함수이다. 
function multiplication(a,b){
 	return a*b;   
}

• 기명(이름이 있는) 함수

//함수선언
function hi(){
	console.log('hi');
}

• 익명(이름이 없는) 함수

//익명(이름없는)함수 
//함수표현 
let world=function(){
 console.log("world~");
}

world(); // world~ 가 출력된다

• 객체 데이터 

//객체 데이터에 함수가 들어간 경우 해당 속성을 속성이라 하지 않고 메소드라 한다!!!

const person{

let name: 'testName'.
    getName: function(){
        return this.name;
    }
}