[JavaScript]_시작하기

패스트캠퍼스 강의 정리

데이터 타입 확인

console.log(typeof 'hello world!')
console.log(typeof true)
console.log(typeof {})

// typeof를 통해 타입을 확인할 수 있음.

산술,할당 연산자

// 산술 연산자(arithmetic operator)

console.log(1 + 2)
console.log(5 - 7)
console.log(3 * 4)
console.log(10 / 2)
console.log(7 % 5) // 나머지값 기호는 %

// 할당 연산자(assignment operator)

//const a = 2
// = 이라는 기호가 할당 연산자임
// const는 재할당이 불가, let 을 사용하면 할당가능
let a = 2
//a = a + 1
a += 1 // 위 코드랑 같은 값 =기호앞에 산술연산자(+,-,*,/,%) 사용가능

console.log(a)

비교연산자

// 비교 연산자 (comparison operator)

const a = 1
const b = 3

console.log(a === b)
// 일치연산자 값이 일치하면 true가 나옴 , 일치하지않으면 false 

function isEqual(x, y) {
  return x === y
}

console.log(isEqual(1, 1)) //true
console.log(isEqual(2, '2')) //false

/*-- ! 불일치연산자 */
console.log(a !== b)
// 서로가 다른것인지 확인해주는 ! (불일치연산자)
// 값이 다르다면 true, 값이 같다면 false

console.log(a > b)
>=,<=,

논리 연산자

// 논리 연산자 (logical operator)

const a = 1 === 123 // 일치연산자를 통해서 비교 
const b = 'AB' === 'ABC'
const c = true

console.log(a)
console.log(b)
console.log(c)

console.log('&&: ', a && b && c)
//&& 엠퍼센트 (그리고,and) 하나라도 false 값이 있다면 false 값이 나옴
console.log('||: ', a || b)
// || (또는,or) 모든 값 중에 true 값이 하나이상이 있다면 true 값이 나옴
console.log('!: ', !a)
// ! (부정연산자,not) 특정한데이터의 반대값이 나옴

삼항 연산자

// 삼항 연산자 (ternary oprator)
// ? , : 기준으로 세개의 항이 있다. 
const a = 1 < 2

if (a) {
  console.log('참')
} else {
  console.log('거짓')
}

// 위의 if문 5줄의 코드를 한줄의 코드로 작성할 수 있다.

console.log(a ? '참' : '거짓')
// 세개의 항으로 조건을 만들어내는 것
// ? 기준으로 앞에 있는 값이 true이면 :의 앞부분을 실행 , false이면 :의 뒷부분 실행

조건문 If Else

import random from './getRandom' // getRandom 파일을 받아옴

//getRandom.Js 파일에 export default를 통해 내보내줌
export default function random() {
  return Math.floor(Math.random() * 10)
}

// 조건문 (If statement)

const a = random()

if (a === 0) {
  console.log('a is 0')
} else {
  console.log('rest....')
}

if (a === 0) {
  console.log('a is 0')
} else if (a === 2) {
  console.log('a is 2')
} else {
  console.log('rest....')
} 
// 중간에 else if를 넣어서 조건을 추가 할 수  있다.

switch문

// 어떠한 변수가 특정한 값으로 딱 떨어지는 조건으로 분기처리 하고 있다면 if문 보다 switch를 쓸 수 있다 

switch (a) {
  case 0:
    console.log('a is 0')
    break
  case 2:
    console.log('a is 2')
    break // 하나의 case 종료될때마다 끝났다는 break를 써줘야함 (다른내용도 실행될수있기때문에)
	default: // 특정한 값이 일치하는것이 없고 나머지 경우에만 작성함. :기호로 마무리 else처럼 마지막에 작성
	
}

// 어떤 변수의 내용이 정확하게 무엇인지 구분해서 조건문을 작성할 수 있음
// 단점은 if문보다 수직으로 작성되서 길어질수있다는 점

반복문 For

// 반복문 (For statement)
// for (시작조건; 종료조건; 변화조건) {}

for (let i = 0; i < 3; i += 1) {
  console.log(i) // 0 1 2
}

<body>
  <h1>hello world</h1>
  <ul></ul>
</body>

const ulEl = document.querySelector('ul')

for (let i = 0; i < 3; i += 1) {
  const li = document.createElement('li')
  li.textContent = `list-${i + 1}`
  ulEl.appendChild(li)
}

// html 구조에는 실제로 존재하지 않지만, 자바스크립트로 요소를 생성해서 실제 html 구조에 ul 태그 자식으로 순서대로 내용을 삽입함. 

for (let i = 0; i < 10; i += 1) {
  const li = document.createElement('li')
  li.textContent = `list-${i + 1}`
  if ((i + 1) % 2 === 0) {
    li.addEventListener('click', function () {
      console.log(li.textContent)
    })
  }
  ulEl.appendChild(li)
}

변수 유효범위

// 변수 유효범위(Variable Scope)
// 변수가 선언되어 있는 특정한 블럭내부가 하나의 유효범위가 됨.
// var, let, const
// let, const 는 블록레벨의 유효범위
// var 는 함수레벨의 유효범위를 가지기때문에 범위가 더 크다

function scope() {
  if (true) {
    var a = 123
  }
  console.log(a)

}
scope()

형 변환

// 형 변환 (Type conversion)

const a = 1
const b = '1'

console.log(a == b)
// == 이퀄두개를 사용 - 동등연산자: 동등연산자를 사용하면 형 변환이 일어나면서 a와b를 비교
// 의도하지 않는 서로 다른값이 같다라고 나올수 있기때문에 쓰지않는 걸 권장 (자바스크립트)
// 자바스크립트에서는 === 일치연산자를 사용!

// Truthy (참 같은 값)
// true, {}, [], 1, 2, 'false', -12, '3.14' ...

// Falsy(거짓 같은 값)
// false, '', null, undefined, 0, -0, NaN(Not a Number)

Author And Source

이 문제에 관하여([JavaScript]_시작하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@heejinsung/JavaScript시작하기

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[JavaScript]_시작하기

데이터 타입 확인

산술,할당 연산자

비교연산자

논리 연산자

삼항 연산자

조건문 If Else

switch문

반복문 For

변수 유효범위

형 변환

Author And Source

좋은 웹페이지 즐겨찾기