Javascript 기초문법

HS K·2022년 9월 8일

JavaScript

1. 식별자

자바스크립트에서 이름을 붙일 때 사용하는 단어

종류 : 변수, 함수, 속성, 메소드명
식별자 규칙
- 키워드를 사용하면 안 된다.
- 숫자로 시작하면 안된다.
- 특수 문자는 _와 $만 허용된다.
- 공백 문자를 포함할 수 없다.
- 자바스크립트 예약어 사용불가
식별자 관례
- 생성자 함수의 이름은 항상 대문자로 시작한다.
- 변수와 인스턴스, 함수, 메소드의 이름은 항상 소문자로 시작한다.
  ex) willreturn --> willReturn
- 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자로 한다.
  ex) new array --> newArray
식별자의 종류

구분 단독으로 사용 다른 식별자와 사용
식별자 뒤에 괄호 X 변수
ex) input 속성
ex) Array.length
식별자 뒤에 괄호 O 함수
ex) Alert.("Hello World") 메소드
ex) Math.sqrt(7)

예시 식별자 종류
alert.('Hello World') 함수
Array.length 속성
input 변수
propt 함수
Math.PI 속성
Math.abs(-117) 메소드

구분	단독으로 사용	다른 식별자와 사용
식별자 뒤에 괄호 X	변수 ex) input	속성 ex) Array.length
식별자 뒤에 괄호 O	함수 ex) Alert.("Hello World")	메소드 ex) Math.sqrt(7)

예시	식별자 종류
alert.('Hello World')	함수
Array.length	속성
input	변수
propt	함수
Math.PI	속성
Math.abs(-117)	메소드

출처 : https://velog.io/@exploit017/JSBasic-%EC%8B%9D%EB%B3%84%EC%9E%90-Identifier

2. 인자

3. 매개변수

4. 콜백함수

cf) DB에서 데이터를 뽑을때 쓰인다.

자바스크립트에서 함수는 객체이기 때문에 함수의 매개변수로 전달할 수 있다.
따라서 콜백함수는 다른함수에 매개변수로 넘겨준 함수를 콜백 함수라고 부른다. 어떠한 이벤트가 발생하면 매개변수로 전달된 함수로 다시 호출되기 때문에 callback이라는 표현을 쓴다.
합성함수처럼 순차적으로 실행시키고 싶을때 사용한다.

예시

document.querySelect('.button').addEventListener('click', function(){})

여기에서 function(){}를 콜백함수라고 한다.

기본형

function f1(f2) {
f2()
}

function f2() {
}

(특징)

함수자체를 넣어도 되지만, 함수명만 넣을 수도 있다.
콜백함수에 함수명을 작명할 수 있다.
콜백함수는 아무데나 다 넣을 수 있는게 아니라, 콜백함수를 넣어도 되는 함수만 넣을 수 있다.
ex) setTimeout

let numbers = [1, 2, 3, 4, 5, 6, 7];

function isOddNumber(num) {
  return num % 2;   
// number%2 === 1 (true), number%2 === 0 (false)
}

// 위의 코드에서 이어짐
const oddNumbers = numbers.filter(isOddNumber);
console.log(oddNumbers);    // [1, 3, 5, 7]

isOddNumber 함수는 콜백 함수라고 할 수 있다.
callbackFunction 안에서 3개의 인자 (element, index, array) 를 가지는데 첫번째 부분인 element 인자만 필수로 지정되어야하고 나머지는 선택적이다.

[연습하기]

출처 : https://velog.io/@ktg6360/TIL-008-콜백-함수와-화살표-함수

5. 화살표 함수 (arrow-function)

(1) 함수 선언식 : function 키워드로 단독으로 함수를 선언한 것

function sum (num1, num2) { 
	return num1+num2;
}

(2) 함수 표현식 : 변수에 함수를 할당한 것

const sum = function sum(num1,num2) { 
return num1 + num2;
}

(3) 화살표 함수
기존의 함수 선언 코드에서 function 키워드와 식별자(sum)을 뺴주고 ()와 {} 사이에 => 만 넣으면 된다.

function sum (num1, num2) { 
	return num1+num2;
}

↓

(num1, num2) => { 
	return num1+num2;
}

※ 화살표 함수는 함수를 식별할 수 있는 식별자가 없기 때문에 화살표 함수로 작성된 함수를 호출하기 위해서는 함수 표현식으로 작성해주어야 호출이 가능하다.

하지만 여기에서 중괄호 안에 return이 들어가 어떤 데이터를 반환하고 있는 형태라면 중괄호와 return을 지움으로써 더욱 간단하게 바꿀 수 있다.

const sum = (num1, num2) => num1+num2;

또한 전달하고자 하는 매개변수가 한개라면 소괄호도 생략할 수 있다.

const pow = x => x*x;

예시

const pow = x => x*x 

const result = pow(10);
console.log(result); //100

그런데 여기에서 또, 전달하고자하는 매개변수가 하나도 없다면 소괄호만 적어도 된다.

const printPie = () => 3.14;

const result = printPie();
console.log(result); //3.14

화살표 함수로 만든 함수가 내부적으로 객체를 반환하고 있다면, 중괄호 안에 있는 키워드가 return일때 return을 생략해주는 과정에 있어서 주의해야할점은 화살표 함수의 가장 겉에 있는 중괄호처럼 인식되지 않기위해 객체의 중괄호 위에 소괄호를 씌워줘야한다.

const getObject () => ({ 
  return {
    name : "철수",
    age : 20 
  });

const obj = getObject();
console.log(obj.name);

6. 점 표기법 vs 괄호 표기법 ( dot notation, bracket notation)

자바스크립트에서 객체 내부 프로퍼티에 접근하는 방법엔 점 표기법, 괄호 표기법 2가지가 있다.

let likelion = {
    number: '9th',
    member: 21,
    univ: "pnu"
}

점 표기법 : likelion.member
괄호 표기법 : likelion['univ']

① 점 표기법

비교적 간단하게 작성할 수 있고, 가독성이 좋다는 특징을 가지고 있다.

(예시)

document.createElement('pre');

위를 해석하면 "createElement"라는 이름을 가진 메서드를 document에서 찾아 호출하고 있다는 뜻이된다.

점 표기법의 한계

const changeProperty = (object, property, changingValue) => {
    object.property = changingValue
}

changePropery(likelion, member, 300) 
// Uncaught ReferenceError: member is not defined

위의 코드처럼 객체의 프로퍼티에 접근하여 원하는 값(: changingValue)으로 변경하는 함수 changeProperty() 가 있다.
점 표기법으로 likelion 의 member 값(21 -> 300)을 변경하려고 할 때, changeProperty의 인자 member가 정의되지 않았다는 에러메시지가 발생한다.
즉 member 를 변수로서 사용하고 싶었지만, 점 표기법에서는 이런 방법이 불가능하다.

이런 경우에는 괄호 표기법으로 해결해야한다.

const changeProperty = (object, property, changingValue) => {
    object[property] = changingValue
}

changePropery(likelion, "member", 300) 

// likelion = {number: '9th', member: 300, univ: "pnu"}

괄호 표기법을 사용하면 "member" 변수를 활용하여 객체의 프로퍼티에 접근할 수 있다. 위처럼 likelion 객체의 member 값이 21 에서 300 으로 변경 된 것을 확인할 수 있다.

② 괄호 표기법

괄호 표기법을 사용하면, 아직 객체 내부가 정의되지 않은 경우에도 접근할 수 있는 이점이 있다.

예를 들어 API 통신으로 어떤 객체(= result)를 받아올 때, 해당 객체의 내부 값을 변경하는 코드를 작성한다고 생각한다면, result 객체의 a 라는 property 가 존재하더라도 API 통신 이전에는 해당 property 는 정의되지 않은 상태이다.

점 표기법은 정의되지 않은 result 객체에 접근할 수 없지만, 괄호 표기법은 해당 프로퍼티를 변수화하기 때문에 접근이 가능해진다
비동기로 데이터를 호출하는 경우, 프로퍼티에 접근하고 싶다면 괄호 표기법을 사용하자.

출처 : https://junior-datalist.tistory.com/157

7. 템플릿 리터럴(Template literal)

표현식을 내장할 수 있는 문자열 표현법.
문자열의 내용에 데이터를 삽입한다는 것을 의미한다. 템플릿 리터럴로 표현한 문자열 내부에 ${}를 기입하고, 그 안에 데이터를 기입하면 데이터는 문자열의 멤버가 된다.

const data1 = "데이터"
const str1 = `문자열 중간에 ${data1} 삽입하기`
console.log(str1)

const data2 = 100
const str2 = `숫자도 문자로 녹아든다 : ${data2} !`
console.log(str2)

⬇

문자열 중간에 데이터 삽입하기
숫자도 문자로 녹아든다 : 100 !

8. 함수와 메서드

결론부터 말하자면, 함수를 호출하는 객체가 있는 경우 메서드라고 하고, 함수를 호출하는 객체가 없는 경우 함수라고 말한다.

let obj = {
  show1: function() {
    console.log('show1() 메서드 호출');
  }
}

function show2() {
  console.log('show2() 함수 호출');
}

obj.show1(); // 메서드
show2();     // 함수

위의 예제에서 show1() 함수는 객체 obj의 프로퍼티이며, obj 객체를 통해 호출했으므로 메서드이다.
반면에 show2() 함수는 객체를 생성하지 않고 직접 호출했으므로 함수이다.

출처 : https://developer-talk.tistory.com/534

9. iterable 객체

배열을 일반화한 객체
이터러블 이라는 개념을 사용하면 어떤 객체에든 for..of 반복문을 적용할 수 있다.

10. 변수의 선언과 할당

변수

하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

자바스크립트는 매니지드 언어(managed language)이기 때문에 개발자가 직접 메모리를 제어하지 못한다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근이 가능하다.

위의 예시처럼 변수명(식별자)인 myNumber는 변수의 값이 아닌 메모리 주소를 기억하고 있다. 변수명을 사용하면, 자바스크립트 엔진이 변수명과 매핑된 메모리 주소를 통해 거기에 저장된 값(23)을 반환한다.

이처럼 변수에 값을 저장하는 것을 할당(assignment, 대입, 저장)이라 하며 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라 한다.
그리고 변수명을 자바스크립트 엔진에 알리는 것을 선언(declaration)이라 한다.

변수 선언

변수의 선언은 var, const, let 키워드로 할 수 있으며, ES6에서 const와 let이 추가되었다.

자바스크립트에서 변수 선언은 선언 → 초기화 단계를 거쳐 수행된다.

선언 단계 : 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다.
초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

출처 : https://www.howdy-mj.me/javascript/var-let-const

HS K

주의사항 : 최대한 정확하게 작성하려고 하지만, 틀릴내용이 있을 수도 있으니 유의!

다음 포스트