소프트웨어 설계 2주차

var를 이용한 변수 선언의 문제점

-# 변수를 덮어 쓸 수 있음

-# 다시 선언(재선언)할 수 있음

 

let을 이용한 변수 선언

-재선언 불가능, 변수 덮어 쓸 수는 있음

let val2 = "let 변수";
 console.log(val2);
 // let은 덮어 쓰기 가능
val2 = "let 변수 덮어 쓰기“;
 console.log(val2);
 // let은 재선언 불가능/ 에러 발생
let val2 = "let 변수 재선언";
 console.log(val2);

 

const를 이용한 변수 선언

-재선언, 덮어쓰기 모두 불가능

const val3 = "const 변수";
 console.log(val3);
 // const 변수는 덮어 쓰기 불가능 / 에러 발생
val3 = "const 변수 덮어 쓰기";
 // const 변수는 재선언 불가능 / 에러 발생
const val3 = "const 변수 재선언";

 

 

 

* 예외적으로 오브젝트 타입(객체, 배열, 함수, 기타)의 데이터는 const로 정의해도 도중에 데이터 수정 가능

* 프리미티브 타입 ( boolean, number, bigint, string, undefined, null,symbol)은 데이터 수정 불가

 

 

객체속성값변경및추가

 // 객체정의
const obj1 = {
  name: "홍길동",
  age: 24,
 };
 console.log(obj1);
 // 속성값변경
obj1.name = "이순신";
 console.log(obj1);
 // 속성값추가
obj1.addr = "Seoul";
 console.log(obj1);

 

 

배열값변경및추가

// 배열정의
const arr1 = ["dog", "cat"];
 console.log(arr1);
 // 첫번쨰값변경
arr1[0] = "bird";
 console.log(arr1);
 // 값추가
arr1.push("monkey");
 console.log(arr1);

*push()함수: 배열 끝에 요소 추가

 

*리액트 개발에서는 const가장 많이 사용

*동적으로 바뀌는 값은 state 으로 관리

*state로 관리하지 않으면서 처리 도중 수정이 필요한 변수만 let으로 선언

 

 

템플릿 문자열

+연산자 사용

const name = "홍길동";
 const age = 24;
 // 기존의 문자열과 변수 결합 방법
const message = "내 이름은 " + name + "입니다. 나이는 " + age + "세 입니다.";
 console.log(message);

 

` 역따옴표 사용

• `(역 따옴표 또는 백쿼트backquote)로 문자열 감싼다
• 문자열 내부에 ${}로 감싼 안쪽은 자바스크립트로 입력 가능
• 변수 외에도 함수 호출 같은 자바스크립트 코드 넣을 수 있음

const name = "홍길동";
 const age = 24;
 // 템플릿 문자열 이용 방법
const message = `내 이름은 ${name}입니다. 나이는 ${age}세 입니다.`;
 console.log(message);

 

 

화살표 함수 () => {}

기존 함수 작성 예

 // 기존함수작성법#1
 function func1(value) {
  return value;
 }
 console.log(func1("func1입니다"));
 // 기존함수작성법#2
 const func2 = function (value) {
  return value;
 }
 console.log(func2("func2입니다"));

 

 

화살표 함수 예) 

const func3 = (value) => {
 return value;
 }
 console.log(func3("func3입니다"));

 

 

*주의점

 

인수가1개인경우에는소괄호( ) 생략이 가능함

const func3 = value => {
 return value;
 }
 console.log(func3("func3입니다"));

 

인수가2개이상인경우소괄호를생략할수없음.

const func3 = value1, value2 => {//에러 발생//(value1, value2)괄호 필요
 return value1 + value2;
 }
 console.log(func3("func3입니다"));

 

 

return생략표기법

•처리를한행으로반환하는경우중괄호와return을생략할수있음.

// 처리를한행으로반환하므로{} 및return문생략
const func4 = (num1, num2) => num1 + num2;
 console.log(func4(10, 20)); // 30

 

• 반환값이여러행일경우에는( )로감싼뒤단일행과같이모아서반환할수있음

const func5 = (val1, val2) => (
 {
 name: val1,  
age: val2,
 }
 )
 console.log(func5("홍길동", 24)); //{name: '홍길동', age: 24}

 

잘못된return 생략표기법.

•중괄호로감싼뒤return을생략할수있지만값이반환되지않는문제가발생함.

// { }로감쌌지만return 구문을이용하지않음.
 const func4 = (num1, num2) => {
  num1 + num2
 };
 console.log(func4(10, 20)); // undefined

 

 

분할대입{ } [ ]

//분할 대입을이용하지않고문자열을출력
const myProfile = {
 name: '홍길동',
 age: 24,
 }
 const message = `내 이름은 ${myProfile.name}입니다. 나이는
${myProfile.age}세 입니다.`;
 console.log(message);
 
 // 분할 대입 이용
const { name, age } = myProfile;
 const message = `내 이름은 ${name}입니다. 나이는 ${age}세 입니다.`;
 console.log(message);

 

•객체분할대입 

//일부만추출하거나순서를바꾸어추출
const myProfile = {
  name: '홍길동',
  age: 24,
 }
 // 일부만추출
const { age } = myProfile;
 // 순서를바꾸어추출
const { age, name } = myProfile;

// 추출한속성에새로운별명을지정하여사용
const myProfile = {
  name: '홍길동',
  age: 24,
 }
 // 콜론(:)기호를이용해다른변수명(별명)을지정.
 const 
{ name: newName, age: newAge } 
= 
myProfile;
 const message = `내이름은${newName}입니다. 
나이는${newAge}세입니다.`;
 console.log(message);

 

 

•배열 분할 대입

•객체와 마찬가지로 배열에서도 분할대입을 이용할 수 있음.

•배열에 분할대입을 할때는 변수선언부에[ ]를 사용하여 배열에 저장된순서에 임의의 변수명을 설정하여 추출할 수 있음.

 

// 배열인덱스를지정해서대입
const myProfile = ["홍길동", 24];
 // 배열인덱스를지정해서대입
const message = `내이름은${myProfile[0]}입니다. 나이는${myProfile[1]}세입니다.`;
 console.log(message);
 
 // 배열에분할대입
 const myProfile = ["홍길동", 24];
 // 배열분할대입
const [ name, age ] = myProfile;
 const message = `내이름은${name}입니다. 나이는${age}세입니다.`;
 console.log(message);

 

디폴트값=

디폴트값은함수의인수나객체를분할대입할경우,

값이존재하지 않을때초기값을설정해주는기능.

 

인수의 디폴트값

//메시지출력함수의인자값을전달하는경우와아닌경우의출력결과
constsayHello = (name) =>console.log(`${name}님, 안녕하세요!`);
 // 인수가정상적으로전달된경우
sayHello('홍길동');
 // 인수가전달되지않은경우//인자값이전달되지않은경우값이존재하지않기때문에undefined로출력
sayHello(); 


// 인수의디폴트값으로출력된경우
constsayHello = (name="게스트") =>console.log(`${name}님, 안녕하세요!`);
 // 인수가전달되지않은경우//인수값이전달되지않은경우디폴트값“게스트”를출력함
sayHello();

 

 

•객체분할 대입의 디폴트값

•인수와 마찬가지로 변수명뒤에=로값을 설정하면 속성이 존재하지 않은 경우에 설정할 초기값을 지정할 수 있음.

//존재하지 않는 속성을 출력
 const myProfile = {  
  age: 24,
 }
 const { name } = myProfile;
 const message = `${name}님, 안녕하세요!`;
 console.log(message); 
 
 
 
 //분할대입시의디폴트값을설정
 const myProfile = {  
  age: 24,
 }
 const { name=“게스트” } = myProfile;
 const message = `${name}님, 안녕하세요!`;
 console.log(message);

 

스프레드구문...

. . . 과 같이 점 세 개를 연결해 배열에 내부요소를순차적으로전개할수 있는표기법

 

• 1) 요소 전개

 • 스프레드구문

const arr1 = [1, 2];
 console.log(arr1); //[1,2]
 console.log(...arr1);//1 2

 

• 일반적인함수와스프레드구문

const arr1 = [1, 2];
 const summaryFunc = (num1, num2) => console.log(num1 + num2);
 // 일반적으로 배열값을 전달하는 경우
summaryFunc( arr1[0], arr1[1] ); 
// 스프레드 구문을 이용하는 방법
summaryFunc( ...arr1 );

 

 

• 2) 요소모으기

constarr2 = [1, 2, 3, 4, 5];
 const[num1, num2, ...arr3] = arr2;
 console.log(num1); // 1
 console.log(num2); // 2
 console.log(arr3); // [3, 4, 5]

 

 

• 3) 요소복사와결합

// 두개의배열결합
const arr4 = [10, 20];
 const arr5 = [30, 40];
 // 스프레드구문을이용해복사
const arr6 = [...arr4];
 // 스프레드구문을이용해결합
const arr7 = [...arr4, ...arr5];
 console.log(arr4);  
console.log(arr6);  
console.log(arr7);  

//두개의객체결합
const arr4 = {val1: 10, val2: 20};
 const arr5 = {val3: 30, val4: 40};
 // 스프레드구문을이용해복사
const arr6 = {...arr4};
 // 스프레드구문을이용해결합
const arr7 = {...arr4, ...arr5};
 console.log(arr4); 
console.log(arr6);   
console.log(arr7);

 

*등호(=) 복사하면 복사본 데이터의 변경시 원본 데이터도 변경되는 예상치 못한 동작 발생

 

스프레드를 사용하여 완전히 새로운 데이터를 생성해 복사해야만 한다

const arr8 = [...arr4]; // 스프레드구문을이용해복사

 

 

 

 

map, filter

*배열 처리에서 기존 for문을 대체하여 효율적으로 코드 작성이 가능한 문법

 

 

map함수

기존 for문
const nameArr = ["홍길동", "이순신", "유관순"];
 for(let index=0; index < nameArr.length; index++) {
 console.log(nameArr[index]);
 }
 
 //map함수
 const nameArr = ["홍길동", "이순신", "유관순"];
 nameArr.map((name) => console.log(name));

 

 

map 함수의 인수를이용해 요소 순서대로추출

const nameArr = ["홍길동", "이순신", "유관순"];
 nameArr.map((name, index) => 
console.log(`${index}번째 ${nameArr[index]} 입니다.`));

 

filter함수

*map함수와 동일하며 return 뒤에 조건식을 추가하여 일치하는 것만 반환

const numArr = [1, 2, 3, 4, 5];
 // 홀수(2로나눈나머지가1)인경우만추출
const newNumArr = numArr.filter((num) => {
  return num % 2 === 1;
 });
 console.log(newNumArr); //[1, 3, 5]

 

 

삼항연산자

*if ~ else ~ 구문을 단축시켜줄 수 있는 연산자

조건? 조건이true일때의처리: 조건이false일때의처리

 

//E ?와 :을 이용한예시 
const val1 = 1 > 0 ? "true입니다" : "false입니다.";
 console.log(val1);  
// true입니다.


// 함수 return 부분에 삼항 연산자 이용
const checkSumOver100 = (num1, num2) => {
 return num1+num2 > 100 ? "초과" : "허용 범위"; 
}
 console.log(checkSumOver100(50, 40));
 console.log(checkSumOver100(50, 70));

 

 

 

DOM(Document Object Model)

DOM은HTML 문서의객체기반표현방식으로프로그램에서접근및사용.

•문서객체: HTML 태그를자바스크립트에서사용할수있는객체로만든것

 

 

 

getElementById( ) 메서드를 사용해 문서 객체 1개 선택하기

<html>
 <head>
 <script> 
// 페이지가 완전히 로드된 후 실행될 함수를 지정합니다.
window.onload = function () { 
    // 'header'라는 ID를 가진 HTML 요소를 선택합니다.
    let header = document.getElementById('header'); 
    
    // 선택한 요소의 글자 색상을 주황색으로 변경합니다.
    header.style.color = 'orange'; 
    
    // 선택한 요소의 배경 색상을 빨간색으로 변경합니다.
    header.style.background = 'red'; 
    
    // 선택한 요소의 내용을 'From JavaScript'로 변경합니다.
    header.innerHTML = 'From JavaScript'; 
}; 
</script>
 </head>
 <body> 
    <!-- ID가 'header'인 h1 요소 -->
    <h1 id="header">Header</h1>
 </body>
 </html>

* querySelector( ) 메서드를 사용해 문서 객체 1개 선택하기

* querySelectorAll( ) 메서드를 사용해 문서 객체 여러개 선택하기

 

<script> 
  // 이벤트를연결합니다. 
  window.onload = function () { 
  
    // 변수를선언합니다. 
    let output = ''; 
    for (let i = 0; i < 10; i++) { 
output += '<h1>Header -' + i + '</h1>'; 
} 
    // 문서객체내부의글자를변경합니다. 
document.body.textContent = output; ➊
    // innerHTML 속성을사용합니다. 
// document.body.innerHTML = output; ➋
  }; 
</script>

// +, - 버튼을 클릭할 때마다숫자를증가/감소시켜주는카운터프로그램

<!DOCTYPE html>
<html>
   
 
<body>
    <button id="increase">+</button>

 <span id="count">0</span>
 <button id="decrease">-</button>
 
 </body>

<script>
 let count = 0;
 document.getElementById("increase").addEventListener("click", () => {
 count++;
 document.getElementById("count").innerText = count;
 });
 document.getElementById("decrease").addEventListener("click", () => {
 count--;
 document.getElementById("count").innerText = count;
 });
 </script>
   
     <img id="image">
    </body>
    </html>