자바스크립트 기초 ① - 제어문 등

✔️ Object

• 파이썬의 dict와 같은 역할

const obj = {
	name : "12",
    age : 123
    }

///참조할 때
	obj.name
	obj["name"]
///할당할 때 - 동적으로 추가 및 수정 가능
	obj.name = "myName"
	obj["name"] = "myName"

✔️ Array

var fruits = ["apple", "banana"];
document.write(fruit[0]);
//배열 길이
>>fruits.length;
<< 2
//배열 값 추가
fruit.push("count");

✔️ 조건문

1. if

📝 간단한 토글 만들기

//버튼
<input id="day" type ="button" value="night" onclick="
  //console에서 value 검색
    var target = document.querySelector('body');
	//document.querySelector('#day') -> this로 리팩토링
	//value가 night일 경우 다크모드
    if(document.querySelector('#day').value === 'night'){
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      this.value = 'day';
    }
	//value가 day일 경우 라이트모드
    else{
      target.style.backgroundColor = 'white';
      target.style.color = 'black';
      this.value = 'night';
    }
">

2. switch case

switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
}

• 변수 x의 값과 첫번째 case문의 값 'value1을 일치 비교한 후, 그 다음 case와 차례로 비교함
• case문에서 변수 x의 값과 일치하는 값 찾으면 해당 case문 아래 코드 실행, break 만나거나 switch문이 끝날 경우 멈춤
• 값과 일치하는 case문이 없을 경우 default문이 실행(default문이 있는 경우).

3. 삼항 연산자

condition ? value if True : value if False

condition이 true이면, 연산자는 value if True를 반환하고 반대의 경우 value if False를 반환한다.

var age = 29;
var canDrinkAlcohol = (age > 19) ? "True, over 19" : "False, under 19";
console.log(canDrinkAlcohol); // "True, over 19"

✔️ 반복문

1. 배열 표현

//예시
var fruits = ["apple", "banana", "coconut"];
var i = 0;
while(i < fruit.length){
  document.write('<li>'+fruit[i]+'</li>');
  i = i+1;
}
//querySelectorAll을 활용하여 여러 태그에 반복 적용하기
var alist = document.querySelectorAll('a');
var j = 0;
while(j < alist.length){
  alist[i].style.color = 'yellow';
  i = i+1;
}

2. for in문

• 해당 객체의 모든 enumerable properties를 순회할 수 있도록 해준다.

const arr = [10,20,30,40];
const obj = {
  name : 'myName',
  job : 'designer'
}

for (const key in obj){
  console.log(`${key} : ${obj[key]`);
// name : myName 
// job : designer

• ⚙️ for of와 forEach도 마저 정리할 것.

✔️ 구조 분해 할당

• 배열이나 객체 내 변수들을 편하고 쉽게 만들어서 사용할 수 있게 해주는 문법

//1. 기존에 정의한 배열을 새 변수에 다시 할당하기 
const arr = [10,20,30,40];
let [a,b,c,d,e='50'] = arr
console.log(a) //10
console.log(e) //50
//2. 객체의 key값을 변수로 할당하기
let student = {
  name : "myName",
  age : 24
}
let{name,age} = student
console.log(name) //myName

//3. key와 value가 같을 때 반복해서 쓸 필요 없다.
 let name = "myName", age = 24
 let student = {name, age}
 // let student = {name : name, age: age}로 안 해도 됨

✔️ Template String

• 백틱 사용하여 변수들을 {}안에 넣어 표현할 수 있다.

${변수명}