유용한 자바스크립트 문법 기본

- 변수와 상수

var age = 10
var age = 15
// 이렇게 사용하는것은 옳지않다.

let age2
age2 = 10
// var의 문제점을 해결하기위해 let을 사용한다.

const age3
// 오류발생함
const age3 = 10
// 선언과 동시에 초기화 해야함

- 자바스크립트의 자료형

- 연산자

typeof : 타입을 알려준다 typeof(변수)

 

- 함수표현식, 화살표 함수

console.log(helloB)
let helloA = function(){
	return "안녕하세요 여러분"
}
//함수 표현식 : 호이스팅 되지 않는다.
console.log(helloA)
function helloB(){
	return "안녕하세요 여러분"
}
//함수 선언식 : 호이스팅이된다.

let helloA = () =>{
    return "안녕하세요 여러분"
}

let helloA = () => "안녕하세요 여러분"
//한줄이면 return문 생략해 위와같이 표현도 가능
//화살표함수 : 호이스팅 되지 않는다.

- 콜백함수

function checkModd(mood, goodCallback, badCallback){

  if(mood==="good"){
    goodCallback()
  }else{
    badCallback()
  }
}

function cry(){
  console.log('cry')
}

function sing(){
  console.log('sing')
}

function dance(){
  console.log('dance')
}
checkModd("sad",sing,cry)

sing, cry는 콜백함수로 사용되었고, 함수표현식으로 들어가게 된것이다.

 

- 객체

let person = {} // 객체 리터럴 방식으로 객체 생성

let person = {
  name:"김지원",
  age:31
}
// 객체 리터럴 방식
const name = "name"
// console.log(person[name]) 틀린방식!
console.log(person['name'])
console.log(person.age)

객체의 키에 접근할때 문자열로 접근해줘야한다, 안그러면 변수로 인식하기 때문이다.

let person = {
  name:"김지원",
  age:31
}

console.log(getPropertyValue("name"))

function getPropertyValue(key){
  return person[key]
}

이와같이 함수를 만들어 접근도 가능하다.

프로퍼티 추가, 수정, 삭제

let person = {
  name:"김지원",
  age:31
  
}

person.location = "한국"
person["gender"] = '남성'

person.name="김지원22"
person["age"] = 20

delete person["name"]
// 메모리에서 지우지않는다.
person.age = null
// 메모리에서 지우는방식

console.log(person)

 

객체안의 함수 메소드

let person = {
  name:"김지원",
  age:31,
  say:function(){
    console.log('안녕')
  } //메서드 -> 방법

}


person["say"]()
person.say()

 

this사용해보기, in연산자를 통해 프로퍼티가 있는지 체크

let person = {
  name:"김지원",
  age:31,
  say:function(){
    console.log(`안녕 나는 ${this["name"]}`)
    console.log(`안녕 나는 ${person["name"]}`)
  } //메서드 -> 방법

}


person["say"]()
person.say()

console.log(`${"name" in person}`)
console.log(`${"age" in person}`)
console.log(`${"gender" in person}`)

this는 person으,로 바꿔서도 사용가능하다.

 

반복문, 객체 순환하기

Object.keys(), Object.values()

let person = {
  name:"김지원",
  age:31,
  tall:175

}

const personKeys = Object.keys(person)

for(let i=0;i<personKeys.length;i++){
  const curKey = personKeys[i]
  const curValue = person[curKey]

  console.log(`${curKey} ${curValue}`)
}

let test = Object.keys(person).length
console.log(test)

const personValues = Object.values(person)

for(let i=0;i<personValues.length;i++){
  console.log(personValues[i])
}

배열 내장함수

forEach

map: 새로운 배열을 만들어 리턴

includes: 일치하는 값이 존재하는가, 주어진 배열에서 인자로 존재하는가

indexOf: 존재하는 인자의 위치, 없으면 -1

const arr = [1,2,3,4]

arr.forEach(function(element){
  console.log(element)
})

const newArr = []
arr.forEach(function(element){
  newArr.push(element*2)
})
console.log(newArr)
//[ 2, 4, 6, 8 ]

const newArr2 = arr.map((element)=>{
  return element *2
})
console.log(newArr2)
//[ 2, 4, 6, 8 ]

let number = "3"
console.log(arr.includes(number))
// false

console.log(arr.indexOf(number))
// -1

findIndex(()=>{}) : 콜백함수를 전달해서, 오브젝트에서 찾을 수 있다. 인덱스를반환한다

ps. 두개 있으면 첫번째 요소를 반환한다.

const arr = [
  {color:"red"},
  {color:"black"},
  {color:"blue"},
  {color:"green"},
]

let number = 3
console.log(arr.findIndex((element)=>
element.color==="red"))
console.log(arr.findIndex((element)=>
element.color==="green"))

console.log(
  arr.findIndex((element)=>{
    return element.color === "blue"
  })
)

// 최종적으로 아래와 같이 사용
const idx = arr.findIndex((e)=>{
  return e.color ==="blue"
})
console.log(idx)

find 콜백함수로 전달하고, 첫번째 요소를 반환한다. (요소 자체를 반환)

const arr = [
  {color:"red"},
  {color:"black"},
  {color:"blue"},
  {color:"green"},
]

const element = arr.find((e)=>{
  return e.color==="blue"
})

console.log(element)
// {color:'blue'}

filter - 배열을 필터링한다. 원하는 요소만 가져온다.

const arr = [
  {num:1,color:"red"},
  {num:2,color:"black"},
  {num:3,color:"blue"},
  {num:4,color:"green"},
]

console.log(arr.filter((e)=>
  e.color ==="blue"
))

slice() - 잘라서 새로운 배열로 반환

slice(0,2)시작지점과 끝지점, end-1까지 반환한다.

const arr = [
  {num:1,color:"red"},
  {num:2,color:"black"},
  {num:3,color:"blue"},
  {num:4,color:"green"},
]

console.log(arr.slice(0,3))

concat - 배열합치기

const arr = [
  {num:1,color:"red"},
  {num:2,color:"black"},
  {num:3,color:"blue"},

]

const arr2 = [
  {num:4,color:"green"},
  {num:5,color:"yellow"},
]

console.log(arr.concat(arr2))

sort() : 정렬하기

문자정렬 : 그냥사용

숫자정렬 : sort를 조작해줘야함, 비교함수를 직접 만들어주기

let numbers = [0,1,3,2,10,30,20]

// console.log(numbers.sort())
// [ 0, 1, 10, 2, 20, 3, 30]

const compare = (a,b)=>{
  // 1.같다
  // 2.크다
  // 3.작다
  if(a>b){
    // 크다
    return 1
  }
  if(a<b){
    // 작다
    return -1
  }
  // 같다
  return 0;
}

numbers.sort(compare)
console.log(numbers)

join - 배열요소 합치기

const arr = ["김지원","님","안녕하세요"]

console.log(arr.join(' '))