"JavaScript related"에 해당되는 글 - 35건

◀ 이전 1 2 3 4 다음 ▶

Post

JavaScript Return

[ JavaScript related ] 2023. 1. 21. 15:58

반환문(Return)의 활용

반환문이란, return 제어문을 사용해서 함수의 연산 결과중 원하는 값을 지정해서 호출 위치로 복구 시키는 기능이다. document.write(), alert()와 같이 구체적인 행동 명령이 있는 함수의 경우, 종료되면 호출 위치로 자동 복귀하기 때문에 return 제어문이 필요하지 않다. 하지만 단순 연산을 한 상태로 아무런 행동 명령어가 없는 함수의 경우 어떤 값을 호출 위치로 이동시켜야 하는지 지정되있지 않기 때문에 반드시 return 제어문이 필요하다.

 

 

 

(1) 값을 반환시킬 때#1

JavaScript

function multiply(a, b = 1) {
  a * b;
}

console.log(multiply(5, 2));    // undefined
console.log(multiply(5));       // undefined

JavaScript에서 함수의 매개변수는 undefined가 기본이다. 따라서 값이 명시되지 않으면 기본값인 undefined를 반환한다.

 

JavaScript

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2));    // 10
console.log(multiply(5));       // 5

함수에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단되고, 값을 제공한 경우는 함수를 호출한 곳에 그 값을 반환한다.

 

 

 

(2) 값을 반환시킬 때#2

JavaScript

function addNumber(num1, num2) {
  let num3 = num1 + num2;
}
let num3 = 0;
addNumber(3, 5);

console.log(num3);
// 출력: 0

함수의 매개변수는 함수 내부에서만 작동하고 함수 외부로 나가면 사라지는 지역변수이기 때문에, 위 코드의 함수 내부에서 선언된 num3과 외부에서의 num3은 실질적으로 아무 상관이 없는 사이에 해당한다. 

 

JavaScript

function addNumber(num1, num2) {
  return (num3 = num1 + num2);
}
let num3 = 0;
addNumber(3, 5);

console.log(num3);
// 출력: 8

그러나 return을 활용해 addNumber 함수의 값을 반환시키면, 실질적으로 let num3=0 이후 num3 = 8로 재할당된 형태를 취하게 되므로 8이 출력되게 된다.

 

 

 

(3) 데이터를 반환하고 함수를 강제종료

JavaScript

function code() {
  let js_code = 1;
  return js_code;
  js_code_2 = 2;  // return이 이미 실행되어 이 코드는 실행되지 않는다.
}

 

 

 

(4) 재귀함수 호출(함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것)

JavaScript

let num = 0;
function fun() {
  num++;
  console.log(num, "<br>");
  if (num == 10) return;
  fun();
}
fun();

 

 

 

 

 

 

 

Return과 Break의 차이

return은 함수 자체를 중단시키는데 비해 break 명령문이 실행되면 블록 문장에서 빠져나와 다음 작업을 시작한다.

return 함수 탈출. 해당 함수(메서드) 자체에서 빠져나간다.
break 루프 탈출. for, switch, while문 등 함수 내의 반복문에서 빠져나간다.
function testBreak(num) {
  let i = 0;
  while (i < 6) {
    if (i === 3) {
      break;  //break 사용
    }
    i++;
  }
  return i * num;
}

function testReturn(num) {
  let i = 0;
  while (i < 6) {
    if (i === 3) {
      return;  //return 사용
    }
    i++;
  }
  return i * num;
}

testBreak(2);  //6
testReturn(2);  //undefined

 

'JavaScript related' 카테고리의 다른 글

JavaScript Style Control  (0) 2023.01.21
JavaScript Number vs parseInt  (0) 2023.01.21
JavaScript querySelector & querySelectorAll  (0) 2023.01.21
JavaScript Function Basic  (0) 2023.01.21
JavaScript Examples Mouse Hover Menu  (0) 2023.01.19

Post

JavaScript querySelector & querySelectorAll

[ JavaScript related ] 2023. 1. 21. 15:58

 

querySelector

HTML

    <div class="test">
      <p class="testtext">테스트01</p>
      <p class="testtext">테스트02</p>
      <p class="testtext">테스트03</p>
      <p class="testtext">테스트04</p>
      <button class="btn">텍스트 변환</button>
    </div>

 

JavaScript

const testtext = document.querySelector(".testtext");
const btn = document.querySelector(".btn");
btn.addEventListener("click", function () {
  testtext.textContent = "자바스크립트로 텍스트 변경함";
});

 

ON BROWSER

텍스트 변환 버튼을 누르면 p태그 중 최상단의 「테스트01」만 변경됨

 

 

 

 

 

querySelectorAll

JavaScript

const testtext = document.querySelectorAll(".testtext");
const btn = document.querySelector(".btn");
btn.addEventListener("click", function () {
  testtext[0].textContent = "자바스크립트로 텍스트 변경함";
  testtext[1].textContent = "자바스크립트로 텍스트 변경함";
  testtext[2].textContent = "자바스크립트로 텍스트 변경함";
  testtext[3].textContent = "자바스크립트로 텍스트 변경함";
});

 

ON BROWSER

querySelectorAll은  Nodelist에서 가져오기 때문에 배열화되며, 이를 통해 선택된 것에게는 Addeventlisenter를 걸 수 없다. 왜? Addeventlisenter는 엘리먼트에만 걸 수 있으므로. 그래서 굳이 하자면 배열의 요소를 일일이 선택해야만 적용된다

 

 

 

 

 

querySelectorAll & Loop Statement

JavaScript

const testtext = document.querySelectorAll(".testtext");
const btn = document.querySelector(".btn");
for (let i = 0; i < testtext.length; i++) {
  btn.addEventListener("click", function () {
    testtext[i].textContent = "자바스크립트로 텍스트 변경함";
  });
}

 

ON BROWSER

for 반복문과 length를 이용한 리팩토링

 

'JavaScript related' 카테고리의 다른 글

JavaScript Number vs parseInt  (0) 2023.01.21
JavaScript Return  (0) 2023.01.21
JavaScript Function Basic  (0) 2023.01.21
JavaScript Examples Mouse Hover Menu  (0) 2023.01.19
JavaScript Basic Control  (0) 2023.01.19

Post

JavaScript Function Basic

[ JavaScript related ] 2023. 1. 21. 15:56

①함수를 호출하면 콘솔에 텍스트를 출력하는 text 함수를 만든다.

JavaScript

function text() {
  console.log("콘솔에 텍스트 출력");
}

 

②이 함수를 호출하기 위해 text를 입력하면?

function text() {
  console.log("콘솔에 텍스트 출력");
}
text;

콘솔은 아무 값도 출력하지 않는다.

 

③왜 아무 값도 출력하지 않는지 살펴보면?

function text() {
  console.log("콘솔에 텍스트 출력");
}
console.log(text);    // [Function: text]

콘솔은 [Function: text]를 출력한다. JavaScript에서는 함수가 객체로 취급되기에, text만 달랑 있으면 객체로 취급된다는 것!

 

④그렇다면 괄호()를 써보면?

function text() {
  console.log("콘솔에 텍스트 출력");
}
text();   // 콘솔에 텍스트 출력

콘솔에 텍스트가 정상적으로 출력된다. 즉, ()까지 써줘야 함수가 정상적으로 호출된다.

 

⑤text()는 대체 뭐하는 얘?

function text() {
  console.log("콘솔에 텍스트 출력");
}
console.log(text());    // 콘솔에 텍스트 출력
                                      // undefined

이 경우, 먼저 text()가 작동해 콘솔에 텍스트 출력이 표시되고 text()의 정체가 undefined라는 것을 알려준다. JavaScript에서 함수의 매개변수는 undefined가 기본이다. 따라서 값이 명시되지 않으면 기본값인 undefined를 반환한다.

 

⑥그럼 return을 사용해 값을 지정해주면?

function text() {
  console.log("콘솔에 텍스트 출력");
  return "빵꾸똥꾸";
}
console.log(text());  // 콘솔에 텍스트 출력
                                    // 빵꾸똥꾸

return으로 값을 반환시켰기에 기본값이 undefined 대신 "빵꾸똥꾸"가 콘솔에 출력되었다.

'JavaScript related' 카테고리의 다른 글

JavaScript Number vs parseInt  (0) 2023.01.21
JavaScript Return  (0) 2023.01.21
JavaScript querySelector & querySelectorAll  (0) 2023.01.21
JavaScript Examples Mouse Hover Menu  (0) 2023.01.19
JavaScript Basic Control  (0) 2023.01.19

Post

JavaScript Examples Mouse Hover Menu

[ JavaScript related ] 2023. 1. 19. 18:03

HTML

    <ul class="gnb">
      <li>
        <a href="">가축</a>
        <ul class="subgnb">
          <li><a href="">오리</a></li>
          <li><a href="">닭</a></li>
          <li><a href="">돼지</a></li>
        </ul>
      </li>
      <li>
        <a href="">마바사</a>
        <ul class="subgnb">
          <li><a href="">오리</a></li>
          <li><a href="">닭</a></li>
          <li><a href="">돼지</a></li>
        </ul>
      </li>
      <li>
        <a href="">아자차</a>
        <ul class="subgnb">
          <li><a href="">오리</a></li>
          <li><a href="">닭</a></li>
          <li><a href="">돼지</a></li>
        </ul>
      </li>
    </ul>

 

 

SCSS

.gnb {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  > li > a {
    height: 20px;
    display: flex;
    padding: 20px;
    border: 1px solid black;
    background-color: blue;
    color: white;
  }
  .subgnb {
    height: 0;
    overflow: hidden;
    > li > a {
      display: block;
      border: 1px solid black;
      padding: 20px;
    }
  }
  &.on {
    li > .subgnb {
      height: 100%;
    }
  }
}

 

 

JavaScript

const gnb = document.querySelector(".gnb");
const menu = document.querySelectorAll(".gnb > li");

for (let i = 0; i < menu.length; i++) {
  menu[i].addEventListener("mouseenter", function () {
    gnb.classList.add("on");
  });
  menu[i].addEventListener("mouseleave", function () {
    gnb.classList.remove("on");
  });
}

 

 

ON BROWSER

 

'JavaScript related' 카테고리의 다른 글

JavaScript Number vs parseInt  (0) 2023.01.21
JavaScript Return  (0) 2023.01.21
JavaScript querySelector & querySelectorAll  (0) 2023.01.21
JavaScript Function Basic  (0) 2023.01.21
JavaScript Basic Control  (0) 2023.01.19

Post

JavaScript Basic Control

[ JavaScript related ] 2023. 1. 19. 18:02

소제목

(1) 마우스 스크롤 시, console로고에 문자 출력

this.window.addEventListener("scroll", function () {
  console.log(
    "나는 드디어 사용자가 일으키는 scroll 이벤트를 감지할 수 있게 되었습니다."
  );
});

 


(2) 마우스 클릭 시, 경고창 띄우기

window.addEventListener("click", function () {
  alert("클릭했지?");
});

 


(3) 마우스 스크롤 시, header클래스에 on을 붙여서 header on클래스로 일시적으로 만들어버리는 방법

const header = document.querySelector(".header"); //←header를 선언
window.addEventListener("scroll", function (e) {
  //←함수 선언
  if (window.scrollY > 0) {
    //←만약 스크롤이 발생하면
    header.classList.add("on"); //←header의 클래스 리스트에 "on"을 추가
  } else {
    header.classList.remove("on"); //←header의 클래스 리스트에 "on"을 제거
  }
});



(4) 마우스 스크롤 시, btn-top클래스에 on을 붙여서 btn-top on클래스로 일시적으로 만들어 버리고, btn-top 개체를 마우스로 클릭하였을 때 화면 가장 위쪽으로 이동시키는 방법

const btnTop = document.querySelector(".btn-top");  //←btnTop을 선언(!)
btnTop.addEventListener("click", function(){        //←btnTop에  클릭 발생시 함수 작동
  window.scrollTo({top:0, behavior: "smooth"});     //←윈도우를 top:0위치로 "smooth"하게 이동.
});
window.addEventListener("scroll",function(e){       //←함수 선언
  if(window.scrollY > 0){                           //←만약 스크롤이 발생하면
    btnTop.classList.add("on");                     //←btnTop의 클래스 리스트에 "on"을 추가
  } else{
  btnTop.classList.remove("on");                    //←btnTop의 클래스 리스트에 "on"을 제거
  }})



(5) 상기한 두 방법을 동시에 한번에 쓰기

const header = document.querySelector(".header");
const btnTop = document.querySelector(".btn-top");

btnTop.addEventListener("click", function () {
  window.scrollTo({ top: 0, behavior: "smooth" });
});

window.addEventListener("scroll", function (e) {
  if (window.scrollY > 0) {
    header.classList.add("on");
    btnTop.classList.add("on");
  } else {
    header.classList.remove("on");
    btnTop.classList.remove("on");
  }
});

 

'JavaScript related' 카테고리의 다른 글

JavaScript Number vs parseInt  (0) 2023.01.21
JavaScript Return  (0) 2023.01.21
JavaScript querySelector & querySelectorAll  (0) 2023.01.21
JavaScript Function Basic  (0) 2023.01.21
JavaScript Examples Mouse Hover Menu  (0) 2023.01.19
▲ top
▲ top

티스토리툴바