JavaScript 기초 문법 정리 Part2 - 화살표 함수, 객체 표현식, this,props

요즘 들어 웹 프로그래밍의 매력에 조금 빠졌습니다. 작년에 웹 프로그래밍을 처음 입문할 때는 되게 막막하고 벽을 느낀 부분이 많았는데 올해 들어서 웹 프로그래밍 전공과목을 배우면서 HTML Virtual DOM이나 Javascript 그리고 CSS에 대해 더 자세히 알게 되면서 벽을 느꼈던 부분이 이해가 되면서 재밌어진 것 같습니다.

 

(여기서부턴 혼잣말인데 제가 생각하는 웹프로래밍은 그 자체로써의 의미보단 내 생각을 표현하는 효과적인 도구라고 생각합니다. 즉 PowerPoint가 어렵지 않은 표현 도구라면 웹 프로그래밍은 조금 기술이 필요한 표현 방법이고 그 효과가 좋다고 생각합니다. 따라서  이걸 잘 배워서 나중에 생각, 혹은 구현한 결과를 표현할 때 유용하게 사용될 것 같습니다.)

 

그리고 이 내용은 유튜브 강의를 보고 정리한 내용입니다:)

 

이 강의에 대한 앞부분 정리는 여기 포스팅에 정리하였고 오늘 포스팅으로 이 강의가 끝납니다.

다음에는 중급 자바스크립트를 듣고 정리해봐야겠어요.

---

 

 

1. 함수 선언식

함수는 기존의 C언어 문법과 비슷한데 변수를 출력할 때 `${변수}`를 통해 출력하고 print 함수 대신 console.log라는 함수를 이용하여 출력한다는 점 제외하고는 동일합니다.

 

아래는 입력값이 없는 함수와 있는 함수의 예제입니다. 당연하게도 기본 다른 언어들과 틀은 동일한데 표현하는 방법만 다르다는 것을 알 수 있습니다.

 

console.log가 결국 출력함수이기 때문에 입력받은 변수를 함수에 들어오자마자 바로 출력해보고 값이 있으면 출력할 수가 있습니다.

 

 

 

2. 함수 선언문 vs 함수 표현식 

앞서 함수 선언문과 함수 표현식의 차이는 호출할 수 있는 타이밍입니다.

함수 선언문은 어디서든 호출이 가능합니다. 

 

출처-https://www.youtube.com/watch?v=KF6t61yuPCY

 

예를 들어 아래 왼쪽 코드에서 함수를 호출하고 선언해도 실행이 됩니다. 그러나 우측 하단의 코드에서는 변수를 출력하고 변수를 선언하면 출력이 안 되고 에러가 납니다. 이유는 원래 우측 하단 코드와 같이 자바스크립트는 인터프리터 언어라서 한 줄씩 순차적으로 실행하기 때문에 안 되는 게 맞는데 좌측 하단 코드가 동작하는 이유는 자바스크립트 내부 알고리즘 때문입니다. 

 

자바스크립트는 실행 전 초기화 단계에서 코드의 모든 함수를 찾아서 함수 모임을 생성해둡니다. 그래서 함수를 호출하고 선언해도 실행이 됩니다. 이를 호이스팅(hoisting) 현상이라고 합니다.

 

그러나 함수 표현식은 호출 후 선언하면 동작하지 않습니다. 함수표현식은 자바스크립트가  한 줄씩 읽으면서 실행해서 선언 이후에만 사용할 수 있습니다.

 

 

 

 

3. 화살표 함수

화살표 함수는 지금까지 배웠던 함수를 보다 간결하게 작성할 수 있습니다.

아래와 같은 형식으로 함수를 씁니다. (볼 수록 신기한 문법이네요....)

let/const 함수명=(매개변수)=> {
	실행할 명령
}

아래는 그 예시입니다. 좌측 하단은 입력 인자가 없는 예시이고 우측 하단은 있는 예시입니다.

 

 

 

 

4. 객체

객체란 한 대상에 대해 여러 속성이 들어가 있는 구조입니다. 이 속성들은 키와 값으로 이루어진 property가 들어갑니다.

선언 방식이 아래와 같고 SQL의 테이블을 만드는 문법과 비슷합니다. 특이한 점은 마지막 속성 뒤에 콤마(,)를 붙여주는 게 수정 삭제에 용이해서 붙여주는 게 좋다고 합니다. (sql이었으면 바로 에러 뱉었을 텐데,,)

다만 SQL과 같은 데이터 구조와 다른 점은 구조를 만들고 재사용하는 게 아닌 한 데이터의 여러 속성을 지정하는 용도로 사용된다는 점입니다.

const 객체명={
  변수명1:값1,
  변수명2: 값2,
}

객체 접근은 아래 두 가지 방식이 있습니다.

• 객체.변수명
• 객체['변수명']

객체에 속성 추가는 Pandas와 유사하게 위 객체 접근 식에서 없는 속성에 값을 할당하면 그 속성이 추가됩니다.

즉 아래 식에서 변수가 원래 객체에 있는 값이면 값이 업데이트되고 없는 값이면 그 속성이 추가됩니다.

• 객체.변수명='값'
• 객체['변수명']='값'

삭제는 아래와 같습니다. 간단하네요. 그죠?

• delete 객체.[삭제할 변수명]

 

아래 왼쪽 예시를 보면 member_info 객체를 생성하고 email과 address 속성을 추가하는 예시입니다. 그리고 이 객체의 전체 값들을 보고 싶다면 이 객체의 이름을 console.log로 출력하면 됩니다. 그리고 우측 하단 예시를 보면 함수로 객체를 바로 생성할 수도 있습니다. 특이한 점은 in 문법을 이용하여 객체에 속성이 있는지를 true/false로 확인할 수도 있습니다.

 

=

다음으로 반복문에서  for i in range(n)의 역할을 할 때 n에 데이터 프레임이 오면 칼럼명들이 출력되듯이 n에 객체가 오면 이들의 속성 리스트가 반환이 됩니다.

 

 

 

5. 객체의 method와 this

5.1 객체의 method

지금까지는 객체에 속성마다 값이 들어간 것을 보았는데 이때 속성에 값이 아닌 함수가 온다면 method가 됩니다.

근데 또 특이한 게 객체의 속성에 함수를 정의하는 방식이 아래와 같은 형식을 지닙니다. 예를 들어 아래와 같이 3번째 속성의 값으로 함수를 할당하면 속성 3은 함수명이 됩니다. 따라서 호출할 때도 객체.속성3()과 같은 형식으로 합니다.

const 객체명={
  속성1: 값1,
  속성2: 값2,
  속성3: function(){
    명령어
  }
}

// 아래와 같이 function 키워드를 생략해도 됨
const 객체명={
  속성1: 값1,
  속성2: 값2,
  속성3(){
    명령어
  }
}

 

 

5.2 객체의 this

일반 함수는 객체에서 this는 자기 자신을 가리킴 그러나 화살표 함수에서 this는 자신을 가리키지 않고 전역 객체에서 값을 가져옵니다. (브라우저에서 객체는 window, node.js에서 객체는 global) 따라서 객체의 메서드를 작성할 때는 화살표 함수를 사용하지 않는 것이 좋습니다.

 

그리고 특이한 점은 객체를 담은 변수에서 속성 값을 바꾸어도 원본 객체 값이 같이 변한다는 것입니다. 아래는 그 예시입니다.

 

 

 

6. 자바스크립트 배열

자바스크립트 배열은 아래와 같이 대괄호로 선언할 수 있습니다. 그리고 이에 대한 접근은 인덱스로 합니다.

let 배열명=[값1, 값2, 값3, ~]

그리고 이 배열은 문자뿐만 아니라 숫자, 객체, 함수 등도 포함할 수 있습니다. 특이하죠? 즉 한 배열에 여러가지 자료형을 담을 수 있습니다. 숫자와 객체는 그렇다쳐도 함수까지 담을 수 있다니 정말 유연하군요.

 

6.1 배열에 값 추가

배열 맨 끝에 값을 추가는 객체.push('값')으로 가능합니다. 반대로 객체.pop()은 배열의 맨 끝 요소를 제거해줍니다.

이건 또 C++이랑 비슷하네요. 배열 앞에 값을 제거하거나 추가는 unshift('값')와 shift()로 가능합니다.

그리고 꼭 맨 앞이나 뒤가 아니라도 배열의 인덱스로 바로 접근해서 값 수정도 가능합니다. 좌측 하단은 이와 관련된 예제입니다. 그리고 반복문은 for of를 사용하여 우측 하단과 간단하게 구현할 수 있습니다.

그래서 위 내용을 정리하면 아래와 같습니다.

코드	역할
객체.push('값');	맨 끝에 원소 삽입
객체.pop();	맨 끝에 원소 삭제
객체.unshift('값');	맨 앞에 원소 추가
객체.shift();	맨 끝에 원소 제거
객체[인덱스]=값	원하는 인덱스의 값 수정

 

 

7. 전역 변수/지역변수

참고로 자바스크립트에서 전역 변수는 함수 밖에 존재하는 변수이고 함수 내부에서만 접근할 수 있는 변수는 지역변수입니다. 아래 예시를 보면 동일한 msg라는 변수인데도 전역 변수 msg에는 'welcome' 이 저장되어 있고 함수 안의 지역변수 msg에는 'Hello'가 저장되어 있어 첫 번째와 세 번째 출력 함수에는 'welcome'이 출력되고 두 번째 출력 함수에는 Hello가 출력됩니다. 

 

---

 

감사합니다:)