Java Script :: 입문(1)

📝 변수

💡 변수 : 바뀔 수 있는 값

💬 let

💬 var (거의 사용 X)

⚠ 똑같은 이름으로 여러 번 선언 X

💡 상수 : 고정적인 값

💬 const

💡 null : "값이 없다"를 설정할 때

💡 undefined : 값이 아직 설정되지 않았을 때

📝 연산자

💡 연산 순서

💬 NOT -> AND -> OR

💡 비교 연산자

💬 == : 두 값이 일치하는 지 비교 (타입 포함 X) / !=

💬 === : 두 값이 일치하는 지 비교 (타입 포함) / !==

const equals = (1 == '1');
console.log(equals);           //true
const isequals = (1 === '1');
console.log(isequals);         //false

const equals = (0 == false);
console.log(equals);           //true

const equals = (null == undefined);
console.log(equals);           //true

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

📝 함수

💡 function 키워드

function add(a, b) {
  return a + b;
}

const sum = add(1, 2);
console.log(sum);  // 3

💬 문자열 조합 시 + 사용

function fuc(say) {
  console.log('Hello, ' + say + '!');
}
fuc('World'); // Hello, World!

💬 문자열 조합 시 템플릿 리터럴 사용

⚠ ' (Single quote) 대신에 ` (Grave accent)를 사용

function fuc(say) {
  console.log(`Hello, ${say}!`);
}
fuc('World'); // Hello, World!

💡 화살표 함수

💬 function 키워드 대신 '=>' 문자를 사용

💬 화살표의 좌측에는 함수의 파라미터, 화살표의 우측에는 코드 블록

const add = (a, b) => {
  return a + b;
};

console.log(add(1, 2));  // 3

// 바로 리턴할 경우
const add = (a, b) =>  a + b;

💡 function 함수 vs 화살표 함수

💬 각자 함수에서 가르키는 this가 서로 다름

📝 객체

💡 선언

💬 { 키 : 값 }

💬 변/상수 사용 시, 하나의 이름에 여러 종류의 값을 넣을 수 있음

const cat = {
  name: '삼색이',  // 키 : name, 값 : '삼색이' 
  age: 3         // 키 : age , 값 : 3
};

console.log(cat.name);  // 삼색이
console.log(cat.age);   // 3

const stringex = {
  'flowers in bloom': true  // 키 : flowers in bloom, 값 : true
};

⚠ 키에 해당하는 부분은 공백이 없어야 함. 필요 시, 따옴표를 사용하여 문자열로 입력

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

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

console.log(ironMan);
// Object {}
console.log(captainAmerica);

💡 객체를 파라미터로 받기

...

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

print(ironMan);
print(captainAmerica);

💡 객체 비구조화 할당

...

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);
}

print(ironMan);
print(captainAmerica);

💡 객체 내 함수 사용

💬 this : 자신이 속해있는 객체

💬 함수 선언 시 이름이 없어도 됨

⚠ 객체 내 함수 사용 시, 화살표 함수 선언 사용 X

const cat = {
  name: '삼색이',
  sound: '야옹',
  name: function name() {
    console.log(this.name);
  }
  say: function() {  // 이름 생략
    console.log(this.sound);
  }
};

cat.name(); // 삼색이
cat.say();  // 야옹

💡 Getter 함수와 Setter 함수

💬 특정 값을 바꾸거나, 조회할 때 원하는 코드 실행 가능

💡 Getter 함수

💬 get 키워드

💬 특정 값을 조회 시, 설정한 함수로 연산된 값 반환

const numbers = {
  a: 1,
  b: 2,
  get sum() {  // Getter 함수
    console.log('sum 함수 실행');
    return this.a + this.b;
  }
};

console.log(numbers.sum);   // sum 함수 실행     3
numbers.b = 5;
console.log(numbers.sum);   // sum 함수 실행     6

numbers.sum()을 한 것이 아니라 number.sum을 조회했을 뿐인데, 함수 실행 및 결과값 출력

💡 Setter 함수

💬 set 키워드

const numbers = {
  _a: 1,
  _b: 2,
  sum: 3,
  calculate() {
    console.log('calculate 함수 실행');
    this.sum = this._a + this._b; 
    // 바뀐, a 값과 b 값을 더하여 sum 값 변경 
  },
  get a() {   // Getter 함수
    return this._a;
  },
  get b() {
    return this._b;
  },
  set a(value) {   // Setter 함수
    console.log('a 변경'); 
    this._a = value;   // a 값 변경
    this.calculate();  // calculate 함수 호출
  },
  set b(value) {
    console.log('b 변경');
    this._b = value;
    this.calculate();
  }
};

console.log(numbers.sum);  // 3
numbers.a = 5;             // a 변경	   calculate 함수 실행
numbers.b = 7;             // b 변경	   calculate 함수 실행
numbers.a = 9;             // a 변경	   calculate 함수 실행
console.log(numbers.sum);  // 16

numbers.a = 5 와 같이 값을 설정했을 시, 5 를 함수의 파라미터로 받아옴

이전 코드에서는 numbers.sum 이 조회 될 때마다 덧셈이 이루어졌지만, 이 코드는 a 또는 b 값이 바뀔 때마다 sum 값을 연산

Reference

벨로퍼트와 함께하는 모던 자바스크립트