자바스크립트 함수 이름 규칙 - jabaseukeulibteu hamsu ileum gyuchig

[ javascript ] 변수 명명 규칙, 표기법

페이지 정보

작성자 웹지기 댓글 0건 조회 1,643회 작성일 20-06-04 01:24

본문

캐멀 표기법(로어 캐멀 표기법)

newName createLifeGame

파스칼 표기법(어퍼 캐멀 표기법)

NewName CreateLifeGame

밑줄 표기법(스네이크 표기법)

new_name create_life_game

변수 이름을 지을 때 일반적으로 사용하는 표기법

 - 캐멀 표기법, 밑줄표기법으로 변수의 의미를 파악할 수 있게 명명

 - 기본적으로 영어로 사용

 - 루프 카운터 변수는 i, j, k 등을 사용

 - 상수는 대문자로 ( MAX_SIZE )

 - 논리값은 변수앞에 is를 붙여 사용 isMouseDown

 - 생성자 이름은 파스칼 표기법으로

 - 예약어, 예약된 키워드, 미리 정의된 전역 변수 전역함수 사용금지 

추천0 비추천0

    • 목록

    댓글목록

    등록된 댓글이 없습니다.

    프로그래밍 언어 & 데이터베이스/JavaScript

    자바스크립트 좋은 변수명 짓기 & 스타일 가이드

    2021. 7. 14.

    자바스크립트 코드를 쓰고 변수명을 지을 때에 도움이 될 만한 몇가지 팁을 공유하려고 한다.

    자바스크립트 함수 이름 규칙 - jabaseukeulibteu hamsu ileum gyuchig

    - 자바스크립트 식별자는 알파벳 대소문자, 밑줄(_), 달러기호($), 숫자를 사용한다.

    - 식별자는 알파벳 대소문자를 구별하며, 첫글자로 숫자는 사용할 수 없다. 

    - 예약어(let, if, for 등)는 변수명으로 사용할 수 없다.

    - 의미없는 변수명(a, b, c 등)은 되도록 사용하지 않도록 한다.

    - 변수 이름은 첫번째 글자는 소문자, 띄어쓰기가 있는 각 단어의 첫 문자는 대문자로 표기(camelCase)한다.

    - 코드 들여쓰기는 2칸 공백을 사용한다.

    다른 건 다 그렇다치고 파이썬 기초 강의를 듣고 나니 변수 표기법과 들여쓰기가 파이썬과 달라서 혼란스러워 하는 중이다. 코드 들여쓰기의 경우 파이썬은 4칸 공백을 권장하는데 자바스크립트는 2칸 공백을 권장한다. 그리고 변수 이름을 지을 때 파이썬은 밑줄(_)을 사용하는 반면 자바스크립트는 알파벳 대소문자로 차이를 둔다. 

    ex) 파이썬에서는 apple_price, 자바스크립트에서는 applePrice

    이러한 네이밍 컨벤션을 각각 camel case, snake case라고 하는데 이 부분은 나중에 기회가 되면 더 자세히 소개하도록 하겠다.

    파이썬과 마찬가지로 자바스크립트도 많은 사람들이 약속으로 정하고 공유하는 스타일 가이드가 존재한다. 아래에 스타일 가이드 링크 몇 개를 첨부하니 참고하면 앞으로 자바스크립트 공부를 하는 데에 도움이 될 듯 하다.

    구글 스타일 가이드 : https://google.github.io/styleguide/jsguide.html

    Google JavaScript Style Guide

    Google JavaScript Style Guide 1 Introduction This document serves as the complete definition of Google’s coding standards for source code in the JavaScript programming language. A JavaScript source file is described as being in Google Style if and only i

    google.github.io

    W3SCHOOL 스타일 가이드 : https://www.w3schools.com/js/js_conventions.asp

    JavaScript Style Guide

    JavaScript Style Guide Always use the same coding conventions for all your JavaScript projects. JavaScript Coding Conventions Coding conventions are style guidelines for programming. They typically cover: Naming and declaration rules for variables and func

    www.w3schools.com

    STANDARDJS 스타일 가이드 : https://standardjs.com/rules-kokr.html

    JavaScript Standard Style

    English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Korean) • Português (Brasil) • 简体中文 (Simplified Chinese) • 繁體中文 (Taiwanese Mandarin) 이것은 Ja

    standardjs.com

    어후, 공부할 게 한두가지가 아니다. 그래도 하다 보면 언젠간 익숙해지리라 믿고 개발자 꿈나무들 모두 화이팅:) 이만 자러 가야겠다.

    자바스크립트 변수

    자바스크립트에서 변수를 선언할 때에는 let 을 사용합니다.
    즉 let 변수이름 = value 이렇게 선언을 하면 변수이름에 값이 할당되는 방식입니다!

    let variableName = "Variable"
    console.log(variableName)
    
    //출력 : Variable

    이때 제가 선언한 변수 이름을 보면 중간에 띄어쓰기에 있어야 할 부분에 Name이 대문자로 시작하는 것이 보일텐데요.

    이것을 보고 중간중간의 대문자가 낙타(camel)의 혹처럼 생겨서 camelCase라고 부릅니다.
    변수명에는 띄어쓰기가 불가능하기 때문에, 띄어쓰기 역할을 대신 할 무언가가 필요합니다. 

    그중 하나가 'camelCase'라는 것인데요. 첫 번째 글자는 소문자로 하고, 띄어쓰기가 있는 각 단어의 첫 문자를 대문자로 표기하는 방식입니다.

    이처럼 자바스크립트 변수 작명에 꼭 지켜야 하는 룰과 지키면 좋은 룰이 있습니다.


    변수 선언시 꼭 지켜야 하는 룰!

    1. JavaScript 식별자는 '문자(a-z, A-Z)', '밑줄(_)' 혹은 '달러 기호($)'로 시작해야 합니다. 두 번째 글자부터는 '숫자(0-9)'도 가능!

    2.  '대문자'와 '소문자'는 구별합니다. myname과 myName은 다른 이름!

    3. '예약어(JavaScript가 찜해놓은 단어)'는 사용하면 안 됩니다. 예를 들어서 if, for, let 같은 것들!


    지키면 좋은 룰 (더 좋은 스타일을 위해)

    위에 나와 있는 꼭 지켜야 하는 룰들만 지켜도 오류 없이 코드가 돌아갈 것입니다.

    하지만 돌아가기만 한다고 다 좋은 코드는 아닙니다. 프로그래밍은 혼자 하는 게 아니기 때문이죠.

    여러 사람과 협업할 때 여럿이 일관성 있는 코드를 쓰기 위해서는 어느 정도의 약속이 필요합니다.

    나물좀줘! = 나 물 좀 줘? 나물 좀 줘?

    사랑해보고싶어! = 사랑해 보고 싶어? 사랑 해보고 싶어?

    똑같은 글이지만 띄어쓰기라는 약속을 지켜주면 우리가 전달하고자 하는 문장의 의미를 조금 더 명확하게 할 수 있겠죠? 우리가 코드를 작성할 때도 마찬가지입니다. 코드를 작성하는 일은 여러 사람들과의 협업이기도 하면서 스스로와의 소통이기도 합니다. 우리는 이런 소통을 원활히 하기 위해서 아래와 같은 약속들을 함께 지킵시다 :)

    1. 의미 없는 이름을 변수 명으로 쓰지 않기

    let z, x, y, d;

    향후 복잡한 프로그램을 짜게 되면 변수와 함수를 여기저기서 적절히 활용해야 하는데, 이름이 z, x, y, d처럼 의미 없이 설정되어 있으면 어떤 값을 저장해뒀는지 찾기도 어렵고 활용하기도 어렵다!

    또한 프로그램의 가독성이 떨어져서 나중에 스스로 프로그램을 살펴볼 때, 그리고 공동 작업을 할 때 매우 불편한 상황이 발생!

    2. 너무 추상적인 이름은 좋지 않다.

    let name; // 너무 추상적인 이름
    

    상황에 따라 그냥 name이라는 변수명이 적합한 상황도 있을 수 있겠지만, 긴 프로그램을 쓰다 보면 다양한 '이름'들이 있기 때문에 name은 너무 추상적일 수 있습니다. 그럴 때는 조금 더 구체적인 이름으로 이해하기 쉽게 만들어주세요!

    let passengerName // 구체적인 이름

    3. 모든 변수 이름은 'camelCase'로 쓰는 것이 좋다.

    변수명에는 띄어쓰기가 불가능하기 때문에, 띄어쓰기 역할을 대신 할 무언가가 필요합니다. 그중 하나가 'camelCase'라는 것인데요. 첫 번째 글자는 소문자로 하고, 띄어쓰기가 있는 각 단어의 첫 문자를 대문자로 표기하는 방식입니다.

    let bad_name; // 나쁜 방법
    let goodName; // 좋은 방법

    아래에 있는 링크는 다른 유명한 기업 또는 그룹에서 JS 코드를 작성할 때 사용하는 스타일 가이드 입니다 :)

    아래 링크를 참고해서 자기에게 필요한 부분을 추려내 사용하거나 가이드로 삼고 쓰면 이전보다 깔끔하고 의미있는 코드를 작성할 수 있게 될 것 입니다!


    • Airbnb의 자바스크립트 스타일 가이드
    • Google의 자바스크립트 스타일 가이드
    • w3schools.com 스타일 가이드
    • StandardJS
    • Idiomatic.JS