[포스코x코딩온] 웹 개발 풀스택 | javascript(2) function, 조건문, 반복문

Asong Ma·2023년 7월 12일

[포스코x코딩온]

목록 보기

4/37

비가 매우 쏟아지는 날이었다! 이런날은 나가기가 싫지만 근처 중국집에 가서 저녁을 먹었다. '샨샨'의 어향가지덮밥! 밥이 완전 고슬고슬하고 후추 향이 살아있는 볶음밥이었다. 가지 양념(?)도 간이 적절... 전혀 기름지지 않고 진짜 맛있어서 순삭해버렸다.
도시락을 가지고 다니는게 목표였지만 먹을 곳이 없어서 하루 한끼는 사먹기로 했다. 겸사겸사 맛집 벨로그도 함께..ㅎㅎ 그런 의미로 첫 리뷰!

중식#샨샨 .어향가지덮밥🍛 { score : 🌝🌝🌝🌝🌚;}

Review

@keyframes를 사용해서 애니메이션을 정의하고 animation 속성으로 이름 지속시간 타이밍 딜레이 등 값을 줘서 사용할 수 있다.
JS첫 시간에는 기초 문법과 연산자를 배웠다.

Preview

함수를 정의하고 사용하는 법을 배웠다. 매개변수와 리턴값의 여부를 잘 파악해야한다. 그리고 많은 동작을 줄여줄수 있는 조건문과 반복문을 배운다.

1.함수

특정 기능을 수행하는 함수를 사용하고 싶다면, '만들고' '호출'해야 실행이 된다. 함수를 정의하는 방식은 함수 선언문과 함수표현식 두가지가 있다.

💡호이스팅(hoisting) : 선언된것들을 모아서 위로 빼놓는 기능이 호이스팅이다. 변수와 함수가 뒷줄에 선언되더라도 앞줄에서 호출해서 할당 가능하다. 변수는 var, 함수는 함수선언문의 경우 호이스팅 가능!

① 함수 선언문

'안녕'이라는 문구를 콘솔창에 띄우고 싶을때 사용하는 함수를 만들어 보자.

function sayHello() {
  console.log('안녕'); }
//여기까지 한다면 함수가 만들어지기만 할뿐 아무런 동작이 없다. 
sayHello() //<-이것이 함수를 호출 한것.

함수 선언문은 호이스팅이 가능하다. 따라서 아래와 같이 써도 사용할 수 있다.

sayHello() //함수선언문은 호이스팅되어서 실행가능 

function sayHello() {
  console.log('안녕'); }

② 함수 표현식

같은 함수를 함수 표현식으로 만들어보자. 함수 표현식은 함수를 변수에 담아서 표현한다.

let sayHello = function(){
  console.log('안녕') }

여기서 사용된 function()을 익명함수 라고한다. 함수표현식은 호이스팅이 불가능하므로 선언 전에 사용할 수 없다.

③ 화살표 함수

let sayHello = () => {
  console.log('안녕') }

sayHello() //함수 호출

처음에 화살표 함수가 헷갈렸는데, 함수 표현식에서 function()대신 간략하게 ()=>로 쓴다고 생각하면 쉽다.

④ 매개변수, 반환값

함수는 기능에 따라서 매개변수와 반환값이 있을수도 없을수도 있다.

매개변수: 함수 외부에서 사용한 변수, 값 등을 함수 내부로 전달하고 싶을 때 사용 ()에 들어오는 애들
반환값: 함수 내부에서 생성된 변수, 값 등을 함수 외부로 전달하고 싶을 때 사용. return이 있다면 반환값 있음

// 1. 매개변수x, 반환값x (함수 선언문 사용)
function sayHello() {console.log('안녕?')}

// 2. 매개변수x, 반환값o (함수 표현식 사용)
let notice = function() { 
  return '안내사항: 규정1은 어쩌고, 규정2는 어쩌고'} 
//함수를 사용해서 받은 return값을 어딘가에 저장해야 유효해짐

// 3. 매개변수o, 반환값x (화살표 함수 사용)
let id1='딸기';
let id2='우유';
let mix ( id1, id2 ) => {
  console.log( id1 + id2) }

// 4. 매개변수o, 반환값o (화살표 함수 사용)
let add = (num1, num2) => {
  return num1 + num2; }

onclick 속성

onclick 속성에 속성값으로 함수를 저장하면 해당 요소를 클릭할때 함수를 연결한다. 함수와 연결해서 사용하기 좋은 속성! div태그에 걸어도 되지만 button태그와 함께 쓰면 좋다.

💡추가로 style속성에 cursor:pointer를 사용하면 요소에 마우스를 올렸을때 커서 모양이 바뀐다.
~~요소의 속성값을 줄때는 속성="속성값" 문법 기억하기...ㅎ 왜 안되지? 하고 계속 고민했다..~~

2.조건문

조건문은 조건에 따라 다른 코드를 실행시키는 문법이다. 참거짓에 따라 실행하는 if문과 값에따라 실행하는 switch문이 있다.

① if

if문은 논리적 참/거짓에 따라서 실행할 코드를 결정한다.
따라서 if문의 조건문에는 반드시 boolean값이 와야한다!

if ( 조건1 ) {
조건1이 참일경우 실행. 거짓이면 다음 조건으로 넘어감
} else if ( 조건2 ) {
조건2가 참일경우 실행
} esle {
조건1,2가 모두 해당되지 않을경우 실행
}

if/else로 써도되고 중간에 else if를 사용하면 조건을 계속 추가할 수 있다. if문 속에 if문을 또 넣어서 중첩해서 사용할 수 있다.

//시간을 입력하면 오전/오후/밤을 알려주는 코드)
let time = Number(prompt('지금은 몇시인가요?'));
if( time < 12 ) {
  console.log('오전입니다');
} else if( time <18 ) {
  console.log('오후입니다');
} else if( time <= 24 ) {
  console.log('밤입니다');
} else { 
  console.log('다시 입력하세요');
}

② switch

switch는 간단한 조건문이다. 다양한 상황(case)에 따라 실행할 코드를 결정할 때 사용하고, if문과는 달리 조건문에 문자열이나 숫자값이 온다.

switch (num) {
	case 값1:
    	변수==값1일때 실행
        break;
    case 값2:
    	변수==값2일때 실행
        break; 
    default:
    	일치하는 값이 없을때 실행
        break;
}

조건이 일치하여 break를 읽게되면 그 이후는 비교하지 않고 switch문을 종료한다. 만약 case 값1의 블럭에 break가 없다면 case 값2까지 읽고 수행하게 될 것이다.
default문은 일치하는 값이 없을때 default로 줄 값을 설정하는 것이고 필수는 아니다. 제일 마지막에 있으므로 break를 생략할 수 잇다.

③ 3항 연산자

3항 연산자는 if문을 간단하게 표현하는 방법이다.
한줄로 간단하게 표현하는 것이라 복잡한 조건은 설정할 수 없다.

조건식 ? 참인 경우 : 거짓인 경우;

①번에서 if문과 예시를 3항 연산자로 만들어보자.(12시 이전=오전, 이후=오후)

let now = new.Date().getHours(); //현재 시간을 now에 저장
now >= 12 ? console.log('오후입니다') : console.log('오전입니다');

3.반복문

반복문은 동일한 코드를 여러번 사용해야할 때 사용한다. for문과 while문이 있다.

① for

for(let i = 0; i < 10; i++){//i=0부터 시작하고 i<10이면 ->코드실행 후 i+1. 
  console.log(i+1,'번 반복');
}

위 코드를 실행하면 아래와 같은 결과를 얻을 수 있다.for문의 ( )안에 들어가는 i는 인덱스로 반복문 안에서만 유효하다.

② while

while문은 ()속 조건이 참이면 실행하는 반복문이다. 조건문 속에 기본적으로 조건을 변경하는 구문( for문의 i++같은 )이 없기 때문에 명령문 속에 조건을 변경해주는 내용이 들어가야한다. 무한반복 될 수 있으므로 주의!!!

while(조건문){
	실행할 코드;
}

if문의 예시와 같은 코드를 while문으로 만들어보자.

let i=0;
while( i < 10 ){
	console.log(i+1,'번 반복');
    i++;
}

같은 내용을 조건문을 사용하지 않고 if문과 break를 사용해서도 만들 수 있다.

let i= 0;
while(true){
  console.log(i+1,'번 반복');
  i++;
  if( i == 10){
    break;
  }
}

+ break & continue

break는 사용 즉시 반복문을 끝낸다.
continue는 참이면 반복문을 한번만 멈추고 다음으로 진행한다

//바나나 빼고 출력하는 코드
let fruits = ['딸기','바나나','수박'];
for(let i = 0 ; i < fruits.length ; i++ ){
  if(fruits[i] == '바나나' ){
    continue;
  }
  console.log(fruits[i])
}

+ do while

do while은 한번 실행한 뒤에 조건을 확인하여 반복한다.

let i=0;
do{
  console.log(i)
  i++}
while(i<10);

<실습문제1>

prompt를 사용해서 입력받은 숫자까지

13의 배수이면서 홀수인 숫자를 찾는 프로그램 만들기

<실습문제2>

for문으로 구구단 만들기

③ 배열, for

배열에서는 for문을 사용하는게 더 편하다. 배열의 값 모두를 더하거나, 모든 값을 반환하고싶을 때 사용할 수 있다.

let fruits = ['바나나', '딸기', '포도'];
for( let i = 0 ; i < fruits.length ; i ++){
  console.log(fruits[i]);
}

let numbers = [ 1, 2, 3, 4, 5 ];
let sum = 0;
for( let i = 0; i < numbers.length ; i ++ ){
  sum = sum + numbers[i]
}
console.log(sum)

④ for of

for (변수 선언 of 배열) { }
:배열이 끝날 때 까지 배열의 값을 하나씩 변수에 대입하는 것을 반복
let fruits = ['바나나', '사과' , '딸기'];
for(let fruit of fruits){
  console.log(fruit)
}

⑤ .forEach

forEach는 함수의 매개변수로 함수를 받는 메소드이다

array.forEach(function(value, index, arr));

funtion(value, index, arr): array배열의 각 항목에 대해 실행할 함수
let fruits = ['바나나', '사과' , '딸기'];
fruits.forEach((data, index, arr)=>{
  console.log('data:', data);
  console.log('index:', index);
  console.log('arr:', arr);
})