JavaScript
-
[자바스크립트 고급 문법] Rest ParameterJavaScript 2023. 4. 14. 15:54
일반적인 함수 선언식에서는 아래의 예제와 같이 함수에 파라미터를 몇 개 사용할지 선언합니다. 파라미터를 2개 정의하면 함수를 호출할 때 2개의 값을 전달할 수 있게 되고, 4개를 정의하면 4개의 값을 전달할 수 있게 됩니다. 만약 계산기의 더하기 함수를 만든다고 하면 사용자가 몇 개의 수를 더할지 2개 혹은 4개로 미리 정해 버리면, 그 범위 내에서만 계산을 할 수 있게 되기 때문에 제대로 된 기능을 하는 함수를 구현할 수 없게 됩니다. function sum(x1, x2) { // 파라미터를 2개만 전달받을 수 있음 let y = x1 + x2; return = y; } sum(5, 7); function sum(x1, x2, x3, x4) { // 파라미터를 4개만 전달받을 수 있음 let y = x..
-
[자바스크립트 고급 문법] Default Function ParameterJavaScript 2023. 4. 14. 13:48
함수를 호출할 때 함수의 파라미터인 message 값을 전달하지 않으면 함수 내에서 message는 undefined가 됩니다. 만약 파라미터가 함수 내에서 특정 기능을 구현하기 위해 반드시 값이 필요한 상태라면, 함수를 호출하는 곳에서 파라미터 값을 전달하지 못해서 에러가 발생하게 됩니다. 이런 상황을 피하고자 함수 내에서는 함수를 호출할 때 파라미터에 값이 전달되었는지를 확인하는 코드를 구현해서 사용해야 합니다. function say(message){ if (message != undefined) { // 파라미터에 값이 전달되었는지 확인 console.log(message); } else { console.log("파라미터가 넘어오지 않았어요."); } } say(); // 파라미터 값을 전달하지..
-
[자바스크립트 고급 문법] ScopeJavaScript 2023. 4. 14. 13:33
# local scope 함수 내에 선언된 변수는 함수 안에서 참조되며, 함수 밖에서는 참조할 수 없습니다. 이런 변수에 대한 접근성을 local scope라고 합니다. fuction myFunction() { let carName = "볼보"; console.log(carName); } myFunction(); // 함수 내에서는 carName이 접근 가능하기 때문에 carName에 할당된 값을 콘솔에 출력합니다. console.log(carName); // 함수 내에서 선언된 carName은 함수 밖에서는 접근할 수 없으므로 에러가 납니다. # global scope 함수 밖에서 선언된 변수는 함수 밖은 물론 함수 안에서도 참조할 수 있습니다. 이런 변수에 대한 접근성을 global scope라고 합..
-
[자바스크립트 고급 문법] this 키워드JavaScript 2023. 4. 13. 13:40
# this 키워드 this 키워드는 사용되는 위치에 따라 this 키워드에 바인드 된 객체가 달라집니다. # this에 window 객체가 바인딩 된 경우 # this에 DOM 요소가 바인딩 된 경우 HTML DOM 요소에서 onclick, onchange 등의 이벤트가 발생할 때 호출하는 함수의 파라미터로 this를 전달하면 이벤트가 발생한 HTML DOM 그 자체가 됩니다. 클릭 클릭2 1 2 3 # this에 Object 객체가 바인딩 된 경우 Object는 키와 값으로 데이터를 저장합니다. Object에서는 키에 대한 값으로 문자열, 숫자, 배열 등의 데이터 타입뿐만 아니라 함수를 정의해서 사용할 수 있습니다. 함수를 정의할 때 함수 내에서 Object 내에 정의된 다른 키에 접근하려면 this..
-
[자바스크립트 내장 객체] SymbolJavaScript 2023. 4. 13. 09:49
다음 예제 코드를 보면 Object에 2개의 키-값이 설정되어 있습니다. let person = { firstName: "Jeremy", lastName: "Go" } firstName과 lastName을 합쳐서 fullName을 가져오는 함수를 오브젝트에 추가하겠습니다. let person = { firstName: "Jeremy", lastName: "Go", getFullName: function() { return this.firstName + " " + this.lastName; } } 다음과 같이 오브젝트에 있는 모든 key는 for-in문을 사용해서 가져올 수 있습니다. 여기서는 firstName, lastName, getFullName 이렇게 3개가 출력됩니다. for (const key ..
-
[자바스크립트 내장 객체] Window 객체JavaScript 2023. 4. 12. 16:37
# Window 객체 window 객체는 전역(Global) 객체입니다. # alert() alert() 함수는 윈도우 화면에 경고 메시지를 출력합니다. alert("이것은 alert 창입니다."); # confirm() confirm() 함수는 진행할지, 종료할지에 대한 진행 여부를 확인하는 함수입니다. if(confirm("정말 삭제하시겠습니까?")) { // 삭제 실행 console.log("삭제 실행"); } # prompt() prompt() 함수는 문자열을 입력받을 수 있는 함수입니다. let txt = prompt("비밀번호를 입력하세요."); if(txt == null) { // 취소 버튼을 클릭했을 때 } else if (txt == "") { // 어떤 값도 입력하지 않고 확인 버튼을 ..
-
[자바스크립트 내장 객체] JSON 객체JavaScript 2023. 4. 12. 16:19
# JSON 객체 JSON(JavaScript Object Notation)은 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식입니다. JSON은 데이터 포맷일 뿐이며 특정 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 방법입니다. 서버와 클라이언트 간의 데이터 전송 시 많이 사용됩니다. 자바스크립트의 Object 객체 표기법과 매우 유사합니다. JSON 데이터는 자바스크립트 JSON 객체의 parse() 함수를 이용하면 자바스크립트 Object 객체로 변환해서 사용할 수 있습니다. 프로그래밍 언어에 상관없이 사용할 수 있는 데이터 교환 형식입니다. 대부분의 언어에서 JSON 데이터를 처리할 수 있는 라이브러리를 제공합니다. JSON 데이터는 자바스크립트의 Objec..
-
[자바스크립트 내장 객체] Math.random()JavaScript 2023. 4. 12. 15:57
# Math.random() Math.random()은 0보다 크고 1보다 작은 숫자형 값을 반환합니다. Math.random(); // 랜덤 숫자 반환 만약에 0에서 9 사이의 랜덤한 정수를 생성하고 싶다면, 다음과 같이 Math.random()으로 구한 0부터 1 사이의 숫자형 값에 10을 곱한 후 Math.floor() 함수로 무조건 내림 처리하면 0에서부터 9 사이의 랜덤한 정수 값을 생성할 수 있습니다. Math.floor(Math.random() * 10); // 0에서 9 사이의 정수 0에서 100 사이의 정수를 생성하고 싶다면 다음과 같이 처리하면 됩니다. Math.floor(Math.random() * 101); // 0에서 100 사이의 정수 1에서 10 사이의 정수를 생성하고 싶다면 ..