자바스크립트 기본

0. 들어가는 말

평소의 자바스크립트를 공부하자하다가 조금 미뤄둔 면도 있는거 같고 다시 한번 상기 하기 위해서 이고잉님의 javascript 강의(https://opentutorials.org/course/743)를 듣고 정리해보려고 합니다. 먼저 자바스크립트 기본을 보고 정리하려고 합니다.

1. 숫자와 문자

자바스크립트에서 큰 따옴표나 작은 따옴표가 붙지 않는 숫자를 숫자로 인식합니다. Math : 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다.

console.log(1 + 1) // result : 2
console.log(1.2 + 1.3) // result : 2.5
console.log(2 * 5) // result : 10
console.log(6 / 2) // result : 3
console.log(Math.pow(3, 2)) // 3^2 result : 9
console.log(Math.round(10.6)) // 반올림 result : 11
console.log(Math.ceil(10.2)) // 올림 result : 11
console.log(Math.floor(10.6)) // 내림 result : 10
console.log(Math.sqrt(9)) // 제곱근 result : 3
console.log(Math.random()) // 0에서 1 사이의 랜덤 숫자

문자(String)은 “(큰 따옴표) 혹은 ‘(작은 따옴표)중의 하나로 감싸야 합니다. es6 이후로는 `(back-tic)으로 감쌀 수 있으며 문자의 합과 변수도 넣을 수 있습니다. 큰 따옴표로 시작했으면 큰 따옴표로 끝나야하고 작은 따옴표로 시작하였으면 작은 따옴표로 끝나야 합니다.

console.log('coding everybody') // result : coding everybody
console.log('coding everybody') // result : coding everybody
console.log(typeof 0) // result : number
console.log(typeof '0') // result : string
const world = 'world'
console.log(`hello ${world}`) // result : hello world
console.log('coding everybody'.length) // result : 16

2. 변수

변수(Variable) 값을 담는 컨테이너로 값을 유지할 필요가 있을때 사용됩니다. 여기에 담겨진 값은 다른 값으로 바꿀 수 있습니다. 변수는 코드의 재활용성을 높여줍니다.

생활코딩에서의 예제는 var이지만 협업에서는 es6부터 도입된 let과 const를 많이 쓰게 됩니다. 일단 let, const가 쓰이는 이유는 블록 유효 범위를 가지고 있기 때문입니다. 블록 유효 범위는 가장 가까운 블록으로 지정됩니다. 블록은 if,else,for,while 같은 문법으로 지정된 {}블록을 의미합니다.

var, let, const 모두 호이스팅(hoisting)라는 속성을 가집니다. 호이스팅은 변수 선언이 함수 또는 전역 코드의 상단에 이동하는 것과 같은 행동을 말합니다.

사실상 이 특성 때문에 다른 프로그래밍 언어를 하시고 오신 분들은 호이스팅에 멘붕하시는 분들이 많습니다.

let과 const는 유효범위의 시작에서부터 선언될 때까지 temporary dead zone(일시적 사각 지대)에 있기 때문에 이 dead zone에서 사용하게 되면 ReferenceError가 발생되게 됩니다.

let은 재할당은 가능한 변수지만 재정의는 불가능합니다. const는 재할당이 불가능한 읽기전용 상수입니다. 초기 정의시 반드시 값을 할당해주어야 합니다. 만약 할당하지 않으면 Syntax Error가 납니다.

console.log(a) // result : ReferenceError
let a
console.log(a) // result : undefined
a = 123
console.log(a) // result : 123
let a = 456 // result : Uncaught SyntaxError: Identifier 'a' has already been declared
const b = 789
console.log(b) // result : 789
const c // result : Uncaught SyntaxError: Missing initializer in const declaration

3. 주석

주석은 보통 어떤 역할을 하는 함수나 클래스인지를 다는 경우가 많습니다.

자바스크립트에서는 ///**/로 사용 됩니다. //은 한 줄 주석, /**/은 여러줄 주석으로 사용합니다.

// 한 줄 주석!
/*
여러줄 주석을 달 수 있습니다.
*/

4. 줄바꿈과 여백

;(semicolon)은 명령이 끝났다고 알려주는 표현입니다. 자바스크립트에서는 줄만 바꾸어주어도 명령이 끝났다는 것을 인식합니다. 여백은 가독성을 위해서 사용하며 사람의 취향마다 tab과 space bar로 구분됩니다.

줄바꿈과 여백은 Eslint와 Prettier 설정으로 보통 팀과 회사마다 정해져 있는 편입니다.

https://velog.io/@velopert/eslint-and-prettier-in-react

5. 비교

연산자

연산자란 값에 대해서 어떤 작업을 컴퓨터에게 지시하기 위한 기호입니다.

a = 1

위의 예시에서 =은 우항의 값인 1을 좌항의 변수 a에 대입하는 ‘대입 연산자’입니다.

비교 연산자

프로그래밍에서 비교란 주어진 값들이 같은지 다른지, 큰지, 작은지를 구분하는 것을 의미합니다. 이 때 사용하는 것이 비교 연산자입니다. 비교 연산자는 비교 결과가 참이면 true를 반환하고 거짓이라면 false를 반환합니다.

console.log(1 === 1) // result : true
console.log('1' === 1) // result : false

위의 예시는 일치연산자로 우항과 좌항이 같을 때 ture를 반환하고 다르면 false를 반환합니다. ==이라는 동등연산자도 있지만 쓰지 않길 권장합니다. ==과 ===의 차이점 : http://dorey.github.io/JavaScript-Equality-Table/

console.log(1 !== 1) // result : false
console.log('1' !== 1) // result : true

위의 예시는 일치연산자와 반대의 결과를 가지며 !은 부정을 의미합니다.

console.log(50 > 60) // result : false
console.log(50 > 40) // result : true
console.log(50 > 50) // result : false

좌항이 우항보다 크다면 참이고 그렇지 않으면 거짓을 반환합니다. <은 반대의 결과를 가집니다.

console.log(50 >= 60) // result : false
console.log(50 >= 40) // result : true
console.log(50 >= 50) // result : true

좌항이 우항보다 크거나 같으면 참이며 그렇지 않으면 거짓을 반환합니다. <=은 반대의 결과를 가집니다.

6. 조건문

Boolean

Boolean은 true, false로 이루어진 데이터형입니다. Boolean은 조건문에서 핵심적인 역할을 합니다.

조건문은 주어진 조건에 따라서 어플리케이션을 다르게 동작하게 하는 것입니다.

if(조건문) {
  실행할 코드
} else if(조건문) {
  실행할 코드
} else {
  실행할 코드
}

if와 els if의 경우 조건문에 담긴 조건이 true이면 실행하게 되며 실행순서는 위에서부터 아래로 조건문의 조건이 true가 되는 조건이 담긴 괄호 다음의 중괄호 구문이 실행되게 됩니다. else는 if와 else if에서 부여한 조건문이 모두 false 일 경우 실행 됩니다.

논리 연산자

논리 연산자는 조건문을 좀 더 간결하고 다양한 방법으로 구사할 수 있도록 도와줍니다.

and 연산자인 &&은 좌항과 우항이 모두 참인 경우 참이 되는 논리 연산자입니다.

id = prompt('아이디를 입력해주세요.')
password = prompt('비밀번호를 입력해주세요.')
if (id == 'egoing' && password == '111111') {
  console.log('인증 했습니다.')
} else {
  console.log('인증에 실패 했습니다.')
}

or 연산자인 ||은 좌우항 중에 하나라도 true라면 true가 되는 논리 연산자입니다.

id = prompt('아이디를 입력해주세요.')
if (id === 'egoing' || id === 'k8805' || id === 'sorialgi') {
  console.log('인증 했습니다.')
} else {
  console.log('인증에 실패 했습니다.')
}

not 연산자인 !은 부정의 의미로 Boolean의 값을 역전시킵니다.

console.log(!true) // result : false
console.log(!false) // result : true

Boolean 뿐만 아니라 숫자 1(true)을 제외한 모든 나머지 데이터 유형은 false로 인식합니다.

7. 반복문

반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법입니다.

while

while을 프론트엔드건 node.js건 특별히 자주 쓰진 않는 문법입니다. 그래도 한 번 보도록 하겠습니다.

while (조건){
    반복해서 실행할 코드
}

위와 같은 형식으로 구성 됩니다. 조건이 참이면 반복해서 실행할 코드가 반복되게 됩니다.

for

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
    반복해서 실행될 코드
}

for(let i = 0; i < 10; i++){
    console.log(`coding everybody ${i}`);
}

반복조건이 충족될 때까지 반복해서 실행될 코드가 반복되게 됩니다.

반복작업을 중간에 중단 시키고 싶다면 break를 사용하면 됩니다.

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break
  }
  console.log(`coding everybody ${i}`)
}

/*
결과
coding everybody 0
coding everybody 1
coding everybody 2
coding everybody 3
coding everybody 4
*/

반복작업을 특정 조건에서만 중단 시키려면 continue를 사용하시면 됩니다.

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue
  }
  console.log(`coding everybody ${i}`)
}

/*
결과
coding everybody 0
coding everybody 1
coding everybody 2
coding everybody 3
coding everybody 4
coding everybody 6
coding everybody 7
coding everybody 8
coding everybody 9
*/

8. 함수

함수(function)는 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여줍니다.

function 함수명( [인자...[,인자]] ){
   코드
   return 반환값
}

// es6 arrow function
함수명( [인자...[,인자]] ) => {
   코드
   return 반환값
}

함수의 핵심은 입력과 출력입니다. 입력된 값을 연산해서 출력하는 것이 함수의 기본적인 역할입니다.

함수 내에서 사용한 return은 뒤에 따라오는 값을 함수의 결과로 반환하는 동시에 함수를 종료시킵니다.

인자(argument)는 함수로 유입되는 입력값입니다. 어떤 값을 인자로 전달하느냐에 따라서 함수가 반환하는 값이나 메소드의 동작방법이 다르게 할 수 있습니다.

9. 배열

배열은 여러개의 데이터를 하나의 변수에 저장하기 위한 것입니다.

const member = ['egoing', 'k8805', 'sorialgi']

대괄호([])은 배열을 만드는 기호입니다. 데이터는 ,로 구분 됩니다. 자바스크립트에서 배열은 0부터 시작합니다.

const arr = [1, 2, 3, 4, 5]
console.log(arr.length) // result : 5

배열의 크기는 length로 알아낼 수 있습니다.

let li = ['a', 'b', 'c', 'd', 'e']
li.push('f')
console.log(li) // result : ["a", "b", "c", "d", "e", "f"]

push를 사용하면 배열 끝에 원소를 추가할 수 있습니다.

let li = ['a', 'b', 'c', 'd', 'e']
li.concat(['f', 'g'])
console.log(li) // result : ["a", "b", "c", "d", "e", "f", "g"]

concat도 동일하며 복수의 원소를 추가할 때 많이 사용하고 새로운 배열을 생성하기 때문에 불변성을 지켜야하는 react, redux에서 배열에 원소를 추가해야할 때 많이 사용 됩니다.

let li = ['a', 'b', 'c', 'd', 'e']
li.unshift('z')
console.log(li) // result : ["z", "a", "b", "c", "d", "e"]

unshift는 새로운 요소를 배열의 맨 앞에 추가합니다.

let li = ['a', 'b', 'c', 'd', 'e']
li.splice(2, 0, 'B')
console.log(li) // result : ["a", "b", "B", "c", "d", "e"]

splice는 배열의 기존 요소를 삭제, 교체하거나 새로운 요소를 추가하여 배열의 내용을 변경합니다.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']
console.log(animals.slice(2, 4)) // result : ["camel", "duck"]

slice는 배열을 자를 때 사용되며 자른 배열(얕은 복사본)을 새로운 배열 객체로 반환합니다.

let li = ['a', 'b', 'c', 'd', 'e']
li.shift()
console.log(li) // result : ["b", "c", "d", "e"]

shift는 배열의 첫 번째 원소를 제거 합니다.

let li = ['a', 'b', 'c', 'd', 'e']
li.pop()
console.log(li) // result : ["a", "b", "c", "d"]

pop은 배열에서 마지막 원소를 제거합니다.

let li = ['c', 'e', 'a', 'b', 'd']
li.sort()
console.log(li) // result : ["a", "b", "c", "d", "e"]

sort는 배열를 정렬해줍니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

let li = ['c', 'e', 'a', 'b', 'd']
li.reverse()
console.log(li) // result : ["d", "b", "a", "e", "c"]

reverse는 배열의 순서를 반전합니다.

10. 객체

const grades = { egoing: 10, k8805: 6, sorialgi: 80 }
let grades = {}
grades['egoing'] = 10
grades['k8805'] = 6
grades['sorialgi'] = 80
let grades = new Object()
grades['egoing'] = 10
grades['k8805'] = 6
grades['sorialgi'] = 80

위의 방법대로 객체를 생성할 수 있습니다.

const grades = { egoing: 10, k8805: 6, sorialgi: 80 }
console.log(grades['sorialgi']) // result : 80
console.log(grades.sorialgi) // result : 80

객체에서 필요한 값을 부르는 방법은 위와 같이 두가지 방법이 있습니다.

let grades = { egoing: 10, k8805: 6, sorialgi: 80 }
for (key in grades) {
  console.log(`key : ${key} value : ${grades[key]}`)
}

/*
result
key : egoing value : 10
key : k8805 value : 6
key : sorialgi value : 80
*/

for…in은 object에 있는 항목들을 반복적으로 반환합니다.

const grades = {
  list: { egoing: 10, k8805: 6, sorialgi: 80 },
  show: function() {
    for (let name in this.list) {
      console.log(`${name}:${this.list[name]}`)
    }
  },
}
grades.show()

/*
result
egoing:10
k8805:6
sorialgi:80
*/

위의 예제는 자바스크립트를 이용한 객체 지향 프로그램의 핵심이 되는 성질로 취지에 따라서 로직을 객체에 그룹핑하여 객체라는 부품을 조립해서 소프트웨어라는 완제품을 만들어줍니다.

11. 모듈

프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화합니다. 이 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법이 사용됩니다. 그 중에 하나가 코드를 여러개의 파일로 분리하는 것입니다.

이를 통해서 얻을 수 있는 효과는 다음과 같습니다.

  • 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있습니다.
  • 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선됩니다.
  • 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있습니다.
  • 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있습니다.
  • 한 번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약할 수 있습니다 (브라우저에서만 해당)

순수한 자바스크립트에서는 모듈(module)이라는 개념이 분명하게 존재하지 않습니다. 하지만 자바스크립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있습니다.

greeting.js

function welcome() {
  return 'Hello world'
}

main.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="greeting.js"></script>
  </head>
  <body>
    <script>
      console.log(welcome())
    </script>
  </body>
</html>

welcome이라는 함수를 모듈화 시킨 예제입니다. 만약 welcome이라는 함수를 자주 사용한다고 가정하면 이것이 필요할 때마다 이 함수를 정의해서 사용해야하는 것은 유지보수가 어렵고 낭비가 될 것이며 이 경우에는 모듈이 필요하게 됩니다.

라이브러리는 모듈과 비슷한 개념입니다. 모듈이 프로그램을 구성하는 작은 부품으로서 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미합니다.

12. UI와 API 그리고 문서보는 법

UI(User Interface) : 사용자와 시스템의 접점 API(Application Programming Interface) : App과 프로그래밍의 접점(프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치)

웹 개발자는 사용자에게 App을 제어할 수 있도록 User Interface를 제공하고 브라우저 개발자는 웹 개발자에게 App을 제어할 수 있도록 Application Programming Interface 제공합니다.

프로그래밍을 공부하기 위한 자료는 크게 레퍼런스(reference)와 안내서(tutorial)가 있습니다. 통산적으로 튜토리얼은 언어의 문법을 설명하고 레퍼런스는 명령어의 사전을 의미합니다.

13. 정규표현식

정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구입니다.

정규표현식은 두 단계로 이루어집니다. 하나는 컴파일(complie)이고 다른 하나는 실행(execution)입니다.

컴파일은 검출하고자 하는 패턴을 만들어내는 일입니다. 먼저 정규표현식 객체를 만들어야 합니다.

// 정규 표현식 리터럴
const pattern = /a/
// 정규 표현식 객체 생성자
const pattern = new RegExp('a')

정규표현식을 컴파일해서 객체를 만들었다면 이제 문자열에서 원하는 문자를 찾아내야 합니다.

// RegExp.exec()
console.log(pattern.exec('abcdef')) // result : ["a", index: 0, input: "abcdef", groups: undefined]
console.log(pattern.exec('bcdefg')) // result : null

// RegExp.test()
console.log(pattern.test('abcdef')) // result : true
console.log(pattern.test('bcdefg')) // result : false

RegExp.exec()은 패턴에 해당하는 문자가 있으면 결과를 배열로 반환해주고 없다면 null을 반환해줍니다. RegExp.test()은 패턴에 해당하는 문자가 있으면 true를 반환하고 없으면 false를 반환해줍니다.

// String.match()
console.log('adcdef'.match(pattern)) // result : ["a", index: 0, input: "adcdef", groups: undefined]
console.log('bcdefg'.match(pattern)) // result : null
// String.replace()
console.log('abcdef'.replace(pattern, 'A')) // result : Abcdf

String.match()도 RegExp.exec()와 동일하게 동작합니다. String.replace()은 패턴을 검색한 후 일치하는 곳을 변경할 값으로 변환하여 새로운 문자열을 반환합니다.

const xi = /a/
console.log('Abcde'.match(xi)) // result : null
const oi = /a/i
console.log('Abcde'.match(oi)) // result : ["A", index: 0, input: "Abcde", groups: undefined]

i를 붙이면 대소문자를 구분하지 않습니다.

const xg = /a/
console.log('abcdea'.match(xg)) // result : ["a", index: 0, input: "abcdea", groups: undefined]
const og = /a/g
console.log('abcdea'.match(og)) // result : ["a", "a"]

g를 붙이면 검색된 모든 결과를 반환합니다.


Written by@seongjoojin
Lives and works in Seoul building useful things.

GitHubTwitter