JS 맛보기

HunGeun·2022년 4월 25일
0

HTML_CSS_JS

목록 보기
8/11

표기법

  1. dash-case
    kebab-case라고도 불림 (aka 꼬챙이)
    단어 사이사이에 -(dash)기호를 사용함

  2. snakecase
    (Underscore, Lowdash) 기호를 사용함

  3. camelCase
    첫 단어를 제외하고 단어의 시작을 대문자로 작성

  4. PascalCase
    camelCase와 유사하며, 첫 단어도 대문자로 작성

dash와 snake는 HTML/CSS에서 주로 사용
camel과 pascal은 JS에서 주로 사용


JS의 데이터 종류

1. string

문자데이터

  • ' " ` 3가지 기호를 사용하여 나타내며
  • `(Backtick)과 $기호를 이용해서 보간이 가능함
    example)
let myname = "js"
let email = ${myname}@gmail.com
console.log(email); //js@gmail.com

2. number

숫자데이터

  • 정수 및 부동소수점을 표현한다

3. boolean

  • true or false

4. undefined

  • 값이 할당 되지 않은 상태
    example)
let undef;
console.log(undef); //undefined

5. NULL

  • 값이 의도적으로 비어있음을 의미함
let a = null;

6. Object

객체 데이터

  • 여러 데이터를 key:value 형태로 저장
  • {}를 사용
    example)
let user = {
  name: js
  age: 100
}

console.log(user.name); //js

7. Array

배열 데이터

  • 여러 데이터를 순차적으로 저장
  • []를 사용하며, 쉼표(,)와 따옴표(",')로 구분한다.
    example)
let fruits = ['apple', 'banana']

변수, 예약어

변수

데이터를 저장하고 참조하는 데이터의 이름

  • var
    현재 사용을 권장하지 않음
  • let
    재할당이 가능함
  • const
    재할당이 불가능함

재할당이 필요없는 변수일때, let를 사용하면 메모리 낭비가 일어날 수 있음.
따라서 변수를 만들때 const를 주로 사용하고,
재할당을 할 가능성이 있을때 let를 사용하는 형태를 권장

example)

let x = 12;
console.log(x); //12
x = 100;
console.log(x); //100

const x = 12;
console.log(x); //12
x = 100;
console.log(x); //typeerror: assignment to constant variable.

Reserved Words

예약어
특별한 기능이나 의미가 존재하여, 변수나 함수의 이름 등으로 사용할 수 없는 단어이고, 사용시 syntaxError가 발생함

Reserved Words List

함수

특정 동작을 수행하는 일부 코드의 집합
return를 통해 값 반환이 가능함
Parameters(매개변수) : 데이터를 받아주는 매개체
Arguments(인수) : 매개변수로 받으려고 하는 각각의 데이터

기명함수

example)

기명함수 선언
function a() {
	console.log(‘a’)
}

익명함수

example)

익명함수 선언
let world = function () {
	console.log(‘world’);
}

메소드

객체데이터 내부의 속성 부분에 일반적이 데이터가 아닌 함수가 들어 있는 경우를 메소드라 함
example)

const example = {
	name: ‘js’,
	age: 100
	//method
	getname: function () {
		return this.name;
	}
};

조건문

조건의 결과에 따라 다른 코드를 실행하는 구문
if, else, else if 등 사용

DOM API

Document Object Model, Application Programming Interface
자바스크립트로 html를 제어하는 여러가지 명령들을 의미함

querySelector
querySelectorAll
addEventListener
classList.add
classList.remove
.textContent

Method Chaining

메소드 체이닝
메소드를 붙혀서 사용할 수 있음.
example)

const a = ‘Hello~;
const b = a.split(‘’).reverse().join(‘’); 

0개의 댓글