JavaScript 기초 문법 정리 - 1

bp.chys·2020년 5월 17일
객체구조체기초 문법변수조건문함수
14

백엔드 개발자의 프론트엔드 공부

목록 보기
3/12
post-thumbnail

velopert님의 모던 자바스크립트 강좌를 참고하여 작성했습니다.

변수

let

변수 선언

let name
name = 'monkey'

const

상수 선언
더이상 var은 사용하지 않는다. 함수를 포함한 대부분의 선언은 모두 const로 한다. let이 필요한 경우에만 let을 쓴다.

const onShowModal = () => {
	....  
}

데이터 타입

  • 별도의 선언 없이 변수에 대입한다.
  • 숫자, 문자열, boolean, null(값이 없다.), undefined(아직 값이 지정되지 않았다.)
  • null은 우리가 없다고 고의적으로 설정하는 값을 의미하고 undefined는 우리가 설정하지 않았기 때문에 없는 값을 의미한다.

연산자

산술연산자 (+, - , *, /)

  • ++a, a++

대입연산자 (=)

let a = 1;
a = a + 3;
a += 3;

논리 연산자

  • 불리언 타입을 위한 연산자.
  • ! : NOT
  • && : AND
  • || : OR
  • 연산 순서 : NOT > AND > OR

비교연산자

  • === : 두 값이 타입까지 완전히 일치하는지 확인
  • == : 타입은 검사하지 않음
    • 즉, 숫자 1과 문자 '1'을 같은 값으로 인식
    • 0과 false도 같은 값으로 인식
    • null과 undefined를 같은 값으로 인식
  • !== : 두값이 일치하지 않는지 확인

문자열 붙이기

두 문자열을 붙일 때에는 + 로 할 수 있다.

const a = "안녕";
const b = "하세요";
console.log(a + b); //"안녕하세요"

조건문

if 문

특정 조건이 true를 반환할 경우에만 if문 안의 코드를 실행한다.

if (조건) {
  코드
}

if문 안과 밖은 블록으로 구분되어져 있기 때문에 const를 이중으로 정의해도 무방하다.

const a = 1
if (true) {
  const a = 2
  console.log('if문 안의 a 값은 ' + a)
}
console.log('if문 밖의 a 값은 ' + a)

if-else문

둘 중 하나만 실행하고 싶은 분기를 할 때 사용한다.

if-else if문

여러 조건 중 하나를 실행하고 싶은 분기를 할 때 사용한다.

switch/case 문

특정 값이 무엇이냐에 따라 다른 작업을 하고 싶을 때 사용한다.

단, case값부터 시작해서 마지막까지 순차적으로 실행하기 때문에 각 케이스 내용 끝에 break를 써주어야 한다.

default는 해당하는 case 값이 없을 때 실행하는 코드이다.

const device = 'iphone';

switch (device) {
  case 'iphone':
    console.log('아이폰!');
    break;
  case 'ipad':
    console.log('아이패드!');
    break;
  case 'galaxy note':
    console.log('갤럭시 노트!');
    break;
  default:
    console.log('모르겠네요..');
}

함수

함수란?

특정 코드를 하나의 명령으로 실행할 수 있게 해주는 기능

함수를 만들 때는 function 이라는 키워드를 사용하며, 어떤 값을 받아올지를 정해주는데 이를 파라미터(매개변수, 인자)라고 한다.

또한 함수 내부에서 return이라는 키워드를 사용하여 결과물을 지정할 수 있다. return은 추가적으로 함수를 종료하는 기능을 가지고 있기 때문에 함수의 마지막이나 임의로 종료하고 싶은 시점에 명시하면 된다.

문자열 리턴

  • 문자열 조합시 +연산자를 사용할 수 도 있지만,

  • 더욱 편하게, 템플릿 리터럴(template literal)이라는 문법을 사용할 수 도 있다.

    function hello(name) {
  console.log(`Hello, ${name}!`);
}
hello('velopert');
//Hello velopert!

화살표 함수

함수를 선언하는 방식 중 또다른 방법은 화살표 함수 문법을 사용하는 것이다.

const add = (a, b) => {
	return a + b;
};
console.log(add(1, 2)); //3

또는 코드 블럭내에서 간단하게 한줄로 하나의 리턴을 하는 경우 다음과 같이 줄여 쓸 수 도 있다.

const add = (a, b) => a + b;

※ 단, 주의할 점은 function에서의 this와 화살표 함수 내에서의 this가 서로 다르다는 것이다. 이는 추후에 알아보자.

객체

객체란?

객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해준다.

const dog = {
// 키 : 원하는 값
  name: '멍멍이',
  age: 2
};

console.log(dog.name);  // 멍멍이
console.log(dog.age);   // 2

일반적으로 키는 공백이 없어야하지만 공백이 필요한 경우 따옴표로 감싸서 문자열로 넣어주면 된다.

const sample = {
  'key with space': true
};

함수에서 객체를 파라미터로 받기

// 자바스크립트에서는 카멜케이스 표기법을 사용한다.
const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print(hero) {
  const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${
    hero.actor
  } 입니다.`; // 템플릿 리터럴 방식을 사용해서 문자열로 출력
  console.log(text);
}

print(ironMan);
//아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다.
print(captainAmerica);
//캡틴 아메리카(스티븐 로저스) 역할을 맡은 배우는 크리스 에반스 입니다.

객체 비구조화 할당

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print(hero) {   // 이는 객체 구조 분해라고 부른다.
  const { alias, name, actor } = hero;
	//이 코드가 객체에서 값들을 추출해서 새로운 상수로 선언해 주는 것 입니다.
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

더 나아가면 파라미터 단계에서 객체 비구조화 할당을 할 수도 있다.

function print({ alias, name, actor }) {
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

객체 안에 함수 넣기

const dog = {
  name: '멍멍이',
  sound: '멍멍!',
  say: function say() {
    console.log(this.sound);  //여기서 this는 객체 자신을 가리킨다.
  }
};

dog.say();

함수를 선언할 때는 이름이 굳이 없어도 된다.

const dog = {
  name: '멍멍이',
  sound: '멍멍!',
  say: function() {
    console.log(this.sound);
  }
};

dog.say();

여기서 함수를 화살표함수로 작성하면 제대로 작동하지 않는데 그이유는 화살표함수의 this가 객체를 가리키지 않기 때문이다.

Getter함수와 Setter함수

Getter함수와 Setter함수를 사용하게 되면 특정값을 바꾸려고 하거나, 특정 값을 조회하려고 할 때 우리가 원하는 코드를 실행시킬 수 있다.

const numbers = {
  a: 1,
  b: 2,
  get sum() {
    console.log('sum 함수가 실행됩니다!');
    return this.a + this.b;
  }
};

console.log(numbers.sum);  // numbers.sum()을 통해 함수를 실행시키지 않아도 함수가 실행되고 값까지 반환된다.
numbers.b = 5;
console.log(numbers.sum);

이런식으로 Getter 함수는 특정 값을 조회 할 때 우리가 설정한 함수로 연산된 값을 반환한다.

const numbers = {
  _a: 1,
  _b: 2,
  sum: 3,
  calculate() {
    console.log('calculate');
    this.sum = this._a + this._b;
  },
  get a() {
    return this._a;
  },
  get b() {
    return this._b;
  },
  set a(value) {
    console.log('a가 바뀝니다.');
    this._a = value;
    this.calculate();
  },
  set b(value) {
    console.log('b가 바뀝니다.');
    this._b = value;
    this.calculate();
  }
};

console.log(numbers.sum);  // 3
numbers.a = 5;    // sum => 7
numbers.b = 7;    // sum => 12
numbers.a = 9;    // sum => 16
console.log(numbers.sum);  // 16
console.log(numbers.sum);  // 16
console.log(numbers.sum);  // 16

setter함수는 객체 내 변수의 값을 바꾸는 역할을 하는데 set 키워드가 없으면 numbers.a(5)이런식으로 바꿔야할 것을 numbers.a = 5 이렇게 더 직관적인 키워드로 바꿀 수 있다.

profile
bp.chys
하루에 한걸음씩, 꾸준히
이전 포스트

CSS 기초 내용 정리

다음 포스트

JavaScript 기초 문법 정리 - 2

0개의 댓글