본문 바로가기

개발자 꿈나무/JavaScript21

자바스크립트 함수 선언과 호출 변수가 값을 저장하는 기능을 한다면, 함수는 명령을 저장하는 기능을 한다고 생각하면 된다. 파이썬에서 함수를 선언할 때는 def를 사용했는데 자바스크립트에서는 function을 사용한다. (앍 헷갈려...) 자바스크립트 함수를 선언하고 호출하는 방법에 대해서 정리하도록 하겠다. 함수 선언 함수 선언의 구조는 아래와 같다. function 함수명() { 명령; 명령; }; function 뒤에 원하는 함수명을 입력한 뒤에 소괄호, 중괄호를 순서대로 써주면 된다. 중괄호 안에는 명령어들을 입력하는데 보통 한 줄에 명령 한 개를 입력한다. // 함수 선언 function hello() { console.log('Hello, world!'); console.log('Nice to meet you.'); }; 함.. 2021. 7. 16.
자바스크립트 좋은 변수명 짓기 & 스타일 가이드 자바스크립트 코드를 쓰고 변수명을 지을 때에 도움이 될 만한 몇가지 팁을 공유하려고 한다. - 자바스크립트 식별자는 알파벳 대소문자, 밑줄(_), 달러기호($), 숫자를 사용한다. - 식별자는 알파벳 대소문자를 구별하며, 첫글자로 숫자는 사용할 수 없다. - 예약어(let, if, for 등)는 변수명으로 사용할 수 없다. - 의미없는 변수명(a, b, c 등)은 되도록 사용하지 않도록 한다. - 변수 이름은 첫번째 글자는 소문자, 띄어쓰기가 있는 각 단어의 첫 문자는 대문자로 표기(camelCase)한다. - 코드 들여쓰기는 2칸 공백을 사용한다. 다른 건 다 그렇다치고 파이썬 기초 강의를 듣고 나니 변수 표기법과 들여쓰기가 파이썬과 달라서 혼란스러워 하는 중이다. 코드 들여쓰기의 경우 파이썬은 4칸 .. 2021. 7. 14.
자바스크립트 변수 var, let, const 차이 자바스크립트 강의를 들으면서 궁금했던 점이 한가지 있었다. 나는 분명히 예전에 변수 선언을 var로 배웠는데 강의에서는 let을 사용한다는 거였다. 그래서 검색해보니 변수 선언에는 var, let, const 세가지를 사용할 수 있으며, 각각 차이점이 있었다. 이 포스팅에서는 그 차이점에 대해서 정리해두려고 한다. var 예전에는 자바스크립트의 변수 선언이 var로만 가능했었다. var로 변수 선언을 했을 때의 가장 큰 특징은 중복 선언이 가능하다는 점인 것 같다. var a = 100; console.log(a) // 결과값 100 var a = 200; console.log(a) // 결과값 200 var a = 300; console.log(a) // 결과값 300 var를 사용하면 위와 같이 중복.. 2021. 7. 14.
자바스크립트 변수 선언하기 자바스크립트에서도 반복되는 데이터들을 변수 선언해서 좀 더 편리하게 관리할 수 있다. 변수 선언하는 방법에 대해서 소개하려고 한다. 과일가게에서 사과는 1,000원 / 망고는 1,500원 / 멜론은 2,500원에 판매하고 있다. 사과 2개, 망고 1개, 멜론 1개를 구입했을 때 아래와 같이 총 금액을 구할 수 있다. console.log(1000 * 2 + 1500 + 2500) 이러한 경우 총 금액을 구할 수는 있지만, 나중에 과일 종류가 많아지게 되면 금액을 일일이 찾아서 입력해야하는 번거로움이 있고, 또 오탈자가 발생하거나 금액을 착각했을 때 전부 찾아서 수정해주는 것이 어렵다. 이럴 때에 변수를 선언하여 과일 금액과 총 금액을 조금 더 편리하게 관리할 수 있다. // 변수 선언 let appleP.. 2021. 7. 13.
자바스크립트 자료형 타입(Java Script - Data type) 파이썬 기초 강의를 다 듣고 나서 중급 강의를 듣기 전, 자바 스크립트 기초 강의를 먼저 듣기로 했다. 아직 5~6강 밖에 듣지 않았지만 목차를 보니 데이터 타입, 조건문 등 파이썬 강의에서 다루었던 내용과 유사한 것이 많을 것 같다는 느낌적 느낌(!)이 들었다. 겹치는 부분이 있더라도 복습을 한다는 마음으로 열심히 듣고, 정리가 필요하다고 생각되는 부분들은 블로그에 기록해 두려고 한다. 자바스크립트 자료형 타입(Data type) 자바스크립트 뿐만 아니라 다른 프로그래밍 언어에 공통적으로 적용되는 개념이니 꼭 이해하고 넘어가는 것이 좋을 것 같다. 숫자(Number) 정수(Interger) 타입과 소수(Floating point) 타입으로 다시 나눌 수 있다. 정수 타입은 음의 정수, 0, 양의 정수를.. 2021. 7. 12.
마우스 우클릭 & 드래그 방지 외주로 웹사이트 작업을 하게 되었는데 클라이언트 측에서 마우스 우클릭 & 드래그 방지 기능을 요청했다. 그래서 홈페이지 내에 마우스 우클릭과 드래그를 막는 코드를 적용했는데, 왠지 나중에 또 필요한 곳이 있을 듯 하여 블로그에 기록해두려고 한다. 웹사이트 마우스 우클릭 방지 / 드래그 방지를 하려면 2단계의 과정을 거쳐야 한다. 순서대로 따라하면 어렵지 않을 것이다. 첫번째로 사이에 script 코드를 넣는다. 두번째로 아래에 html 코드를 넣는다. 위의 두가지 코드를 삽입한 후 저장을 하면, 웹사이트 내에서 마우스 우클릭이나 드래그를 시도해도 아무런 반응이 없는 것을 확인할 수 있을 것이다. 각 코드의 의미도 함께 알아두도록 하자. oncontextmenu = "return false" : 우클릭 방.. 2021. 5. 29.
함수(function) 기초 - 매개변수(parameter), 인자(argument), 리턴(return) 아래와 같은 스크립트가 있다. 일정한 규칙성이 있다면 반복문을 사용하면 되지만, 그렇지 않은 경우에 우리는 함수(function)로 풀어낼 수 있다. 아래와 같이 함수식을 작성하여 표현할 수 있다. 첫번째 코드와 두번째 코드의 결과는 똑같이 보여진다. 매개변수(parameter)와 인자(argument) 아래 두개의 코드는 같은 값을 출력한다. 그렇다면 아래와 같은 결과값을 갖고 싶다면 어떻게 하는 것이 좋을까? sum에 숫자 2와 3이 들어있다면 결과값으로 5를 출력하고, 3과 4가 들어있다면 결과값으로 7을 출력하게 하는 것이다. 위와 같이 코드를 작성하면 결과값으로 의도한 5, 7을 각각 얻을 수 있다. 여기에서 함수이름인 sum 옆의 괄호()안에 있는 left, right를 매개변수(paramet.. 2020. 10. 8.
함수(function) 기초 함수란? 함수 기초를 쉽고 자세하게 다룬 페이지가 있어서 url을 공유한다. (내가 설명하는 것보다 그게 나을듯=_=) http://tcpschool.com/javascript/js_function_basic 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 요약하자면 함수(function)란... 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미하여, 이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복 수행할 수 있다. -> 자바스크립트에서 블록이란 함수나 실행문의 {중괄호}로 묶여진 부분을 가리킴 함수 문법 function 함수이름(매개변수1, 매개변수2,...) { 함수가 호출되었을 때 실행하.. 2020. 8. 20.
반복문에 배열 활용하기 반복문에 배열을 활용하는 방법을 알아보자! Loop & Array Co workers egoing heina luna yunsisters 직원(co workers)이 이고잉, 해이나, 루나, 윤시스터즈 - 총 4명이 있다. 만약 co workers의 목록이 일억개이고 가 매우 빈번하게 수정되는 긴 코드라면 유지보수에 상당한 어려움을 겪을 것이다. Loop & Array Co workers 위와 같이 배열을 사용하여 직원 명단을 반복적으로 추출할 수 있다. 만약 멤버가 한명 추가되면, coworkers에 요소를 추가하고 반복문의 조건값도 i < 5 로 수정하면 된다. 만약 멤버가 두명 삭제된다면 빈 값 만큼 undefined로 추출된다. 매번 멤버의 수를 맞추어 주어야 하기 때문에 번거롭다. 데이터가 바뀌.. 2020. 8. 18.
반복문(Loop) 반복문이란? 컴퓨터 프로그래밍에서 반복문은 제어문 중의 하나로, 프로그램 소스 코드 내에서 특정한 부분의 코드가 반복적으로 수행될 수 있도록 하는 구문이다. 직접 활용해보자! Loop 위의 스크립트를 실행하면 1,2,3,4가 순서대로 추출된다. 그런데 만약 2,3을 1억번 반복해서 추출해야 한다면? 물론 위의 소스를 1억번 복사 붙여넣기 해도 같은 결과값을 얻을 수 있지만, 수정할 부분이 생기면... OTL 유지보수가 몹시 불편할 것이다. 그래서 우리는 반복문을 사용한다. 변수 i의 값을 이용하여 2,3이 3번 반복 추출되도록 만들었다. 반복문을 사용할 때에는 반복문이 '언제 종료될 것인가'를 꼭 지정해 주어야 한다. ※생활코딩 > WEB > WEB2 - JavaScript 강의를 통해 공부한 내용입니다. 2020. 8. 15.