JavaScript 함수는 특정 작업을 수행하도록 설계된 코드 블럭으로 함수를 호출할때 실행됩니다.

function fn(param1, param2){
 return param1 + param2;
 }


JS 함수 구문
함수는 function 이라는 키워드, 이름, 괄호()로 정의됩니다.

함수 이름에는 문자, 숫자, 밑줄, $(달러) 기호가 포함될 수 있습니다.(변수와 동일한 규칙)

괄호 안에는 쉼표(,)로 구분된 매개변수를 포함할 수 있습니다.

함수에 의해 실행될 코드는 중괄호 {} 안에 배치됩니다.

함수 인수는 함수를 호출할때 받는 값 입니다.

함수 내부에서 인수(매개변수)는 지역 변수처럼 동작합니다.

함수 내부에서 선언된 변수는 LOCAL 변수가 됩니다.
지역 변수는 함수 내부에서만 접근할 수 있습니다.


'JavaScript' 카테고리의 다른 글

javascript - 배열 검색 search array  (2) 2024.10.17
JavaScript Array.prototype.at()  (0) 2024.10.16
Javascript Variables  (0) 2024.10.07
JavaScript document.getElementById  (0) 2024.10.01
javascript 성능 개선  (0) 2024.09.04

  • indexOf()

배열에서 값을 검색하여 해당 위치 반환

const arr = ["apple","orange","apple","mango"];
let position = arr.indexOf("apple")+1;

  • lastIndexOf()

Array.lastIndexOf()는 indexOf와 비슷하지만 요소의 마지막 위치 반환

const arr = ["apple","banana","apple","mango"];
let position = arr.lastIndexOf("apple") + 1;

  • includes()

배열에 요소가 있는지 확인 할 수 있다
ES6에서 도입
배열에 요소가 있는지 확인 할 수있다
indexOf와 달리 NaN 포함

const arr = ["banana","apple","orange","mango"];
arr.includes("mange"); // is true
  • find()

테스트 함수를 통과한 첫번째 요소 값 반환

const arr = [4,9,16,25,29];
let temp = arr.find(myFunc);

function myFunc(value, index, array){
 return value >18;
}


  • findIndex()

테스트 함수를 통과한 첫번째 요소의 인덱스 반환

const arr = [4,8,16,28,29];
let test = arr.findIndex(myFunc);

function myFunc(value, index, arr){
return value > 18;
}


  • findLast()

배열의 끝에서 시작하여 조건을 만족하는 첫번째 값 반환

const arr = [27,28,30,40,42,35,30];
let position = arr.findLast(x=> x>40);

  • findLastIndex()

조건을 만족하는 마지막 요소의 인덱스를 반환

const arr = [27,28,30,40,42,35,30];
let position = arr.findLastIndex(x => x>40);

'JavaScript' 카테고리의 다른 글

javascript - function 자바스크립트 함수  (2) 2024.11.13
JavaScript Array.prototype.at()  (0) 2024.10.16
Javascript Variables  (0) 2024.10.07
JavaScript document.getElementById  (0) 2024.10.01
javascript 성능 개선  (0) 2024.09.04

Array객체의 at() 메서드는
정수값을 받아 해당 인덱스에 있는 항목을 반환
음수와 양수 모두 받을수 있으며
음수는 배열의 역순으로 계산

const arr = [5,12,8,130,44];
let index = 2;
console.log(arr.at(index));
=8

index = -2;
console.log(arr.at(index))
=130

'JavaScript' 카테고리의 다른 글

javascript - function 자바스크립트 함수  (2) 2024.11.13
javascript - 배열 검색 search array  (2) 2024.10.17
Javascript Variables  (0) 2024.10.07
JavaScript document.getElementById  (0) 2024.10.01
javascript 성능 개선  (0) 2024.09.04

Variables 

JavaScript Variables can be Declared in 4 ways

-automatically

-using var

-using let

-using const

 

var keyowrd was used in all JavaScript code from 1995 to 2015

var는 1995년부터 2015년까지 사용

let and const keywords were added to JavaSccript in 2015

2015년에 let과 const가 추가

var keyword should only be used in code written for older browsers

var는 이전 브라우저용으로 작성된 코드에서만 사용

let x = 5;
let y = 6;
let z = x + y;

 

When to Use var, let, const

1. Always declare variables

변수를 선언 할때

2. use const if the value should not changed

값이 변경 되어서는 안될 경우

3. use const if the type should not be changed

유형을 변경하지 않을 경우

4. use let if you can't use const

const를 사용 할 수 없는 경우

5. use var if you must support old browsers.

이전 브라우저를 지원해야 하는경우

'JavaScript' 카테고리의 다른 글

javascript - 배열 검색 search array  (2) 2024.10.17
JavaScript Array.prototype.at()  (0) 2024.10.16
JavaScript document.getElementById  (0) 2024.10.01
javascript 성능 개선  (0) 2024.09.04
[Javascript]마우스 좌표 가져오기  (0) 2019.06.30

JavaScript 명령문은 다음과 같이 구성된다

값, 연산자, 표현식, 키워드 또는 주석

 

아래 예제는 브라우저에게 id = "demo" HTML 요소 내부에 "Hellow World"라고 쓰도록 지시한다.

 

<!DOCTYPE html>
<html>
<body>
    <p>JavaScript statements are separated by semicolons.</p>
    <p id="demo1"></p>
<script>
    let a, b, c;
    a = 5;
    b = 6;
    c = a + b;
    document.getElementById("demo1").innerHTML = c;
</script>

</body>
</html>

대부분의 JavaScript 프로그램에는 많은 JavaScript 문장이 포합되어 있다.

 

; 세미콜론

세미콜론은 JavaScript 문장을 구분한다.

각 실행문의 끝에 세미콜론을 추가한다.

 

아래와 같이 세미콜론으로 구분하면 한줄에 여러 문장을 입력 할 수 있다.

let a, b, c;
a=5;b=6;c=a+b;

 

'JavaScript' 카테고리의 다른 글

javascript - 배열 검색 search array  (2) 2024.10.17
JavaScript Array.prototype.at()  (0) 2024.10.16
Javascript Variables  (0) 2024.10.07
javascript 성능 개선  (0) 2024.09.04
[Javascript]마우스 좌표 가져오기  (0) 2019.06.30

1. 루프
bad case :
for( let i = 0; i < arr.length;, i++){
better :
let l = arr.length;
for(let i =0; i<l;i++){
루프가 반복될 때마다 배열의 length 속성에 접근하여 실행 속도가 느려진다고 한다.

2.Dom 접근
HTML DOM에 접근 하는것은 script 문법에 비해 매우 느리다고 한다.
Dom에 접근해야 할 경우 최소한으로 접근하여 로컬변수로 저장하여 사용
ex) const obj = document.getElementById("target");
obj.innerHTML = "hellow world!";

3. DOM 크기 줄이기
HTML DOM의 요소 수가 적을 수록 성능에 유리
DOM을 검색하는 모든시도(getElementsByTagName)는 더작은 DOM에서 유리

4. 불필요한 변수 제거
값을 저장 해야 하는게 아니라면 변수를 사용하지 않는다
badcase :
let fullName = firstName + " " + lastName; document.getElementById("target").innerHTML = fullName
better :
document.getElementById("target").innerHTML = firstName + " " + lastName;

출처:w3schools.com/js/js_performance.asp

2,4 번의 경우는
평소 디버깅 편의성 때문에
코딩에서 자주 나오는 습관인데
주의해야 겠습니다.

'JavaScript' 카테고리의 다른 글

javascript - 배열 검색 search array  (2) 2024.10.17
JavaScript Array.prototype.at()  (0) 2024.10.16
Javascript Variables  (0) 2024.10.07
JavaScript document.getElementById  (0) 2024.10.01
[Javascript]마우스 좌표 가져오기  (0) 2019.06.30 
    function fn_location(e){
        var x = event.pageX;
        var y = event.pageY; 
        console.log(x,y);
        }

마우스 버튼의 x,y 값을 가져오는 함수입니다.

'JavaScript' 카테고리의 다른 글

javascript - 배열 검색 search array  (2) 2024.10.17
JavaScript Array.prototype.at()  (0) 2024.10.16
Javascript Variables  (0) 2024.10.07
JavaScript document.getElementById  (0) 2024.10.01
javascript 성능 개선  (0) 2024.09.04

+ Recent posts

티스토리툴바