[바닐라코딩 | Javascript] - Part2 요약

1)Function(함수) 소개
여러 개의 코드 구문들을 하나의 단위로 묶어 실행할 수 있는 것을 의미함

 

2)함수 선언 방식

// Function Declaration (함수 선언식)
function foo () {
  // function body..
}

// Function Expression (함수 표현식)
const foo = function () {
  // function body..
};

Function (함수)는 위와 같이 크게 두 가지 방법으로 선언하여 만들 수 있습니다. 각자 선호하는 방식으로 선언하여 사용해도 무관하지만, 단일 프로젝트 내에서 일관된 스타일을 유지하는 것은 중요하므로, 한 가지 방식을 선택하여 사용하셔야 합니다.

3)함수 선언과 실행의 구분

(1)함수 선언

function foo () {
  for (let i = 1; i <= 3; i++) {
    console.log(i);
  }
}

 위 함수는 선언만 되었을 뿐 실행되지는 않았습니다. 즉 함수를 만들어놓기는 했지만, 사용하지는 않았다는 것입니다.

 

(2)함수 실행

foo();// 함수 실행

함수는 위와 같이 함수명 뒤에 소괄호(())를 이용하여 실행할 수 있습니다. 함수 실행문 뒤에는 세미콜론을 붙여야 합니다.

 

 

4)매개변수와 인수의 구분

// 함수 선언 (생성)
function add (x, y) {
  var result = x + y;
  console.log(result);
  return result;
}

// 함수 실행
add(3, 5);

(1)매개 변수 - 함수 선언과 관련

함수(설계도)에 필요한 요소들을 "정의"하는 것을 말함. 함수를 선언하고, 그 함수에 대한 매개 변수를 선언하는 것은 매개 변수의 값을 정해주지 않습니다. 함수 선언 시에는 결정할 수 없지만, 함수 실행 시점에 사용자가 원하는 값으로 정확히 지정하여 사용할 수 있도록 설정할 수 있습니다.

(2)인수, 인자 - 함수 실행과 관련

 

매개 변수의 정확한 값은 함수를 실행 하는 순간에 결정됩니다. 위의 예제에서 add(3, 5);라고 함수를 실행했습니다. 3과 5처럼 함수를 실행할때 넘겨지는 정보들을 인자(argument)라고 부릅니다.

 

5)Return Statement

함수 내부에서는 return 구문을 사용할 수 있습니다.

(1)함수 종료

함수 내부에서 return 구문이 실행될 경우, 해당 함수가 종료됩니다

function doSomething () {
  console.log('start!');
  var a = 3;
  var b = 2;

  if (a > b) {
    console.log('a is bigger than b!');
    return;
  }

  console.log('I am the last console.log!');
}

doSomething();

(2)값 반환

함수를 종료하는 기능과 더불어 어떠한 값을 "반환"할 수 있게 해줍니다.

function getA () {
  return 1;
}

var a = getA();
console.log(a);

함수 실행문이 있는 자리는 해당 함수의 반환값으로 대체됩니다. 예제 코드에서 getA()라는 실행 구문은 getA 함수의 반환값(1)으로 대체되는 것입니다. 즉, a라는 변수에는 1이 대입됩니다.

 

함수에 return 구문이 없거나 실행되지 않을 경우, undefined가 결과값이 됩니다

function doSomething () {
  var a = 3;
  var b = 2;

  if (a > b) {
    return;
  }

  return 3;
}

var a = doSomething();
console.log(a);

위 코드에서는 결과적으로 undefined가 콘솔에 출력됩니다.doSomething 함수 내부에는 return 구문이 두 개 존재합니다. 하지만 두번째 return 구문은 실행되지 않습니다. 왜냐하면 if 구문 내부에 있는 첫번째 return 구문이 함수를 종료시키게 되기 때문입니다.

 

첫번째 return 구문을 자세히 살펴본다면, return이라는 단어 뒤에 그 어떤 값도 지정해주지 않았습니다. 이럴 경우, 기본적으로 undefined가 반환되게 됩니다. 이와 마찬가지로 return되는 값을 지정해주지 않고 종료되는 함수의 경우에도 기본적으로 undefined가 반환되게 됩니다.

 

6)예시

(1)`${보간}'

function greetingMaker(greet, name) {
  return `${greet+', '+name}`;
}

const hello = greetingMaker("Hello", "Jett");
const goodBye = greetingMaker("Goodbye", "Justin");

const result = (hello === "Hello, Jett") && (goodBye === "Goodbye, Justin");

if (result) {
	alert("🎉");
}

(2)할당 대입

let myBurger = "Hamburger";

const addCheese = function (burger) {
  const cheese = " with Cheese";

  return burger + cheese;
};

const addPatty = function (burger) {
  const patty = " with Patty";

  return burger + patty;
};

const addTomato = function (burger) {
  return burger + ' and Tomato';
};;

myBurger = addCheese(myBurger);
myBurger = addPatty(myBurger);
myBurger = addTomato(myBurger);

if (myBurger === "Hamburger with Cheese with Patty and Tomato") {
  alert("🎉");
}

 

7)Arrays

어떠한 정보(값)들을 순서대로 저장할 수 있는 구조입니. 대괄호를 이용해 배열을 만들 수 있음.

 

(1)배열의 요소 수정

인덱스를 이용하여 배열의 해당 인덱스 위치에 자리한 요소를 수정할 수도 있습니다.

var fibonacci = [ 1, 2, 3, 5, 8, 13 ];

console.log(fibonacci[4]); // 8

fibonacci[4] = false;

console.log(fibonacci[4]); // false

(2)배열에 요소 추가하기

인덱스를 이용하여 원하는 위치에 요소를 추가할 수 있습니다.

var arr = [];
arr[0] = true;
console.log(arr[0]); // true

arr[2] = true;
console.log(arr[2]); // true

console.log(arr); // [ true, undefined, true ]

또는 아래와 같이 메서드를 이용할 수도 있습니다. 모두 뒤에 추가 또는 제거함.

var arr = [];

// push 메서드는 배열의 뒤에 요소를 추가합니다.
arr.push(1); // arr은 [1]이 됩니다.
arr.push(2); // arr은 [1, 2]가 됩니다.

// pop 메서드는 배열의 뒤에서 하나의 요소를 제거합니다.
arr.pop(); // arr은 다시 [1]이 됩니다.
arr.pop(); // arr은 다시 빈 배열이 됩니다.

pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환함. 이에 아래 콘솔 출력 값은 Mango가 된다.

const fruitList = ["Apple"];

fruitList.push("Lemon");
fruitList.push("Mango");

const fruit2 = fruitList.pop();
console.log(fruit2); //"Mango"

(3)예시

①실행문 내 result += animalist[i] 

const animalList = ["Dog", "Cat", "Lion", "Koala"];
let result = "";

for (let i = 0; i < animalList.length; i++) {
  result += animalList[i];
}

if (result === "DogCatLionKoala") {
  alert("🎉");
}

②Array.indexof() === -1

배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.

const machine = ["Coke", "Pepsi", "Fanta"];
const storage = ["Pepsi", "Coke", "Sprite", "Fanta"];

for (let i = 0; i < storage.length; i++) {
  if (machine.indexOf(storage[i]) === -1) {
    machine.push(storage[i]);
  }
}

const result =  machine[machine.length - 1];

if (result === "Sprite") {
  alert("🎉");
}

8)Object

1)key/value

(1) 쉼표(,)

한 쌍의 key/value 뒤에 "쉼표"를 이용하여 그 뒤에 오는 key/value와 구분해주어야 합니다.

(2)식별자

속성(key)와 관련하여 'languages'와 '한국 나이'와 같이 속성 이름 부분에 문자열을 써도 상관없습니다만, '한국 나이'에 들어간 공백과 같이 식별자에 허용되지 않는 문자가 들어간 속성 이름을 정의할 때는 반드시 문자열 표기(따옴표)를 사용해야 합니다.

const person = {
  name: 'Ken Huh',                      
  languages: [ 'Korean', 'English' ],
  '한국 나이': 36                        
};

(3)변수 및 함수 할당

객체의 속성(key)에 이미 정의된 변수나 함수를 Value로 지정할 수도 있습니다.

//변수 및 함수 선언
const me = 'Ken Huh'; 

function getAge () {
  return 36;
}

// value로 변수나 함수 할당함
const person = {
  name: me,
  age: getAge()
};

매우 신기하게 대괄호를 사용해서 다른 변수에 저장된 문자열을 속성(Key)의 이름으로 쓰는 것도 가능합니다.

const property = 'name';

const obj = {
  [property]: 'Ken Huh'
};

obj.name;      // 'Ken Huh'

 

2)객체에 저장된 값(value) 가져오기

(1)Dot notation

이미 생성된 객체의 속성에 대한 Value를 가져올 수도,  지정해줄 수도 있습니다. 특별한 경우가 아니라면, 일반적으로 Dot Notation이 많이 사용되는 편입니다.

var person1 = {
  name: "Ken Huh",
  age: 13,
};

var myName = person1.name;
console.log(myName); // "Ken Huh"

(2)Bracket notation

Array나 String의 index와 유사함. 객체 순회문 또는 식별자로 허용되지 않는 문자가 들어간 속성 이름을 사용해야 하는 경우에는 반드시 Bracket notation을 사용해야 합니다.

var person1 = {
  name: "Ken Huh",
  age: 13,
};

var myName = person1["name"];
console.log(myName); // "Ken Huh"

 

3)객체에 새로운 key/value 추가,수정,삭제하기

(1)추가

객체 리터럴을 이용해 빈 객체를 생성해 준 뒤, Dot Notation을 통해 속성을 갱신해주었습니다.별자로 허용되지 않는 문자가 들어간 속성 이름을 사용해야 하는 경우에는 반드시 Bracket notation을 사용해야 합니다.

var person = {
  name: "Ken Huh"
};

console.log(person.age); // undefined (존재하지 않는 key/value)

// 추가
person.age = 13; // 혹은 person["age"] = 13;

console.log(person.age); // 13

(2)수정

var person = {
  name: "Ken Huh",
  age: 13
};

console.log(person.age); // 13

// 수정
person.age = 15; // 혹은 person["age"] = 15;

console.log(person.age); // 15

(3)삭제

var person = {
  name: "Ken Huh",
  age: 13
};

console.log(person.age); // 13

// 삭제
delete person.age;

console.log(person.age); // undefined (더 이상 존재하지 않는 key/value)

 

4)객체 순회하기 (정확히는 속성(key)을 순회함) 

주로 객체의 Key/Value를 순회하기 위한 목적으로 사용됩니다.

prop ⓞ변수에 in 연산자 뒤에 위치한 ①객체의 속성들(key)이 ②하나씩 ③문자열 형태로 담깁니다. 예를 들어, 첫 반복 때는 prop 변수의 값은 "one", 두번째 반복 시에는 "two", 세번째 반복 시에는 "three" 등입니다. 

또한 이를 이용해 각 속성의 Value(Bracket Notation 활용)를 사용할 수도 있습니다.

const sample = {
  one: 1,
  two: 2,
  three: 3
};

for (let prop in sample) {
  console.log(prop);
  console.log(sample[prop]);
}

 

 

5)Arrays and Functions

자바스크립트에서는 배열과 함수 또한 객체라는 범주에 포함됩니다. 배열과 함수 또한 일반 객체와 동일한 성질(index 및 Dot Notation)을 갖고 있습니다.

(1)Array

const arr = [ 1, 2, 3 ];

console.log(arr[0]);    // 1
console.log(arr.title); // undefined

arr.title = 'Vanilla Coding';

console.log(arr.title); // 'Vanilla Coding'

(2)Function

function foo (a, b) {
  return a + b + 3;
}

console.log(foo.title); // undefined

foo.title = 'Vanilla Coding';

console.log(foo.title); // 'Vanilla Coding'

console.log(foo(1, 2)); // 6

이처럼 배열이나 함수 또한 객체의 한 종류이기 때문에, 우리가 원한다면 속성을 추가할 수 있습니다. 하지만 일반적으로 배열이나 함수에 우리가 별도의 속성을 추가하여 사용하는 경우는 거의 없고 주로 기본적으로 제공된 속성과 메소드를 사용합니다.

 

6)예시

(1) `${name} {age}` - 보간법

띄어쓰기 안에 있음 (유효함)

const person = {
  age: 30,
  name: "Jett",
};

const name = person["name"];
const age = person.age;

const result = `${name} ${age}`;

if (result === "Jett 30") {
  alert("🎉");
}

(2) 객체 순회문 및 실행문 내 보간법 

객체 순회문 실행시 속성(key)이 문자열 형태로 출력된다. 이에 보간법 및 객체 index 하는데 활용 가능함.

Value index할 때 속성(Key)은  문자열 리터럴 방식으로 작성되기 때문이다.

const person = {
  age: 30,
  name: "Jett",
  address: "Seoul"
};

for (const prop in person) {
  console.log(prop)
  console.log(`Person ${prop} ${person[prop]}`);  
}

//console 출력 내용
"age"  //문자열 형태의 속성(Key)
"Person age 30" 
"name"
"Person name Jett"
"address"
"Person address Seoul"

 

#참고 URL

Object - Starter Kit